Xamarin.Forms のデュアル画面のトリガー
Xamarin.Forms.DualScreen
名前空間には、次の 2 つの状態トリガーが含まれています。
SpanModeStateTrigger
は、アタッチされたレイアウトの表示モードが変更されると、VisualState
の変更をトリガーします。WindowSpanModeStateTrigger
は、ウィンドウの表示モードが変更されると、VisualState
の変更をトリガーします。
状態トリガーの詳細については、「状態トリガー」を参照してください。
スパン モードの状態トリガー
SpanModeStateTrigger
は、アタッチされたレイアウトのスパン モードが変更されると、VisualState
の変更をトリガーします。 このトリガーには、1 つのバインド可能なプロパティがあります。
SpanMode
(TwoPaneViewMode
型)。VisualState
が適用されるスパン モードを示します。
Note
SpanModeStateTrigger
は StateTriggerBase
クラスから派生しているため、IsActiveChanged
イベントに対してイベント ハンドラーをアタッチできます。
次の XAML の例は、SpanModeStateTrigger
オブジェクトを含む Grid
を示しています。
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="GridSingle">
<VisualState.StateTriggers>
<dualScreen:SpanModeStateTrigger SpanMode="SinglePane"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Green" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="GridWide">
<VisualState.StateTriggers>
<dualScreen:SpanModeStateTrigger SpanMode="Wide" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Red" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="GridTall">
<VisualState.StateTriggers>
<dualScreen:SpanModeStateTrigger SpanMode="Tall" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Purple" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
...
</Grid>
この例では、ビジュアル状態は Grid
オブジェクトに設定されています。 Grid
の背景色は、1 つのペインのみが表示されている場合は緑、ペインが横に並んで表示される場合は赤、ペインが上下に表示される場合は紫になります。
ウィンドウのスパン モードの状態トリガー
WindowSpanModeStateTrigger
は、ウィンドウのスパン モードが変更されると、VisualState
の変更をトリガーします。 このトリガーには、1 つのバインド可能なプロパティがあります。
SpanMode
(TwoPaneViewMode
型)。VisualState
が適用されるスパン モードを示します。
Note
WindowSpanModeStateTrigger
は StateTriggerBase
クラスから派生しているため、IsActiveChanged
イベントに対してイベント ハンドラーをアタッチできます。
次の XAML の例は、WindowSpanModeStateTrigger
オブジェクトを含む Grid
を示しています。
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="NotSpanned">
<VisualState.StateTriggers>
<dualScreen:WindowSpanModeStateTrigger SpanMode="SinglePane"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Red" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Spanned">
<VisualState.StateTriggers>
<dualScreen:WindowSpanModeStateTrigger SpanMode="Wide" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Green" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Tall">
<VisualState.StateTriggers>
<dualScreen:WindowSpanModeStateTrigger SpanMode="Tall" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Yellow" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
...
</Grid>
この例では、ビジュアル状態は Grid
オブジェクトに設定されています。 Grid
の背景色は、1 つのペインのみが表示されている場合は赤、ペインが横に並んで表示される場合は緑、ペインが上下に表示される場合は黄になります。