uwp
Interface adaptative

Utilisez AdaptiveTrigger pour modifier la disposition de l'interface utilisateur

Les applications UWP peuvent s'exécuter en mode fenêtré et sur plusieurs périphériques. Ils peuvent être affichés sur un large éventail de tailles d’écran, des téléphones bas de gamme à l’énorme écran de concentrateur de surface. Utiliser un positionnement relatif sera suffisant pour beaucoup de scénarios, mais à mesure que la taille de la fenêtre augmente, il est toujours intéressant de changer complètement la mise en page en déplaçant les commandes de la page vers différents emplacements.

Dans cet exemple, nous utiliserons une disposition verticale sur des écrans étroits et une disposition horizontale sur grand écran. Sur les grands écrans larges, nous allons également modifier la taille des articles.

<Border x:Name="item2"
        Background="Aquamarine"
        Width="50"
        Height="50">
    <TextBlock Text="Item 2"
               VerticalAlignment="Center"
               HorizontalAlignment="Center" />
</Border>

<Border x:Name="item3"
        Background="LightCoral"
        Width="50"
        Height="50">
    <TextBlock Text="Item 3"
               VerticalAlignment="Center"
               HorizontalAlignment="Center" />
</Border>

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>

        <VisualState x:Name="ultrawide">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="800" />
            </VisualState.StateTriggers>

            <VisualState.Setters>
                <Setter Target="mainPanel.Orientation" Value="Horizontal" />
                <Setter Target="item1.Width" Value="100" />
                <Setter Target="item1.Height" Value="100" />
                <Setter Target="item2.Width" Value="100" />
                <Setter Target="item2.Height" Value="100" />
                <Setter Target="item3.Width" Value="100" />
                <Setter Target="item3.Height" Value="100" />
            </VisualState.Setters>
        </VisualState>

        <VisualState x:Name="wide">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="600" />
            </VisualState.StateTriggers>

            <VisualState.Setters>
                <Setter Target="mainPanel.Orientation" Value="Horizontal" />
            </VisualState.Setters>
        </VisualState>

        <VisualState x:Name="narrow" />
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Lorsque la fenêtre est redimensionnée, le système compare la largeur de la fenêtre actuelle à la largeur minimale de AdaptiveTrigger. Si la largeur actuelle est supérieure ou égale à la largeur minimale, le déclencheur sera activé et le VisualState correspondant sera affiché.

Voici la sortie pour les différents états

Étroit

Large

Ultrawide