星期六, 8月 05, 2017

[X.Form] Property Trigger

根據這篇官方文章 Triggers 的練習,利用 Style 來統一設定 Entry 取的 Focus 後的顏色變化

Property Trigger 說明
occurs when a property on a control is set to a particular value.
Xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MVVMPractice.XF3_PropertyTrigger">

    <ContentPage.Resources>
        <ResourceDictionary>
            <Style TargetType = "Entry">
                <Style.Triggers>
                    <Trigger 
                        TargetType ="Entry"
                        Property="IsFocused"
                        Value="True">
                            <Setter Property="BackgroundColor" Value="#6699CC"></Setter>
                            <Setter Property="PlaceholderColor" Value="#99CCFF" />
                            <Setter Property="TextColor" Value="#FFFFFF" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>

    <ContentPage.Content>
        <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
            <Entry Placeholder="請輸入 Email" WidthRequest="300"></Entry>
            <Entry Placeholder="請輸入密碼" WidthRequest="300" IsPassword="True"></Entry>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>
執行結果-1

[X.Form] Property Trigger-1

執行結果-2

[X.Form] Property Trigger-2

執行結果-3

[X.Form] Property Trigger-3

沒有留言:

張貼留言