uwp
Adaptive UI

Verwenden Sie den AdaptiveTrigger, um das UI-Layout zu ändern

Die UWP-Anwendungen können im Fenstermodus und auf mehreren Geräten ausgeführt werden. Sie können auf einer Vielzahl von Bildschirmgrößen angezeigt werden, angefangen bei Billigtelefonen bis hin zu großen Nabenbildschirmen. Die relative Positionierung ist für viele Szenarien ausreichend. Mit zunehmender Fenstergröße ist es jedoch immer interessant, das Layout vollständig zu ändern, indem die Steuerelemente der Seite an verschiedene Positionen verschoben werden.

In diesem Beispiel verwenden wir ein vertikales Layout für schmale Bildschirme und ein horizontales Layout für Breitbildschirme. Auf großen Breitbildschirmen ändern wir auch die Größen der Artikel.

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

Wenn die Größe des Fensters geändert wird, vergleicht das System die Breite des aktuellen Fensters mit der minimalen Breite des AdaptiveTriggers. Wenn die aktuelle Breite größer oder gleich der minimalen Breite ist, wird der Auslöser aktiviert und der entsprechende VisualState angezeigt.

Hier ist die Ausgabe für die verschiedenen Zustände

Eng

Breit

Extra breit