uwp
Адаптивный пользовательский интерфейс

Используйте AdaptiveTrigger для изменения макета пользовательского интерфейса

Приложения UWP могут работать в оконном режиме и на нескольких устройствах. Они могут отображаться на широком диапазоне размеров экрана от телефонов с низким уровнем громкости до огромного экрана концентратора. Использование относительного позиционирования будет достаточно для большого количества сценариев, но по мере увеличения размера окна всегда интересно полностью изменить макет, перемещая элементы управления страницы в разные местоположения.

В этом примере мы будем использовать вертикальную компоновку на узких экранах и горизонтальную компоновку на широком экране. На огромных широких экранах мы также изменим размеры элементов.

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

Когда окно будет изменено, система сравнит ширину текущего окна с минимальной шириной от AdaptiveTrigger. Если текущая ширина больше или равна минимальной ширине, триггер активируется и отображается соответствующая VisualState.

Вот результат для разных состояний

узкий

Широкий

ультраширокую