uwp
Interfaz de usuario adaptativa

Utilice AdaptiveTrigger para cambiar el diseño de la interfaz de usuario

Las aplicaciones UWP pueden ejecutarse en modo de ventana y en varios dispositivos. Se pueden mostrar en una amplia gama de tamaños de pantalla, desde teléfonos de gama baja hasta la enorme pantalla de hub de superficie. El uso del posicionamiento relativo será suficiente para muchos escenarios, pero a medida que aumenta el tamaño de la ventana, siempre es interesante cambiar completamente el diseño moviendo los controles de la página a diferentes ubicaciones.

En este ejemplo, utilizaremos un diseño vertical en pantallas estrechas y un diseño horizontal en pantalla panorámica. En pantallas anchas enormes, también cambiaremos el tamaño de los artículos.

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

Cuando se cambia el tamaño de la ventana, el sistema comparará el ancho de la ventana actual con el ancho mínimo del AdaptiveTrigger. Si el ancho actual es mayor o igual que el ancho mínimo, el disparador se activará y se mostrará el VisualState correspondiente.

Aquí está la salida para los diferentes estados.

Estrecho

Amplio

Ultra ancho