Edit

Xamarin.Forms dual-screen triggers

  • Article

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

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:

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:

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.