Xamarin.Forms のトリガーXamarin.Forms Triggers

• 04/17/2020
• • 
  • 

サンプルのダウンロード Download the sample

トリガーを使用すると、イベントまたはプロパティの変更に基づいてコントロールの外観を変更するアクションを XAML での宣言として表すことができます。Triggers allow you to express actions declaratively in XAML that change the appearance of controls based on events or property changes. また、トリガーの特殊なグループである状態トリガーでは、VisualState を適用する条件を定義できます。In addition, state triggers, which are a specialized group of triggers, define when a VisualState should be applied.

トリガーは、コントロールに直接割り当てることも、ページ レベルまたはアプリケーション レベルのリソース ディクショナリに追加して複数のコントロールに適用することもできます。You can assign a trigger directly to a control, or add it to a page-level or app-level resource dictionary to be applied to multiple controls.

プロパティ トリガーProperty triggers

コントロールのトリガー コレクションに Trigger 要素を追加して、XAML 内だけでシンプルなトリガーを表現できます。A simple trigger can be expressed purely in XAML, adding a Trigger element to a control's triggers collection. 次の例では、フォーカスが設定されると背景色を Entry に変更するトリガーを示します。This example shows a trigger that changes an Entry background color when it receives focus:

<Entry Placeholder="enter name">
    <Entry.Triggers>
        <Trigger TargetType="Entry"
                 Property="IsFocused" Value="True">
            <Setter Property="BackgroundColor" Value="Yellow" />
            <!-- multiple Setters elements are allowed -->
        </Trigger>
    </Entry.Triggers>
</Entry>

トリガーの宣言の重要な部分は次のとおりです。The important parts of the trigger's declaration are:

• TargetType - トリガーを適用するコントロールの種類です。TargetType - the control type that the trigger applies to.

• Property - コントロール上で監視するプロパティです。Property - the property on the control that is monitored.

• Value - 監視対象のプロパティがこの値になったら、トリガーをアクティブにします。Value - the value, when it occurs for the monitored property, that causes the trigger to activate.

• Setter - トリガー条件が満たされたときの Setter 要素のコレクションを追加できます。Setter - a collection of Setter elements can be added and when the trigger condition is met. 設定するには、Property と Value を指定する必要があります。You must specify the Property and Value to set.

• EnterActions と ExitActions (示されていません) - コードで記述され、Setter 要素に加えて (または代えて) 使用できます。EnterActions and ExitActions (not shown) - are written in code and can be used in addition to (or instead of) Setter elements. これらについては、後で説明します。They are described below.

スタイルを使用してトリガーを適用するApplying a trigger using a style

トリガーは、コントロール、ページ、またはアプリケーションの ResourceDictionary の Style 宣言に追加することもできます。Triggers can also be added to a Style declaration on a control, in a page, or an application ResourceDictionary. 次の例では、暗黙的なスタイルを宣言しています (つまり、Key が設定されていません)。これは、ページ上のすべての Entry コントロールに適用されることを意味します。This example declares an implicit style (i.e. no Key is set) which means it will apply to all Entry controls on the page.

<ContentPage.Resources>
    <ResourceDictionary>
        <Style TargetType="Entry">
                        <Style.Triggers>
                <Trigger TargetType="Entry"
                         Property="IsFocused" Value="True">
                    <Setter Property="BackgroundColor" Value="Yellow" />
                    <!-- multiple Setters elements are allowed -->
                </Trigger>
            </Style.Triggers>
        </Style>
    </ResourceDictionary>
</ContentPage.Resources>

データ トリガーData triggers

データ トリガーでは、データ バインディングを使用して別のコントロールが監視され、Setter が呼び出されます。Data triggers use data binding to monitor another control to cause the Setters to get called. プロパティ トリガーでの Property 属性の代わりに、指定した値を監視する Binding 属性を設定します。Instead of the Property attribute in a property trigger, set the Binding attribute to monitor for the specified value.

次の例では、データ バインディング構文 {Binding Source={x:Reference entry}, Path=Text.Length} を使用していますThe example below uses the data binding syntax {Binding Source={x:Reference entry}, Path=Text.Length} これは、別のコントロールのプロパティを参照する方法です。which is how we refer to another control's properties. entry の長さが 0 の場合、トリガーがアクティブにされます。When the length of the entry is zero, the trigger is activated. このサンプルでは、入力が空の場合、トリガーでボタンが無効にされます。In this sample the trigger disables the button when the input is empty.

<!-- the x:Name is referenced below in DataTrigger-->
<!-- tip: make sure to set the Text="" (or some other default) -->
<Entry x:Name="entry"
       Text=""
       Placeholder="required field" />

<Button x:Name="button" Text="Save"
        FontSize="Large"
        HorizontalOptions="Center">
    <Button.Triggers>
        <DataTrigger TargetType="Button"
                     Binding="{Binding Source={x:Reference entry},
                                       Path=Text.Length}"
                     Value="0">
            <Setter Property="IsEnabled" Value="False" />
            <!-- multiple Setters elements are allowed -->
        </DataTrigger>
    </Button.Triggers>
</Button>

Setter を指定するだけでなく、EnterActions と ExitActions を提供することもできます。In addition to specifying Setters you can also provide EnterActions and ExitActions.

Event triggers (イベント トリガー)Event triggers

次の例での "Clicked" のように、EventTrigger 要素では Event プロパティのみが必要です。The EventTrigger element requires only an Event property, such as "Clicked" in the example below.

<EventTrigger Event="Clicked">
    <local:NumericValidationTriggerAction />
</EventTrigger>

Setter 要素はなく、代わりにページの XAML で xmlns:local が宣言されている必要のある local:NumericValidationTriggerAction によって定義されたクラスへの参照があることに注意してください。Notice that there are no Setter elements but rather a reference to a class defined by local:NumericValidationTriggerAction which requires the xmlns:local to be declared in the page's XAML:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:WorkingWithTriggers;assembly=WorkingWithTriggers"

クラス自体では TriggerAction が実装されています。これは、トリガー イベントが発生するたびに呼び出される Invoke メソッドに対するオーバーライドを提供する必要があることを意味します。The class itself implements TriggerAction which means it should provide an override for the Invoke method that is called whenever the trigger event occurs.

トリガー アクションは次のように実装する必要があります。A trigger action implementation should:

• トリガーの適用対象であるコントロールの種類に対応するジェネリック パラメーターを使用してジェネリック TriggerAction<T> クラスを実装します。Implement the generic TriggerAction<T> class, with the generic parameter corresponding with the type of control the trigger will be applied to. VisualElement のようなスーパークラスを使用してさまざまなコントロールで動作するトリガーを記述したり、Entry のようなコントロールの種類を指定したりできます。You can use superclasses such as VisualElement to write trigger actions that work with a variety of controls, or specify a control type like Entry.

• Invoke メソッドをオーバーライドします。これは、トリガー条件が満たされるたびに呼び出されます。Override the Invoke method - this is called whenever the trigger criteria are met.

• 必要に応じて、トリガーを宣言するときに XAML で設定できるプロパティを公開します。Optionally expose properties that can be set in the XAML when the trigger is declared. この例については、付属のサンプル アプリケーションの VisualElementPopTriggerAction クラスを参照してください。For an example of this, see the VisualElementPopTriggerAction class in the accompanying sample application.

public 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;
    }
}

これにより、イベント トリガーを XAML から使用できるようになります。The event trigger can then be consumed from XAML:

<EventTrigger Event="TextChanged">
    <local:NumericValidationTriggerAction />
</EventTrigger>

ResourceDictionary でトリガーを共有する場合は注意が必要です。コントロール間で 1 つのインスタンスが共有されるので、1 つで構成された状態がすべてに適用されます。Be careful when sharing triggers in a ResourceDictionary, one instance will be shared among controls so any state that is configured once will apply to them all.

イベント トリガーでは、後で説明する EnterActions と ExitActions がサポートされていないことに注意してください。Note that event triggers do not support EnterActions and ExitActions described below.

マルチ トリガーMulti triggers

MultiTrigger は Trigger や DataTrigger と似ていますが、複数の条件を使用できる点が異なります。A MultiTrigger looks similar to a Trigger or DataTrigger except there can be more than one condition. Setter がトリガーされるには、すべての条件が満たされる必要があります。All the conditions must be true before the Setters are triggered.

2 つの異なる入力 (email と phone) にバインドされているボタンに対するトリガーの例を次に示します。Here's an example of a trigger for a button that binds to two different inputs (email and phone):

<MultiTrigger TargetType="Button">
    <MultiTrigger.Conditions>
        <BindingCondition Binding="{Binding Source={x:Reference email},
                                   Path=Text.Length}"
                               Value="0" />
        <BindingCondition Binding="{Binding Source={x:Reference phone},
                                   Path=Text.Length}"
                               Value="0" />
    </MultiTrigger.Conditions>
    <Setter Property="IsEnabled" Value="False" />
    <!-- multiple Setter elements are allowed -->
</MultiTrigger>

Conditions コレクションには、次のように PropertyCondition 要素を含めることもできます。The Conditions collection could also contain PropertyCondition elements like this:

<PropertyCondition Property="Text" Value="OK" />

"すべて必要" マルチ トリガーの作成Building a "require all" multi trigger

マルチ トリガーでは、すべての条件が真のときにのみコントロールが更新されます。The multi trigger only updates its control when all conditions are true. "すべてのフィールドの長さが 0" であることをテストするのは (すべての入力が完了する必要のあるログイン ページなど)、簡単ではありません。"Text.Length > 0 の場合" という条件が必要ですが、XAML でこれを表現することができないためです。Testing for "all field lengths are zero" (such as a login page where all inputs must be complete) is tricky because you want a condition "where Text.Length > 0" but this can't be expressed in XAML.

これは、IValueConverter を使用して行うことができます。This can be done with an IValueConverter. 次のコンバーター コードでは、Text.Length のバインドが、フィールドが空かどうかを示す bool に変換されています。The converter code below transforms the Text.Length binding into a bool that indicates whether a field is empty or not:

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

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

このコンバーターをマルチ トリガーで使用するには、最初に、ページのリソース ディクショナリに追加します (カスタム xmlns:local 名前空間の定義と共に)。To use this converter in a multi trigger, first add it to the page's resource dictionary (along with a custom xmlns:local namespace definition):

<ResourceDictionary>
   <local:MultiTriggerConverter x:Key="dataHasBeenEntered" />
</ResourceDictionary>

XAML を以下に示します。The XAML is shown below. 最初のマルチ トリガーの例と次の点が異なることに注意してください。Note the following differences from the first multi trigger example:

• ボタンには、IsEnabled="false" が既定で設定されます。The button has IsEnabled="false" set by default.
• マルチ トリガーの条件では、コンバーターを使用して Text.Length の値が boolean に変換されます。The multi trigger conditions use the converter to turn the Text.Length value into a boolean.
• すべての条件が true の場合、セッターはボタンの IsEnabled プロパティを true にします。When all the conditions are true, the setter makes the button's IsEnabled property true.

<Entry x:Name="user" Text="" Placeholder="user name" />

<Entry x:Name="pwd" Text="" Placeholder="password" />

<Button x:Name="loginButton" Text="Login"
        FontSize="Large"
        HorizontalOptions="Center"
        IsEnabled="false">
  <Button.Triggers>
    <MultiTrigger TargetType="Button">
      <MultiTrigger.Conditions>
        <BindingCondition Binding="{Binding Source={x:Reference user},
                              Path=Text.Length,
                              Converter={StaticResource dataHasBeenEntered}}"
                          Value="true" />
        <BindingCondition Binding="{Binding Source={x:Reference pwd},
                              Path=Text.Length,
                              Converter={StaticResource dataHasBeenEntered}}"
                          Value="true" />
      </MultiTrigger.Conditions>
      <Setter Property="IsEnabled" Value="True" />
    </MultiTrigger>
  </Button.Triggers>
</Button>

次のスクリーンショットは、上記の 2 つのマルチ トリガーの例の違いを示したものです。These screenshots show the difference between the two multi trigger examples above. 画面の上部では、 [Save] ボタンを有効にするには、1 つの Entry へのテキスト入力だけで十分です。In the top part of the screens, text input in just one Entry is enough to enable the Save button. 画面の下部では、両方のフィールドにデータを入力するまで、 [Login] ボタンはアクティブになりません。In the bottom part of the screens, the Login button remains inactive until both fields contain data.

EnterActions と ExitActionsEnterActions and ExitActions

トリガーが発生したときの変更を実装するもう 1 つの方法は、EnterActions および ExitActions コレクションを追加して、TriggerAction<T> の実装を指定することです。Another way to implement changes when a trigger occurs is by adding EnterActions and ExitActions collections and specifying TriggerAction<T> implementations.

EnterActions コレクションは、トリガー条件が満たされると呼び出される TriggerAction オブジェクトの IList を定義するのに使用されます。The EnterActions collection is used to define an IList of TriggerAction objects that will be invoked when the trigger condition is met. ExitActions コレクションは、トリガー条件が満たされなくなったら呼び出される TriggerAction オブジェクトの IList を定義するのに使用されます。The ExitActions collection is used to define an IList of TriggerAction objects that will be invoked after the trigger condition is no longer met.

トリガーで Setter と共に EnterActions と ExitActions の "両方" を提供できますが、Setter はすぐに呼び出されることに注意してください (EnterAction または ExitAction が完了するのを待機しません)。You can provide both EnterActions and ExitActions as well as Setters in a trigger, but be aware that the Setters are called immediately (they do not wait for the EnterAction or ExitAction to complete). 代わりに、コードですべてを実行し、Setter をまったく使用しないこともできます。Alternatively you can perform everything in the code and not use Setters at all.

<Entry Placeholder="enter job title">
    <Entry.Triggers>
        <Trigger TargetType="Entry"
                 Property="Entry.IsFocused" Value="True">
            <Trigger.EnterActions>
                <local:FadeTriggerAction StartsFrom="0"" />
            </Trigger.EnterActions>

            <Trigger.ExitActions>
                <local:FadeTriggerAction StartsFrom="1" />
            </Trigger.ExitActions>
            <!-- You can use both Enter/Exit and Setter together if required -->
        </Trigger>
    </Entry.Triggers>
</Entry>

例のごとく、XAML でクラスを参照するときは、次のように xmlns:local などの名前空間を宣言する必要があります。As always, when a class is referenced in XAML you should declare a namespace such as xmlns:local as shown here:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:WorkingWithTriggers;assembly=WorkingWithTriggers"

FadeTriggerAction のコードを次に示します。The FadeTriggerAction code is shown below:

public class FadeTriggerAction : TriggerAction<VisualElement>
{
    public int StartsFrom { set; get; }

    protected override void Invoke(VisualElement sender)
    {
        sender.Animate("FadeTriggerAction", new Animation((d) =>
        {
            var val = StartsFrom == 1 ? d : 1 - d;
            // so i was aiming for a different color, but then i liked the pink :)
            sender.BackgroundColor = Color.FromRgb(1, val, 1);
        }),
        length: 1000, // milliseconds
        easing: Easing.Linear);
    }
}

状態トリガーState triggers

状態トリガーは Xamarin.Forms 4.5 で導入されました。これは、VisualState が適用される条件を定義するための特殊なトリガーのグループです。State triggers have been introduced in Xamarin.Forms 4.5, and are a specialized group of triggers that define the conditions under which a VisualState should be applied. ただし、これらは現在試験段階であり、App.xaml.cs ファイルに次のコード行を追加することによってのみ使用できます。However, they are currently experimental and can only be used by adding the following line of code to your App.xaml.cs file:

Device.SetFlags(new string[]{ "StateTriggers_Experimental" });

状態トリガーは、VisualState の StateTriggers コレクションに追加されます。State triggers are added to the StateTriggers collection of a VisualState. このコレクションには、1 つの状態トリガーを含めることも、複数の状態トリガーを含めることもできます。This collection can contain a single state trigger, or multiple state triggers. コレクション内のいずれかの状態トリガーがアクティブになっていると、VisualState が適用されます。A VisualState will be applied when any state triggers in the collection are active.

状態トリガーを使用してビジュアルの状態を制御する場合、Xamarin.Forms では、アクティブにするトリガー (および対応する VisualState) を決定するために、次の優先順位規則が使用されます。When using state triggers to control visual states, Xamarin.Forms uses the following precedence rules to determine which trigger (and corresponding VisualState) will be active:

1. StateTriggerBase から派生したトリガー。Any trigger that derives from StateTriggerBase.
2. MinWindowWidth 条件の適用によってアクティブにされた AdaptiveTrigger。An AdaptiveTrigger activated due to the MinWindowWidth condition being met.
3. MinWindowHeight 条件の適用によってアクティブにされた AdaptiveTrigger。An AdaptiveTrigger activated due to the MinWindowHeight condition being met.

複数のトリガーが同時にアクティブにされた場合 (たとえば、2 つのカスタム トリガー)、マークアップで最初に宣言されたトリガーが優先されます。If multiple triggers are simultaneously active (for example, two custom triggers) then the first trigger declared in the markup takes precedence.

ビジュアルの状態の詳細については、「Xamarin.Forms Visual State Manager」をご覧ください。For more information about visual states, see Xamarin.Forms Visual State Manager.

状態トリガーState trigger

StateTriggerBase クラスから派生する StateTrigger クラスには、バインド可能な IsActive プロパティがあります。The StateTrigger class, which derives from the StateTriggerBase class, has an IsActive bindable property. StateTrigger では、IsActive プロパティの値が変更されたときに VisualState の変更がトリガーされます。A StateTrigger triggers a VisualState change when the IsActive property changes value.

すべての状態トリガーの基底クラスである StateTriggerBase クラスには、IsActive プロパティと IsActiveChanged イベントがあります。The StateTriggerBase class, which is the base class for all state triggers, has an IsActive property and an IsActiveChanged event. このイベントは、VisualState が変更されるたびに発生します。This event fires whenever a VisualState change occurs. さらに、StateTriggerBase クラスには、オーバーライド可能な OnAttached メソッドと OnDetached メソッドがあります。In addition, the StateTriggerBase class has overridable OnAttached and OnDetached methods.

次の XAML の例は、StateTrigger オブジェクトを含む Style を示しています。The following XAML example shows a Style that includes StateTrigger objects:

<Style TargetType="Grid">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup>
                <VisualState x:Name="Checked">
                    <VisualState.StateTriggers>
                        <StateTrigger IsActive="{Binding IsToggled}"
                                      IsActiveChanged="OnCheckedStateIsActiveChanged" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor"
                                Value="Black" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Unchecked">
                    <VisualState.StateTriggers>
                        <StateTrigger IsActive="{Binding IsToggled, Converter={StaticResource inverseBooleanConverter}}"
                                      IsActiveChanged="OnUncheckedStateIsActiveChanged" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor"
                                Value="White" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

この例では、暗黙的な Style によって Grid オブジェクトがターゲットにされています。In this example, the implicit Style targets Grid objects. バインドされたオブジェクトの IsToggled プロパティが true の場合、Grid の背景色は黒に設定されます。When the IsToggled property of the bound object is true, the background color of the Grid is set to black. バインドされたオブジェクトの IsToggled プロパティが false になると、VisualState の変更がトリガーされ、Grid の背景色が白になります。When the IsToggled property of the bound object becomes false, a VisualState change is triggered, and the background color of the Grid becomes white.

さらに、VisualState の変更が発生するたびに、VisualState の IsActiveChanged イベントが発生します。In addition, every time a VisualState change occurs, the IsActiveChanged event for the VisualState is fired. 各 VisualState によって、このイベントに対するイベント ハンドラーが登録されます。Each VisualState registers an event handler for this event:

void OnCheckedStateIsActiveChanged(object sender, EventArgs e)
{
    StateTriggerBase stateTrigger = sender as StateTriggerBase;
    Console.WriteLine($"Checked state active: {stateTrigger.IsActive}");
}

void OnUncheckedStateIsActiveChanged(object sender, EventArgs e)
{
    StateTriggerBase stateTrigger = sender as StateTriggerBase;
    Console.WriteLine($"Unchecked state active: {stateTrigger.IsActive}");
}

この例では、IsActiveChanged イベントに対するハンドラーが起動すると、ハンドラーによって VisualState がアクティブかどうかを示す情報が出力されます。In this example, when a handler for the IsActiveChanged event is fired, the handler outputs whether the VisualState is active or not. たとえば、ビジュアルの状態が Checked から Unchecked に変更されると、次のメッセージがコンソール ウィンドウに出力されます。For example, the following messages are output to the console window when changing from the Checked visual state to the Unchecked visual state:

Checked state active: False
Unchecked state active: True

アダプティブ トリガーAdaptive trigger

AdaptiveTrigger では、ウィンドウが指定した高さまたは幅になると、VisualState の変更がトリガーされます。An AdaptiveTrigger triggers a VisualState change when the window is a specified height or width. このトリガーには、次の 2 つのバインド可能なプロパティがあります。This trigger has two bindable properties:

• MinWindowHeight (double 型)。VisualState が適用されるウィンドウの最小の高さを示します。MinWindowHeight, of type double, which indicates the minimum window height at which the VisualState should be applied.
• MinWindowWidth (double 型)。VisualState が適用されるウィンドウの最小の幅を示します。MinWindowWidth, of type double, which indicates the minimum window width at which the VisualState should be applied.

次の XAML の例は、AdaptiveTrigger オブジェクトを含む Style を示しています。The following XAML example shows a Style that includes AdaptiveTrigger objects:

<Style TargetType="StackLayout">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup>
                <VisualState x:Name="Vertical">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="Orientation"
                                Value="Vertical" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Horizontal">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="800" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="Orientation"
                                Value="Horizontal" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

この例では、暗黙的な Style によって StackLayout オブジェクトがターゲットにされています。In this example, the implicit Style targets StackLayout objects. ウィンドウの幅が、デバイスに依存しない単位で 0 から 800 である場合、Style が適用される StackLayout オブジェクトの向きは垂直方向になります。When the window width is between 0 and 800 device-independent units, StackLayout objects to which the Style is applied will have a vertical orientation. ウィンドウの幅が、デバイスに依存しない単位で 800 以上である場合、VisualState の変更がトリガーされ、StackLayout の向きが水平に変わります。When the window width is >= 800 device-independent units, the VisualState change is triggered, and the StackLayout orientation changes to horizontal:

MinWindowHeight および MinWindowWidth プロパティは、個別に使用することも、相互に組み合わせて使用することもできます。The MinWindowHeight and MinWindowWidth properties can be used independently or in conjunction with each other. 次の XAML では、両方のプロパティを設定する例を示します。The following XAML shows an example of setting both properties:

<AdaptiveTrigger MinWindowWidth="800"
                 MinWindowHeight="1200"/>

この例では、AdaptiveTrigger によって、現在のウィンドウの幅がデバイスに依存しない単位で 800 以上であり、かつ現在のウィンドウの高さがデバイスに依存しない単位で 1200 以上である場合に、対応する VisualState が適用されることが示されています。In this example, the AdaptiveTrigger indicates that the corresponding VisualState will be applied when the current window width is >= 800 device-independent units and the current window height is >= 1200 device-independent units.

状態トリガーの比較Compare state trigger

CompareStateTrigger では、プロパティが特定の値と等しいときに VisualState の変更がトリガーされます。The CompareStateTrigger triggers a VisualState change when a property is equal to a specific value. このトリガーには、次の 2 つのバインド可能なプロパティがあります。This trigger has two bindable properties:

• Property (object 型)。トリガーによって比較されているプロパティを示します。Property, of type object, which indicates the property being compared by the trigger.
• Value (object 型)。VisualState が適用される値を示します。Value, of type object, which indicates the value at which the VisualState should be applied.

次の XAML の例は、CompareStateTrigger オブジェクトを含む Style を示しています。The following XAML example shows a Style that includes CompareStateTrigger objects:

<Style TargetType="Grid">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup>
                <VisualState x:Name="Checked">
                    <VisualState.StateTriggers>
                        <CompareStateTrigger Property="{Binding Source={x:Reference checkBox}, Path=IsChecked}"
                                             Value="True" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor"
                                Value="Black" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Unchecked">
                    <VisualState.StateTriggers>
                        <CompareStateTrigger Property="{Binding Source={x:Reference checkBox}, Path=IsChecked}"
                                             Value="False" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor"
                                Value="White" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>
...
<Grid>
    <Frame BackgroundColor="White"
           CornerRadius="12"
           Margin="24"
           HorizontalOptions="Center"
           VerticalOptions="Center">
        <StackLayout Orientation="Horizontal">
            <CheckBox x:Name="checkBox"
                      VerticalOptions="Center" />
            <Label Text="Check the CheckBox to modify the Grid background color."
                   VerticalOptions="Center" />
        </StackLayout>
    </Frame>
</Grid>

この例では、暗黙的な Style によって Grid オブジェクトがターゲットにされています。In this example, the implicit Style targets Grid objects. CheckBox の IsChecked プロパティが false の場合、Grid の背景色は白に設定されます。When the IsChecked property of the CheckBox is false, the background color of the Grid is set to white. CheckBox.IsChecked プロパティが true になると、VisualState の変更がトリガーされ、Grid の背景色が黒になります。When the CheckBox.IsChecked property becomes true, a VisualState change is triggered, and the background color of the Grid becomes black:

デバイスの状態トリガーDevice state trigger

DeviceStateTrigger では、アプリが実行されているデバイスのプラットフォームに基づいて VisualState の変更がトリガーされます。The DeviceStateTrigger triggers a VisualState change based on the device platform the app is running on. このトリガーには、1 つのバインド可能なプロパティがあります。This trigger has a single bindable property:

• Device (string 型)。VisualState が適用されるデバイスのプラットフォームを示します。Device, of type string, which indicates the device platform on which the VisualState should be applied.

次の XAML の例は、DeviceStateTrigger オブジェクトを含む Style を示しています。The following XAML example shows a Style that includes DeviceStateTrigger objects:

<Style x:Key="DeviceStateTriggerPageStyle"
       TargetType="ContentPage">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup>
                <VisualState x:Name="iOS">
                    <VisualState.StateTriggers>
                        <DeviceStateTrigger Device="iOS" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor"
                                Value="Silver" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Android">
                    <VisualState.StateTriggers>
                        <DeviceStateTrigger Device="Android" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor"
                                Value="#2196F3" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="UWP">
                    <VisualState.StateTriggers>
                        <DeviceStateTrigger Device="UWP" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor"
                                Value="Aquamarine" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

この例では、明示的な Style によって ContentPage オブジェクトがターゲットにされています。In this example, the explicit Style targets ContentPage objects. このスタイルを使用する ContentPage オブジェクトでは、その背景色が、iOS ではシルバーに、Android では淡い青に、UWP ではアクアマリンに設定されます。ContentPage objects that consume the style set their background color to silver on iOS, to pale blue on Android, and to aquamarine on UWP. 次のスクリーンショットは、iOS と Android で生成されるページを示しています。The following screenshots show the resulting pages on iOS and Android:

向きの状態トリガーOrientation state trigger

OrientationStateTrigger では、デバイスの向きが変更されたときに VisualState の変更がトリガーされます。The OrientationStateTrigger triggers a VisualState change when the orientation of the device changes. このトリガーには、1 つのバインド可能なプロパティがあります。This trigger has a single bindable property:

• Orientation (DeviceOrientation 型)。VisualState が適用される向きを示します。Orientation, of type DeviceOrientation, which indicates the orientation to which the VisualState should be applied.

次の XAML の例は、OrientationStateTrigger オブジェクトを含む Style を示しています。The following XAML example shows a Style that includes OrientationStateTrigger objects:

<Style x:Key="OrientationStateTriggerPageStyle"
       TargetType="ContentPage">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup>
                <VisualState x:Name="Portrait">
                    <VisualState.StateTriggers>
                        <OrientationStateTrigger Orientation="Portrait" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor"
                                Value="Silver" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Landscape">
                    <VisualState.StateTriggers>
                        <OrientationStateTrigger Orientation="Landscape" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor"
                                Value="White" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

この例では、明示的な Style によって ContentPage オブジェクトがターゲットにされています。In this example, the explicit Style targets ContentPage objects. このスタイルを使用する ContentPage オブジェクトでは、縦向きのときはその背景色がシルバーに、横向きのときはその背景色が白に設定されます。ContentPage objects that consume the style set their background color to silver when the orientation is portrait, and set their background color to white when the orientation is landscape.

関連リンクRelated links

• トリガーのサンプルTriggers Sample
• Xamarin.Forms Visual State ManagerXamarin.Forms Visual State Manager
• Xamarin.Forms トリガー APIXamarin.Forms Trigger API