Xamarin.Forms dual-screen triggers

The Xamarin.Forms.DualScreen namespace includes two state triggers:

• SpanModeStateTrigger triggers a VisualState change when the view mode of the attached layout changes.
• WindowSpanModeStateTrigger triggers a VisualState change when the view mode of the window changes.

For more information about state triggers, see State triggers.

Span mode state trigger

A SpanModeStateTrigger triggers a VisualState change when the span mode of the attached layout changes. This trigger has a single bindable property:

• SpanMode, of type TwoPaneViewMode, which indicates the span mode to which the VisualState should be applied.

Note

The SpanModeStateTrigger derives from the StateTriggerBase class and can therefore attach an event handler to the IsActiveChanged event.

The following XAML example shows a Grid that includes SpanModeStateTrigger objects:

<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>

In this example, visual states are set on a Grid object. The background color of the Grid is green when only one pane is shown, is red when panes are shown side by side, and is purple when panes are shown top-bottom.

Window span mode state trigger

A WindowSpanModeStateTrigger triggers a VisualState change when the span mode of the window changes. This trigger has a single bindable property:

• SpanMode, of type TwoPaneViewMode, which indicates the span mode to which the VisualState should be applied.

Note

The WindowSpanModeStateTrigger derives from the StateTriggerBase class and can therefore attach an event handler to the IsActiveChanged event.

The following XAML example shows a Grid that includes WindowSpanModeStateTrigger objects:

<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>    

In this example, visual states are set on a Grid object. The background color of the Grid is red when only one pane is shown, is green when panes are shown side by side, and is yellow when panes are shown top-bottom.

Related links

• Xamarin.Forms Triggers
• Xamarin.Forms Visual State Manager