uwp
Adaptieve gebruikersinterface

Gebruik de AdaptiveTrigger om de UI-lay-out te wijzigen

De UWP-applicaties kunnen in venstermodus en op verschillende apparaten worden uitgevoerd. Ze kunnen worden weergegeven op een breed scala aan schermformaten, van low-end telefoons tot het enorme hubscherm. Het gebruik van relatieve positionering is voldoende voor veel scenario's, maar naarmate het venster groter wordt, is het altijd interessant om de lay-out volledig te wijzigen door de besturingselementen van de pagina naar verschillende locaties te verplaatsen.

In dit voorbeeld gebruiken we een verticale lay-out op smalle schermen en een horizontale lay-out op breedbeeld. Op enorme brede schermen zullen we ook de afmetingen van de items wijzigen.

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

Wanneer het formaat van het venster wordt gewijzigd, vergelijkt het systeem de breedte van het huidige venster met de minimumbreedte van de AdaptiveTrigger. Als de huidige breedte groter of gelijk is aan de minimale breedte, wordt de trigger geactiveerd en wordt de bijbehorende VisualState weergegeven.

Hier is de uitvoer voor de verschillende statussen

Verfijn

Breed

ultrawide