uwp
Adaptacyjny interfejs użytkownika

Użyj AdaptiveTrigger, aby zmienić układ interfejsu użytkownika

Aplikacje UWP mogą działać w trybie okienkowym i na kilku urządzeniach. Mogą być wyświetlane na szerokiej gamie rozmiarów ekranów, od telefonów z niższej półki po ogromny ekran powierzchniowy. Użycie względnego pozycjonowania będzie wystarczające dla wielu scenariuszy, ale wraz ze wzrostem rozmiaru okna zawsze jest interesujące całkowicie zmienić układ, przenosząc elementy sterujące strony w różne lokalizacje.

W tym przykładzie zastosujemy układ pionowy na wąskich ekranach i układ poziomy na szerokim ekranie. Na ogromnych szerokich ekranach zmienimy również rozmiary przedmiotów.

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

Po zmianie rozmiaru okna system porówna szerokość bieżącego okna z minimalną szerokością z AdaptiveTrigger. Jeśli bieżąca szerokość jest większa lub równa szerokości minimalnej, wyzwalacz zostanie aktywowany i wyświetlone zostanie odpowiednie VisualState.

Oto dane wyjściowe dla różnych stanów

Wąska

Szeroki

Ultrawide