Представления XAML

В предыдущих темах было рассмотрено два способа адаптации внешнего вида под разные размеры устройств - обработка события SizeChanged и использование Visual State. Однако в некоторых ситуациях эти способы могут не помочь, особенно, если мы работаем с такими элементами, как Pivot или FlipView. И в качестве еще одной альтернативы, которая поможет справится с подобными ситуациями, мы можем использовать специфичные для устройства представления XAML. То есть фактически нам надо создать несколько разных представлений для одной и той же страницы, которые будут использоваться на разных устройствах.

Есть два способа определения таких представлений:

1. Можно создать в проекте отдельные папки для хранения представлений, предназначенных для отдельных устройств. Эти папки должны называться по шаблону DeviceFamily-Тип, где "Тип" - это тип устройства (Desktop, Mobile).

2. Можно просто добавить представления, названия которых должны оканчиваться на DeviceFamily-Тип.xaml, где "Тип" также это тип устройства.

Первый подход является более предпочтительным, так как позволяет организовать представления по отдельным каталогам, в связи с чем с ними проще работать. Поэтому применим данный подход. Создадим новое приложение Universal Windows Platform. И изменим код xaml его главной страницы MainPage.xaml:

<Page
    x:Class="XamlViewsApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlViewsApp"
    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">
            <Setter Property="Width" Value="80" />
            <Setter Property="Background" Value="LightPink" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="Margin" Value="10" />
        </Style>
    </Page.Resources>
    <StackPanel Orientation="Horizontal" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Button Name="button1" Content="button 1" />
        <Button Name="button2" Content="button 2" />
        <Button Name="button3" Content="button 3" />
        <Button Name="button4" Content="button 4" />
    </StackPanel>
</Page>

Главная страница выводит горизонтальный стек розовых кнопок:

Теперь добавим в этот проект новую папку, которую назовем DeviceFamily-Mobile. И далее в нее добавим новую страницу, которую назовем как и главную - MainPage.xaml:

Изменим код этой страницы, чтобы он выводил вертикальный стек светло-синих кнопок:

<Page
    x:Class="XamlViewsApp.DeviceFamily_Mobile.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlViewsApp.DeviceFamily_Mobile"
    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">
            <Setter Property="Width" Value="100" />
            <Setter Property="Background" Value="LightBlue" />
            <Setter Property="VerticalAlignment" Value="Top" />
            <Setter Property="Margin" Value="15" />
        </Style>
    </Page.Resources>
    <StackPanel Orientation="Vertical" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Button Name="button1" Content="button 1" />
        <Button Name="button2" Content="button 2" />
        <Button Name="button3" Content="button 3" />
        <Button Name="button4" Content="button 4" />
    </StackPanel>
</Page>

И теперь если мы запустим приложение на мобильном устройстве, то соответственно сработает MainPage.xaml из папки DeviceFamily-Mobile:

При этом без разницы какую ориентацию мобильного устройства мы используем - портретную или альбомную - в любом случае будет срабатывать представление из папки DeviceFamily-Mobile. Во всех остальных случаях будет работать представление MainPage.xaml из корня проекта.

Если бы мы использовали второй подход к созданию адаптивных представлений, тогда нам надо было добавить в корень проекта преставление с именем MainPage.DeviceFamily-Mobile.xaml.