Partager via

Xamarin.Forms déclencheurs double écran

  • Article

L’espace Xamarin.Forms.DualScreen de noms comprend deux déclencheurs d’état :

  • SpanModeStateTrigger déclenche une VisualState modification lorsque le mode d’affichage de la disposition jointe change.
  • WindowSpanModeStateTrigger déclenche une VisualState modification lorsque le mode d’affichage de la fenêtre change.

Pour plus d’informations sur les déclencheurs d’état, consultez Déclencheurs d’état.

Déclencheur d’état du mode Span

Une SpanModeStateTrigger modification déclenche une VisualState modification lorsque le mode d’étendue de la disposition jointe change. Ce déclencheur a une seule propriété pouvant être liée :

Remarque

SpanModeStateTrigger dérive de la classe StateTriggerBase et peut donc attacher un gestionnaire d’événements à l’événement IsActiveChanged.

L’exemple XAML suivant montre un Grid qui inclut des objets SpanModeStateTrigger :

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

Dans cet exemple, les états visuels sont définis sur un Grid objet. La couleur d’arrière-plan du Grid volet est verte quand un seul volet est affiché, est rouge lorsque les volets sont affichés côte à côte, et est violet lorsque les volets sont affichés en haut en bas.

Déclencheur d’état du mode d’étendue de fenêtre

Une WindowSpanModeStateTrigger modification déclenche une VisualState modification lorsque le mode d’étendue de la fenêtre change. Ce déclencheur a une seule propriété pouvant être liée :

Remarque

WindowSpanModeStateTrigger dérive de la classe StateTriggerBase et peut donc attacher un gestionnaire d’événements à l’événement IsActiveChanged.

L’exemple XAML suivant montre un Grid qui inclut des objets WindowSpanModeStateTrigger :

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

Dans cet exemple, les états visuels sont définis sur un Grid objet. La couleur d’arrière-plan du Grid volet est rouge quand un seul volet est affiché, est vert lorsque les volets sont affichés côte à côte, et est jaune lorsque les volets sont affichés en haut en bas.