Адаптивный дизайн

Мир устройств на Windows 10 довольно сильно фрагментирован - здесь и обычные десктопы с широкоформатными мониторами, ноутбуки, нетбуки, и планшеты, и смартфоны, и гигантский Surface Hub, и, кроме того, Xbox, Microsoft Band, устройства, использующие Raspberry Pi, а также очки виртуальной реальности HoloLense. Все эти устройства могут использовать Windows 10, однако при этом все они имеют разное разрешение экрана. В итоге одно и то же приложение может нормально выглядеть на десктопе, но при этом на мобильных устройствах иметь не лучший вид. Но на то и приложения под Windows 10 и являются универсальными (о чем и говорит название платформы - Universal Windows Platform), что позволяют создавать универсальный адаптивный интерфейс, который будет корректно отображаться на самых разных видах форм-факторов.

Событие SizeChanged

Самый простой способ создания адаптивного дизайна заключается в ручной установке нужных параметров для элементов управления в зависимости от ширины экрана. И для этого можно использовать обработчик события SizeChanged. Данное событие первоначально возникает при загрузке приложения, когда оно только раскрывается. Затем оно повторно генерируется при изменении размеров приложения, например, при смене ориентации экрана (с альбомной на портретную или наоборот) или при ручном сжатии/расширении границ окна приложения.

Возьмем простейшую ситуацию - у нас есть набор элементов, при достаточной ширине отображать их в горизонтальный ряд, иначе отображать их в виде вертикального ряда:

<Page
    x:Class="AdaptiveApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AdaptiveApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <Style TargetType="Button" x:Key="horizontalButtonStyle">
            <Setter Property="Width" Value="80" />
            <Setter Property="Background" Value="LightPink" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="Margin" Value="10" />
        </Style>
        <Style TargetType="Button" x:Key="verticalButtonStyle">
            <Setter Property="Width" Value="100" />
            <Setter Property="Background" Value="LightBlue" />
            <Setter Property="VerticalAlignment" Value="Top" />
            <Setter Property="Margin" Value="15" />
        </Style>
    </Page.Resources>
    <StackPanel Name="buttonStack" Orientation="Horizontal" 
			Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Button Name="button1" Content="button 1" Style="{StaticResource horizontalButtonStyle}"/>
        <Button Name="button2" Content="button 2" Style="{StaticResource horizontalButtonStyle}"/>
        <Button Name="button3" Content="button 3" Style="{StaticResource horizontalButtonStyle}"/>
        <Button Name="button4" Content="button 4" Style="{StaticResource horizontalButtonStyle}"/>
    </StackPanel>
</Page>

А в файле кода MainPage.xaml.cs попишем обработку события SizeChanged:

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace AdaptiveApp
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
			Windows.UI.ViewManagement.ApplicationView appView = Windows.UI.ViewManagement.ApplicationView.GetForCurrentView();
            appView.SetPreferredMinSize(new Size(300, 300));
			
            this.SizeChanged += MainPage_SizeChanged;
        }

        private void MainPage_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            if (this.ActualWidth >= 500)
            {
                buttonStack.Orientation = Orientation.Horizontal;
                button1.Style = button2.Style = button3.Style = button4.Style = this.Resources["horizontalButtonStyle"] as Style;
            }
            else
            {
                buttonStack.Orientation = Orientation.Vertical;
                button1.Style = button2.Style = button3.Style = button4.Style = this.Resources["verticalButtonStyle"] as Style;
            }
        }
    }
}

В обработчике события SizeChanged мы получаем ширину страницы с помощью свойства ActualWidth, и если она больше 500 единиц, то изменяем ориентацию StackPanel и стиль кнопок.

И вне зависимости от типа устройства мы увидим изменения внешнего вида элементов при изменении размеров страницы или ориентации экрана: