uwp
Anpassningsgränssnitt

Använd AdaptiveTrigger för att ändra UI-layout

UWP-applikationerna kan köras i fönsterläge och på flera enheter. De kan visas på ett brett utbud av skärmstorlekar från låg telefoner till den enorma ytan nav skärmen. Att använda relativ positionering räcker för många scenarier men när fönsterstorleken ökar är det alltid intressant att helt ändra layouten genom att flytta kontrollerna på sidan till olika platser.

I det här exemplet kommer vi att använda en vertikal layout på smala skärmar och en horisontell layout på bredbild. På enorma breda skärmar kommer vi också att ändra objektets storlek.

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

När storleken på fönstret ändras, kommer systemet att jämföra det aktuella fönstrets bredd med minsta bredd från AdaptiveTrigger. Om den nuvarande bredden är större eller lika än minsta bredden, aktiveras avtryckaren och motsvarande VisualState visas.

Här är utgången för de olika tillstånden

Smal

Bred

Ultrawide