uwp
Interfaccia utente adattiva

Utilizzare AdaptiveTrigger per modificare il layout dell'interfaccia utente

Le applicazioni UWP possono essere eseguite in modalità finestra e su più dispositivi. Possono essere visualizzati su una vasta gamma di dimensioni dello schermo, dai telefoni di fascia bassa all'enorme schermo del mozzo di superficie. L'utilizzo del posizionamento relativo sarà sufficiente per molti scenari ma, con l'aumentare delle dimensioni della finestra, è sempre interessante modificare completamente il layout spostando i controlli della pagina in posizioni diverse.

In questo esempio, utilizzeremo un layout verticale su schermi stretti e un layout orizzontale su schermo ampio. Su enormi schermi ampi, cambieremo anche le dimensioni degli articoli.

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

Quando la finestra viene ridimensionata, il sistema confronta la larghezza della finestra corrente con la larghezza minima da AdaptiveTrigger. Se la larghezza corrente è maggiore o uguale alla larghezza minima, il trigger verrà attivato e verrà visualizzata la VisualState corrispondente.

Ecco l'output per i diversi stati

Stretto

Largo

ultrawide