Xamarin.Forms 的觸發使用方法

Xamarin.Forms 提供了底下四種觸發方法可以使用

屬性觸發 Property Trigger - 當所指定的屬性值有變更並且符合指定的條件，就會進行相關內容設定。

資料觸發 Data Trigger - 若這個屬性使用了資料繫結來綁定其屬性值，可以使用這個方式，當綁定的屬性值符合觸發條件，就可以進行相關內容設定。

事件觸發 Event Trigger - 當所指定的事件發生的時候，就會被觸發。

多重觸發 Multi Trigger - Xamarin.Forms 允許多重觸發條件的設定。

要定義觸發非常的容易，因為每個 View 都會擁有一個 Triggers 屬性，使用 Property-Element 的標示方式，就可以定義這個 View 的觸發條件與相關動作。

範例專案

https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFTrigger

在這個範例中，完全沒有用到 ViewModel 與 Code Behind，就可以做到

屬性觸發 Property Trigger

在其 Triggers 屬性內，可以定義屬性觸發，例如這樣： <Trigger TargetType="Entry" Property="IsFocused" Value="True" > 這裡定義了，這個 Entry 控制項，當其 IsFocused 屬性值為 True 的時候，會進行底下的 Setter 的設定；講白話一點，就是當使用者點選到這個控制項之後，這個 Entry 控制項的三個屬性就會跟著變更；若使用者切換到其他的控制項內，則這三個屬性值，就會回到原先的設定值。

        <Entry Placeholder="請輸入名稱" FontSize="14">
            <Entry.Triggers>
                <Trigger TargetType="Entry" Property="IsFocused" Value="True" >
                    <Setter Property="BackgroundColor" Value="Black" />
                    <Setter Property="PlaceholderColor" Value="Yellow" />
                    <Setter Property="TextColor" Value="White" />
                </Trigger>
            </Entry.Triggers>
        </Entry>

資料觸發 Data Trigger

在這個範例中，需要做到當 Entry 有輸入資料的時候，該 Entry 底下的按鈕才會啟用，也就是使用者可以來點選。

要做到這樣的效果，需要在 Button 控制項內 Triggers 設定一個觸發條件，就是 DataTrigger，但是，在這裡並不使用 Value 這個屬性，而是使用了 Binding 這個屬性，裡面指定了綁定的來源；在這個範例中，透過了 Source 指定綁定來源為另外一個 Entry 控制項內的 Text.Length 這個使用。當這個屬性值為 0 的時候，就會觸發條件，設定這個按鈕為停止啟用狀態。這也就是說，當使用者在 Entry 內輸入資料的時候，這個按鈕的 IsEnabled 就會變成 True，也就是，這個按鈕可以讓使用者點選了。

        <!-- 提示: 確定 Text="" 需要有預設值，否則，會以問題 -->
        <Entry x:Name="entry" Text="" Placeholder="這個欄位需要輸入" 
                FontSize="14" TextColor="Blue" />
        <Button Text="儲存" HorizontalOptions="Center">
            <Button.Triggers>
                <DataTrigger TargetType="Button"
                     Binding="{Binding Source={x:Reference entry},
                                       Path=Text.Length}" Value="0">
                    <Setter Property="IsEnabled" Value="False" />
                </DataTrigger>
            </Button.Triggers>
        </Button>

事件觸發 Event Trigger

事件觸發則是更加簡單了，透過設定 <EventTrigger Event="TextChanged"> 設定 Event 這個屬性，當其指定的事件發生之後，就會執行 <local:NumericValidationTriggerAction /> 內的 Invoke 方法。

        <Entry Placeholder="請輸入名稱" FontSize="14">
            <Entry.Triggers>
                <EventTrigger Event="TextChanged">
                    <local:NumericValidationTriggerAction />
                </EventTrigger>
            </Entry.Triggers>
        </Entry>

NumericValidationTriggerAction 類別需要繼承 TriggerAction<T>，並且定義 Invoke 這個方法

    class NumericValidationTriggerAction : TriggerAction<Entry>
    {
        protected override void Invoke(Entry entry)
        {
            double result;
            bool isValid = Double.TryParse(entry.Text, out result);
            entry.TextColor = isValid ? Color.Default : Color.Red;
            entry.Scale = 1.4;
        }
    }

多重觸發 Multi Trigger

多重觸發看起來與屬性觸發和資料觸發類似，但是，在多重觸發中，可以設定更多的觸發條件，必須當所有設定的條件都符合的時候，才會進行觸發的 Setter 設定動作。

在底下的範例中，按鈕使用了 <MultiTrigger TargetType="Button"> ，也就是使用了多重觸發。

這裡定義了兩個觸發條件，也就是當上面兩個 Entry 都沒有輸入任何內容的時候，這個多重觸發條件就會啟動，這個時候，這個按鈕就會被設定 IsEnabled的值為 False，就是這個按鈕是無法使用的。

講白話一點，當這兩個 Entry 任何一個或者兩個，都有輸入內容的時候，這個按鈕 IsEnabled 就會為 True，就是可以被點選。

        <!--這裡為什麼無法做到兩個同時都要輸入，才能夠觸發呢?-->
        <Label Text="多重觸發 Multi Trigger(任一有輸入)" TextColor="Blue"/>
        <Entry x:Name="user" Text="" Placeholder="請輸入使用者名稱" FontSize="14" />
        <Entry x:Name="pwd" Text="" Placeholder="請輸入密碼" IsPassword="True" FontSize="14" />
        <Button x:Name="loginButton" Text="Login"
                HorizontalOptions="Center" >
            <Button.Triggers>
                <MultiTrigger TargetType="Button">
                    <MultiTrigger.Conditions>
                        <BindingCondition Binding="{Binding Source={x:Reference user},
                                   Path=Text.Length}" Value="0" />
                        <BindingCondition Binding="{Binding Source={x:Reference pwd},
                                   Path=Text.Length}" Value="0" />
                    </MultiTrigger.Conditions>
                    <Setter Property="IsEnabled" Value="False" />
                </MultiTrigger>
            </Button.Triggers>
        </Button>

在上面的多重觸發應用中，若我們想要做到這兩個 Entry 都有輸入值的時候，按鈕才可以使用，那麼，這樣如何做到呢？這個時候，就要看底下的範例。

在這裡，還是一樣要設定 Button.Triggers 的 MultiTrigger 條件，不過，在這裡，按鈕預設是被停用狀態。

在進行設定 BindingCondition 條件的時候，透過了數值轉換器來將字串的長度，轉換成為布林值。

所有，兩個多重觸發的條件，都是當使用者有輸入內容的時候( Text.Length > 0) ，其條件就會成立。

請記得多重觸發是 必須當所有設定的條件都符合的時候，才會進行觸發的 Setter 設定動作 這樣的規則，因此，在此就可以做到，兩個 Entry 都有輸入內容的時候，按鈕才會啟用。

        <!--這裡需要兩個文字輸入盒同時都要有輸入，按鈕才會啟用-->
        <Label Text="多重觸發 Multi Trigger(都要有輸入)" TextColor="Blue"/>
        <Entry x:Name="user1" Text="" Placeholder="請輸入使用者名稱" FontSize="14" />
        <Entry x:Name="pwd1" Text="" Placeholder="請輸入密碼" IsPassword="True" FontSize="14" />
        <Button x:Name="login1Button" Text="Login"
                FontSize="Large"
                HorizontalOptions="Center"
                IsEnabled="false">

            <Button.Triggers>
                <MultiTrigger TargetType="Button">
                    <MultiTrigger.Conditions>
                        <BindingCondition Binding="{Binding Source={x:Reference user1},
                                               Path=Text.Length,
                                               Converter={StaticResource dataHasBeenEntered}}"
                                           Value="true" />
                        <BindingCondition Binding="{Binding Source={x:Reference pwd1},
                                               Path=Text.Length,
                                               Converter={StaticResource dataHasBeenEntered}}"
                                           Value="true" />
                    </MultiTrigger.Conditions>

                    <Setter Property="IsEnabled" Value="True" />
                </MultiTrigger>
            </Button.Triggers>
        </Button>

這個 MultiTriggerConverter 數值轉換器，會收到一個整數數值，若該數值大於 0，則會回傳 True，否則，會回傳 False。這表示了，當使用者在 Entry 有輸入內容的時候，會經過數值轉換器得到 True 的值。

    class MultiTriggerConverter : IValueConverter
    {
        public object Convert(object value, Type targetType,
            object parameter, CultureInfo culture)
        {
            if ((int)value > 0)
                return true;    // data has been entered
            else
                return false;   // input is empty
        }

        public object ConvertBack(object value, Type targetType,
            object parameter, CultureInfo culture)
        {
            throw new NotSupportedException();
        }
    }

完整的 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"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             xmlns:local="clr-namespace:XFTrigger"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="XFTrigger.Views.MainPage"
             Title="MainPage">

    <ContentPage.Resources>
        <ResourceDictionary>
            <local:MultiTriggerConverter x:Key="dataHasBeenEntered" />
        </ResourceDictionary>
    </ContentPage.Resources>
    <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
        <Label Text="屬性觸發 Property Trigger" TextColor="Blue"/>
        <Entry Placeholder="請輸入名稱" FontSize="14">
            <Entry.Triggers>
                <Trigger TargetType="Entry" Property="IsFocused" Value="True" >
                    <Setter Property="BackgroundColor" Value="Black" />
                    <Setter Property="PlaceholderColor" Value="Yellow" />
                    <Setter Property="TextColor" Value="White" />
                </Trigger>
            </Entry.Triggers>
        </Entry>


        <Label Text="資料觸發 Data Trigger"/>
        <!-- 提示: 確定 Text="" 需要有預設值，否則，會以問題 -->
        <Entry x:Name="entry" Text="" Placeholder="這個欄位需要輸入" 
                FontSize="14" TextColor="Blue" />
        <Button Text="儲存" HorizontalOptions="Center">
            <Button.Triggers>
                <DataTrigger TargetType="Button"
                     Binding="{Binding Source={x:Reference entry},
                                       Path=Text.Length}" Value="0">
                    <Setter Property="IsEnabled" Value="False" />
                </DataTrigger>
            </Button.Triggers>
        </Button>

        <Label Text="事件觸發 Event Trigger" TextColor="Blue"/>
        <Entry Placeholder="請輸入名稱" FontSize="14">
            <Entry.Triggers>
                <EventTrigger Event="TextChanged">
                    <local:NumericValidationTriggerAction />
                </EventTrigger>
            </Entry.Triggers>
        </Entry>

        <!--這裡為什麼無法做到兩個同時都要輸入，才能夠觸發呢?-->
        <Label Text="多重觸發 Multi Trigger(任一有輸入)" TextColor="Blue"/>
        <Entry x:Name="user" Text="" Placeholder="請輸入使用者名稱" FontSize="14" />
        <Entry x:Name="pwd" Text="" Placeholder="請輸入密碼" IsPassword="True" FontSize="14" />
        <Button x:Name="loginButton" Text="Login"
                HorizontalOptions="Center" >
            <Button.Triggers>
                <MultiTrigger TargetType="Button">
                    <MultiTrigger.Conditions>
                        <BindingCondition Binding="{Binding Source={x:Reference user},
                                   Path=Text.Length}" Value="0" />
                        <BindingCondition Binding="{Binding Source={x:Reference pwd},
                                   Path=Text.Length}" Value="0" />
                    </MultiTrigger.Conditions>
                    <Setter Property="IsEnabled" Value="False" />
                </MultiTrigger>
            </Button.Triggers>
        </Button>

        <!--這裡需要兩個文字輸入盒同時都要有輸入，按鈕才會啟用-->
        <Label Text="多重觸發 Multi Trigger(都要有輸入)" TextColor="Blue"/>
        <Entry x:Name="user1" Text="" Placeholder="請輸入使用者名稱" FontSize="14" />
        <Entry x:Name="pwd1" Text="" Placeholder="請輸入密碼" IsPassword="True" FontSize="14" />
        <Button x:Name="login1Button" Text="Login"
                FontSize="Large"
                HorizontalOptions="Center"
                IsEnabled="false">

            <Button.Triggers>
                <MultiTrigger TargetType="Button">
                    <MultiTrigger.Conditions>
                        <BindingCondition Binding="{Binding Source={x:Reference user1},
                                               Path=Text.Length,
                                               Converter={StaticResource dataHasBeenEntered}}"
                                           Value="true" />
                        <BindingCondition Binding="{Binding Source={x:Reference pwd1},
                                               Path=Text.Length,
                                               Converter={StaticResource dataHasBeenEntered}}"
                                           Value="true" />
                    </MultiTrigger.Conditions>

                    <Setter Property="IsEnabled" Value="True" />
                </MultiTrigger>
            </Button.Triggers>
        </Button>
    </StackLayout>
</ContentPage>