Добавление навигации и представлений в универсальное приложение для Windows на C++ (учебник 3 из 4)

Applies to Windows and Windows Phone

В этой части серии учебников по C++ рассказывается о том, как добавлять в приложение страницы и возможность навигации между ними, размещать на страницах элементы управления и содержимое и подстраивать макет страницы под различные ориентации и представления. Мы собираемся использовать средства для проектирования в Visual Studio, но вы также можете создать и изменять пользовательский интерфейс путем непосредственного ввода XAML-кода в редактор кода.

Проектирование пользовательского интерфейса для приложения Магазина включает организацию страниц приложения, навигации между ними, а также разработку структуры содержимого и команд на каждой странице. Чтобы выбрать оптимальный вариант, прочтите раздел Схемы навигации.

Примечание  Две основные схемы — плоский шаблон и иерархический шаблон — можно посмотреть в действии в одном из разделов нашей серии Компоненты приложения от начала до конца.

Перед началом работы...

Шаг 1: добавление страниц и элементов навигации

В этом учебнике мы разберем основы создания пользовательского интерфейса с помощью XAML. Чтобы познакомиться с этими основами, вы создадите в вашем приложении HelloWorld простое средство для просмотра фотографий, позволяющее выбрать фотографию из библиотеки изображений, а также просмотреть ее и информацию о файле.

Прежде всего необходимо добавить новую страницу и способ перемещения на нее с элемента MainPage.

Добавление страницы средства просмотра фотографий

Сначала рассмотрим код из раздела Управление жизненным циклом и состоянием приложения.

Dn263172.wedge(ru-ru,WIN.10).gifДобавление страницы

  1. В окне Solution Explorer (Обозреватель решений) выберите проект HelloWorld и нажмите Project (Проект) > Add New Item (Добавить новый элемент).
  2. В диалоговом окне Add New Item (Добавление нового элемента) в разделе Visual C++ на левой панели выберите Windows Store (Магазин Windows).
  3. На центральной панели выберите Basic Page (Простая страница).
  4. Назовите ее "PhotoPage.xaml".
  5. Нажмите кнопку Добавить. В проект будут добавлены файл кода программной части и XAML-файл.

    Диалоговое окно Add New Item (Добавление нового элемента).

    Диалоговое окно “Add New Item” (Добавление нового элемента) Visual Studio.

Dn263172.wedge(ru-ru,WIN.10).gifИзменение названия приложения

  1. На новой странице удалите узел Page.Resources, который содержит ресурс AppName для данной страницы. Мы будем использовать общее название приложения, определенное в предыдущем учебнике.
  2. Выберите элемент управления TextBlock с именем pageTitle. В окне Properties (Свойства) нажмите кнопку для представления Properties (Свойства). (Кнопка “Свойства”).
  3. В окне Properties (Свойства) в разделе Common (Общие) выберите маркер свойства для свойства Text. Откроется меню свойств.

    Примечание  Маркер свойства — это небольшой квадратный символ справа от значения свойства. В нашем случае маркер свойства Text окрашен в зеленый цвет, указывающий, что он настроен на ресурс.

  4. В меню свойств выберите Edit Resource (Правка ресурса). Откроется диалоговое окно Edit Resource (Правка ресурса).
  5. В диалоговом окне Edit Resource (Правка ресурса) измените значение с "My Application" на "Hello, photo!".Контекстное меню “Edit Resource” (Правка ресурса)
  6. Нажмите кнопку ОК.

    После правки ресурса XAML-код для определения ресурса в App.xaml обновляется:

    
    <x:String x:Key="AppName">Hello, photo!</x:String>
    
    

    (При желании вы можете просто изменить XAML-код непосредственно в редакторе кода.)

  7. Добавьте новую простую страницу в проект для телефона. В элементе TitlePanel удалите TextBlock с именем PageTitle и измените свойство Text на статический ресурс AppName. Узел теперь выглядит следующим образом:

    
            <!-- TitlePanel -->
            <StackPanel Grid.Row="0" Margin="24,17,0,28">
                <TextBlock Text="{StaticResource AppName}" Style="{ThemeResource 
                TitleTextBlockStyle}" Typography.Capitals="SmallCaps"/>
            </StackPanel>
    
    

    Теперь предыдущее изменение ресурса также отражается на поверхности разработки для телефона. Она также называется "Hello Photo!".

Добавление навигации

Платформа пользовательского интерфейса XAML предоставляет встроенную модель навигации, которая использует элементы управления Frames и Pages. Принцип ее работы очень напоминает навигацию в веб-браузере. Элемент управления Frame содержит объекты Pages и имеет журнал навигации, который можно использовать для перехода вперед и назад по посещенным страницам. Вы также можете передавать данные между страницами.

В первых двух учебниках вы познакомились с кодом в файле App.xaml.cpp, создающим элемент Frame и выполняющим переход к странице MainPage при запуске приложения. Здесь мы добавим на страницу MainPage аналогичную команду для перехода к новой странице PhotoPage.

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

Приложения Магазина предоставляют панели приложения, чтобы вы могли сгруппировать команды, которые не надо отображать все время. Пользователь может получить доступ к команде, проведя пальцем от нижнего края экрана (или от верхнего края в приложениях Магазина Windows) или открыв контекстное меню. В приложении Магазина Windows верхняя панель приложения обычно служит для навигации. В приложении Windows Phone 8.1 нет верхней панели приложения, поэтому мы воспользуемся нижней.

Dn263172.wedge(ru-ru,WIN.10).gifДобавление навигационной панели приложения в Windows 8.1 (с помощью окон структуры документа и свойств)

  1. В Solution Explorer (Обозревателе решений) откройте файл MainPage.xaml.
  2. В окне Document Outline (Структура документа) (клавиши CTRL+ALT+T) раскройте элемент "pageRoot", а затем откройте контекстное меню для TopAppBar и выберите Add CommandBar (Добавить командную строку). Элемент AppBar мы используем только для сложных макетов.

    Окно “Document Outline” (Структура документа)
  3. Теперь в окне Document Outline (Структура документа) вы видите узел CommandBar (Командная строка). Разверните узел и откройте контекстное меню для PrimaryCommands, а затем выберите Add AppBarButton (Добавить AppBarButton). Кнопка AppBarButton будет добавлена к CommandBar и выбрана.
  4. В разделе Icon (Значок) в окне Properties (Свойства) (клавиша F4) выберите "Pictures" в раскрывающемся списке Symbol.
  5. В разделе Common (Общие) в окне Properties (Свойства) измените значение Label с "AppBarButton" на "Pictures".
  6. Теперь выберите кнопку Events (События) (Кнопка событий).
  7. Выберите событие Click в верхней части списка событий и назовите его "PhotoPageButton_Click".

    Вот XAML-код, созданный для вас с помощью средств:

    
    <Page.TopAppBar>
        <CommandBar>
            <AppBarButton Label="Pictures" Icon="Pictures" Click="PhotoPageButton_Click"/>
        </CommandBar>
    </Page.TopAppBar>
    
    
  8. Переместите курсор к имени обработчика событий и нажмите клавишу F12, чтобы перейти к определению. Добавьте следующий код в функцию обработчика:

    
    if (this->Frame != nullptr)
    {
        this->Frame->Navigate(TypeName(PhotoPage::typeid));
    }
    
    
  9. Теперь используйте директиву #include по отношению к элементу PhotoPage.xaml.h в верхней части MainPage.xaml.cpp. (Просто начните печатать, и завершение операторов поможет вам закончить.)

  10. Чтобы выполнить сборку и запустить приложение, нажмите клавишу F5. Чтобы открыть панель приложения, проведите по экрану от верхнего или нижнего края либо щелкните приложение правой кнопкой мыши.

Dn263172.wedge(ru-ru,WIN.10).gifДобавление навигационной панели приложения и кнопки в Windows Phone 8.1 (с помощью редактора XAML-кода)

  1. Откройте MainPage.xaml и после закрывающего тега Page.Resources начните вводить "Page.Bot". Завершение операторов предложит BottomAppBar. Нажмите клавишу TAB, чтобы принять этот вариант. Затем между двумя тегами BottomAppBar используйте завершение операторов, чтобы добавить CommandBar, а в CommandBar добавьте AppBarButton. В открывающем теге кнопки используйте завершение операторов, чтобы добавить Icon="Pictures", Label= "Pictures". Начните вводить "Click=", позвольте смарт-тегу создать обработчик событий и примите предлагаемое имя. (К сожалению, определяемое пользователем имя в данный момент не поддерживается.) Нам нужно вызвать обработчик событий PhotoPageButton_Click, поэтому проведите поиск и замену по проекту (клавиши CTRL+SHIFT+H), а затем выполните повторную сборку (клавиши CTRL+SHIFT+B).

    Раскрывающийся список завершения операторов
    
     <Page.BottomAppBar>
            <CommandBar>
                <AppBarButton Icon="Pictures" Label="Pictures" Click="PhotoPageButton_Click"/>
            </CommandBar>
        </Page.BottomAppBar>
    
    
  2. Переместите курсор к имени обработчика событий и нажмите клавишу F12, чтобы перейти к определению. Добавьте следующий код в функцию обработчика:

    
    if (this->Frame != nullptr)
    {
        this->Frame->Navigate(TypeName(PhotoPage::typeid));
    }
    
    
  3. Теперь используйте директиву #include по отношению к элементу PhotoPage.xaml.h в верхней части MainPage.xaml.cpp.

  4. Откройте контекстное меню для проекта Windows Phone 8.1 в окне Solution Explorer (Обозреватель решений) и выберите Set as Startup Project (Назначить запускаемым проектом). Чтобы выполнить сборку и запустить приложение, нажмите клавишу F5. Первая строка панели приложения уже видна. Нажмите эллипсоидную кнопку справа, чтобы полностью развернуть ее.

Навигация между страницами

Шаг 2: добавление к странице элементов управления и содержимого

Перед добавлением содержимого на страницу фотографии рассмотрим ряд важных моментов, касающихся разметки на XAML.

  • Система макетов XAML поддерживает как статические, так и динамические макеты. В общем случае мы рекомендуем использовать динамический макет и предоставить модулю отрисовки XAML автоматически изменять размер и расположение элементов пользовательского интерфейса для различных размеров экрана и ориентаций.

  • Большая часть содержимого приложения организована во вложенные группы в элементах управления Panel. Наиболее стандартными панелями для динамических макетов являются Grid и StackPanel, а для статических макетов — Canvas. Мы используем Grid, чтобы расположить содержимое в строках и столбцах, и StackPanel, чтобы расположить его вертикально или горизонтально. И Grids и StackPanels могут содержать вложенные элементы Grids и StackPanels. Canvas используется, когда необходимо контролировать все аспекты расположения и размеров содержимого.

  • Вы можете указать размер и расположение таких дочерних элементов, как TextBlocks, Image, ListViews и т. д., путем настройки таких свойств, как HorizontalAlignment, VerticalAlignment, Margin, Padding, Width, Height, MinWidth/MaxWidth и MinHeight/MaxHeight.

  • В универсальном приложении для Windows в проектах для Windows 8.1 и для Windows Phone 8.1 есть собственные страницы пользовательского интерфейса, так как элементы управления пользовательского интерфейса, которые хорошо выглядят на больших экранах, не всегда выглядят хорошо на маленьких экранах, и наоборот. И хотя вы, возможно, используете разные элементы управления или макеты в двух своих проектах, общие принципы создания макета применимы ко всем приложениям Магазина. Для простых макетов (как в нашем приложении) XAML-код для двух проектов будет очень похож.

Добавление сетки макета (Windows 8.1)

Сначала добавим сетку макета. Она будет состоять из 3 строк. Первые две строки имеют фиксированную высоту, а последняя строка заполняет оставшееся доступное пространство. Мы воспользуемся средствами конструктора XAML, но вы можете создать такой же XAML-код непосредственно в редакторе.

Dn263172.wedge(ru-ru,WIN.10).gifДобавление панели сетки в файл PhotoPage.xaml

    1. Откройте PhotoPage.xaml.
    2. Перетащите Grid из Toolbox (Панель элементов) и поместите на поверхность конструктора в середину страницы.

      На страницу добавляется Grid, и конструктор устанавливает определенные свойства, основываясь на своем предположении о требуемом макете. Вокруг Grid появится синее выделение, указывающее на то, что этот объект теперь стал активным.

    3. Выбрав новую сетку, нажмите клавишу F4, чтобы вывести окно Properties (Свойства), и в текстовом поле Name (Имя) введите "contentRoot" в качестве имени Grid.

      Текстовое поле свойства “Name” (Имя)

  1. Выберите маркер свойства для каждого из следующих свойств Grid и нажмите Reset (Сброс): Width, Height, HorizontalAlignment, VerticalAlignment и Margin.
  2. Для приложения Windows в разделе Макет задайте для левого поля Margin и нижнего поля Margin значение "120". Для приложения Windows Phone 8.1 задайте для каждого поля значение 20.

    Свойство поля

  3. В конструкторе пунктирные линии, именуемые границами сетки, появляются вдоль верхней и левой сторон элемента Grid. Чтобы добавить строку, наведите указатель мыши на границу сетки с левой стороны. Указатель изменится на стрелку со знаком "плюс" (+), и оранжевая линия покажет, где будет добавлена строка.

    Добавление строки сетки

  4. Щелкните в любом месте на левой границе сетки для добавления строки.
  5. Повторите предыдущий шаг для добавления еще одной строки к Grid.

    В Grid теперь имеются 3 строки. При наведении указателя на границу сетки появится небольшой всплывающий элемент, который можно использовать для выбора параметров изменения размера и корректировки свойства Height строки.

  6. Наведите указатель на границу сетки в первой строке и подождите появления всплывающего элемента.
  7. Нажмите кнопку со стрелкой, указывающей вниз, а затем выберите Pixel (Пиксель).

    Всплывающий элемент строки сетки

  8. Снова наведите указатель на границу сетки и выберите числовое значение во всплывающем элементе.
  9. Введите "50" и нажмите ВВОД, чтобы установить свойство Height на 50 пикселей.

    Высота строки сетки, в пикселях

  10. Повторяйте процесс с 9-го по 12-й шаг, чтобы установить для параметра Height второй строки значение 70 пикселей.

    Для последней строки устанавливается значение по умолчанию "1*" (1 звездочка). Это означает, что она использует все остающееся пространство.

Теперь посмотрим в XML-коде полученные параметры сетки:


<Grid x:Name="contentRoot" Grid.Row="1" Margin="120,0,0,120">
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition Height="70"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
</Grid>

Обратите внимание, как строки определяются в сетке, а затем обратите внимание на этот параметр в открывающем теге Grid: Grid.Row="1". Этот атрибут сетки является ссылкой на родительскую сетку. Помните, что добавленная сетка является вложенной в корневую сетку для страницы. Атрибут Grid.Row указывает, в какой строке родительской сетки располагается элемент управления. Нумерация строк и столбцов начинается с нуля, поэтому "1" — это по сути вторая строка родительской сетки. Посмотрите на XAML-код и обратите внимание, что первая строка, Row 0, занята сеткой, в которой содержится название страницы и кнопка перехода назад.

Конструктор задает строку сетки в зависимости от места, где размещен добавляемый элемент XAML. Его также можно изменить вручную.

Добавление элементов управления на страницу фотографий (Windows 8.1)

Теперь к Grid можно добавить элементы управления. Добавляйте Button, чтобы получать изображения из библиотеки изображений, элемент управления Image, чтобы показывать изображения, и несколько элементов управления TextBlock, чтобы показывать информацию о файле изображения. Используйте StackPanels в последней строке сетки для размещения элементов управления Image и TextBlock.

Dn263172.wedge(ru-ru,WIN.10).gifДобавление элементов управления на страницу

  1. Dn263172.wedge(ru-ru,WIN.10).gifДобавление кнопки "Get photo" (Получить фотографию)

    1. В окне Document Outline (Структура документа) (клавиши CTRL+ALT+T) выберите панель "contentRoot".
    2. Перетащите элемент управления Button из Toolbox (Панель элементов) в первую строку сетки.
    3. В окне Properties (Свойства) выберите маркер свойства для HorizontalAlignment и сбросьте его свойства, затем сделайте то же самое для свойств VerticalAlignment и Margin.
    4. Задайте для свойства кнопки Content (в категории Common (Общие)) значение "Get photo".
  2. Dn263172.wedge(ru-ru,WIN.10).gifДобавление имени изображения TextBlock

    1. Выделив элемент "contentRoot" в окне Структура документа, перетащите элемент управления TextBlock из области Панель элементов во вторую строку сетки.
    2. В окне Properties (Свойства) сбросьте свойства элемента TextBlock: HorizontalAlignment, VerticalAlignment и Margin.
    3. Разверните группу Miscellaneous (Прочее) и найдите свойство Style (Стиль).
    4. В меню свойства Style (Стиль) выберите System Resource (Ресурс системы) > PageSubheaderTextStyle.

      Меню “System Resource” (Системный ресурс)

  3. Dn263172.wedge(ru-ru,WIN.10).gifДобавление элемента управления "Изображение" и границы

    1. Выделив элемент "contentRoot" в окне Структура документа, перетащите элемент StackPanel из области Панель элементов в последнюю строку сетки.
    2. В окне Properties (Свойства) сбросьте эти свойства StackPanel: Width, Height, HorizontalAlignment, VerticalAlignment и Margin.
    3. Установите для свойства Orientation элемента StackPanel значение Horizontal.
    4. В текстовом поле Name для StackPanel введите "imagePanel" и нажмите клавишу ВВОД.
    5. Если выбрана панель StackPanel, перетащите элемент управления Border из Toolbox (Панель элементов) в StackPanel.
    6. В разделе Brush (Кисть) в окне Properties (Свойства) выберите Background.
    7. Выберите кисть сплошного цвета и установите значение цвета на "#FF808080".
    8. Повторите предыдущие два шага для свойства BorderBrush.

      Редактор кисти Visual Studio

    9. Перетащите элемент управления Image из Toolbox (Панель элементов) в Border.
    10. В текстовом поле Name для Image введите "displayImage" и нажмите клавишу ВВОД.
    11. В группе свойств Common (Общие) в раскрывающемся списке в поле свойств Source выберите файл "Logo.png".
    12. В окне Document Outline (Структура документа) выберите элемент Border, содержащий Image, а затем в группе Layout (Макет) в окне Properties (Свойства) сбросьте свойство Width.
  4. Dn263172.wedge(ru-ru,WIN.10).gifДобавление информации об изображении

    1. Перетащите элемент управления TextBlock из Toolbox (Панель элементов) в "imagePanel" StackPanel, справа от элемента управления Image.

      Здесь не нужно сбрасывать свойства макета, так как StackPanel и Grid по-разному обрабатывают изменение размера своих дочерних элементов. Подробнее: Краткое руководство: добавление элементов управления макета.

    2. Щелкните StackPanel, чтобы больше не был выбран TextBlock, и перетащите другой TextBlock в StackPanel. Повторите эти действия еще два раза.

      Теперь у нас есть четыре элемента управления TextBlock, выстроенных горизонтально справа от элемента управления Image.

    3. Выберите первый элемент TextBlock и установите для его свойства Text значение "File name:" (Имя файла:).
    4. Выберите третий элемент TextBlock и установите для его свойства Text значение "Path:" (Путь:).

На изображении ниже показано, как теперь выглядит пользовательский интерфейс средства для просмотра фотографий в приложении Windows 8.1. Он похож на интерфейс приложения Windows Phone 8.1, если повернуть поверхность разработки в альбомную ориентацию. Позднее мы добавим разметку XAML, которая обеспечит правильную настройку макета для книжной ориентации. Макет почти завершен, но вам еще нужно скорректировать внешний вид элемента TextBlocks, показывающего информацию об изображении.

Приложение в конструкторе XAML

Чтобы исправить макет и форматирование добавленного вами компонента TextBlocks, сгруппируйте элементы управления в вертикальном элементе StackPanel.

Dn263172.wedge(ru-ru,WIN.10).gifГруппирование элементов в элементе StackPanel

  1. В окне Document Outline (Структура документа) выберите первый TextBlock в "imagePanel" StackPanel.
  2. Нажмите клавишу SHIFT, затем щелкните последний TextBlock в этой группе. Теперь выбрано четыре элемента управления TextBlock.
  3. Откройте контекстное меню для группы выбранных элементов TextBlock и выберите Group Into (Сгруппировать в) > StackPanel.

    На страницу добавляется StackPanel с 4 элементами управления TextBlock.

  4. В разделе Layout (Макет) в окне Properties (Свойства) установите для свойства Orientation элемента StackPanel значение Vertical.
  5. Установите левое StackPanel Margin на "20".

Наконец, следует отформатировать текст информации об изображении. Для текста используются встроенные стили и устанавливаются поля для создания свободного пространства между элементами.

Dn263172.wedge(ru-ru,WIN.10).gifСтилизация текста

  1. В окне Document Outline (Структура документа) выберите первый TextBlock в "imagePanel" StackPanel.
  2. Нажмите клавишу CTRL, затем щелкните третий TextBlock в этой группе. Теперь выбрано два элемента управления TextBlock.
  3. В разделе Miscellaneous (Разное) в окне Properties (Свойства) в меню для свойства Style выберите System Resource (Системный ресурс) > CaptionTextBlockStyle.
  4. Выберите второй и четвертый элементы управления TextBlock в группе.
  5. Установите для них свойство Style на System Resource (Ресурс системы) > BodyTextBlockStyle. Установите левое значение свойства Margin на 10, а нижнее значение на 30.

Теперь полный XAML-код для добавленной сетки выглядит так:


 <Grid x:Name="contentRoot" Grid.Row="1" Margin="120,0,0,120">
            <Grid.RowDefinitions>
                <RowDefinition Height="50"/>
                <RowDefinition Height="70"/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Button Content="Get photo"  FontFamily="Global User Interface"/>
            <StackPanel x:Name="imagePanel" Grid.Row="2" Orientation="Horizontal">
                <Border BorderBrush="Gray" BorderThickness="1" Background="Gray">
                    <Image x:Name="displayImage" Source="Assets/Logo.png" Margin="0,-9,0,9" d:IsLocked="True"/>
                </Border>
                <StackPanel Margin="20,0,0,0">
                    <TextBlock TextWrapping="Wrap" Text="FileName:" Style="{StaticResource CaptionTextBlockStyle}"/>
                    <TextBlock x:Name="tbName" TextWrapping="Wrap" Text="TextBlock" Style="{StaticResource BodyTextBlockStyle}"/>
                    <TextBlock TextWrapping="Wrap" Text="Path:" Style="{StaticResource CaptionTextBlockStyle}"/>
                    <TextBlock x:Name="tbPath" TextWrapping="Wrap" Text="TextBlock" Style="{StaticResource BodyTextBlockStyle}"/>
                </StackPanel>
            </StackPanel>
            <TextBlock Grid.Row="1" TextWrapping="Wrap" Text="TextBlock"/>
        </Grid>

Чтобы выполнить сборку и запустить приложение, нажмите клавишу F5. Перейдите к странице фотографии. Теперь она выглядит следующим образом:

Приложение в конструкторе XAML

Добавление сетки макета и элементов управления (Windows Phone 8.1)

Сетка макета для проекта Windows Phone в основном та же, но с несколькими существенными отличиями. При желании вы можете выполнить действия для проекта Windows 8.1, а затем внести описанные далее изменения.

Либо вы можете заменить этим XAML-кодом сетку содержимого, уже предоставленную в PhotoPage.xaml в проекте для Windows Phone:


       <Grid x:Name="contentRoot" Grid.Row="1" Margin="20,0,10,10">
            <Grid.RowDefinitions>
                <RowDefinition Height="50"/>
                <RowDefinition Height="50"/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Button Content="Get photo"/>
            <TextBlock Grid.Row="1" TextWrapping="Wrap" Text="TextBlock"/>
            <StackPanel x:Name="imagePanel" Grid.Row="2" Orientation="Vertical">
                <Border BorderBrush="Gray" BorderThickness="7" Background="Gray">
                    <Image x:Name="displayImage" Source="Assets/Logo.png"/>
                </Border>
                <StackPanel Margin="10,0,0,0">
                    <TextBlock TextWrapping="Wrap" Text="File name:" 
               Style="{ThemeResource BodyTextBlockStyle}"/>
                    <TextBlock TextWrapping="Wrap" Text="TextBlock" 
                Margin="10,0,0,0" Style="{StaticResource BodyTextBlockStyle}"/>
                    <TextBlock TextWrapping="Wrap" Text="Path:" 
               Style="{ThemeResource BodyTextBlockStyle}"/>
                    <TextBlock TextWrapping="Wrap" Text="TextBlock" 
               Style="{StaticResource BodyTextBlockStyle}" Margin="10,0,0,0"/>
                </StackPanel>
            </StackPanel>
        </Grid>

Обратите внимание на отличия между XAML-кодом для Windows и для Windows Phone:

  • Высота строки Row 1 в пользовательском интерфейсе Windows Phone сокращена до 50 пикселей.
  • В пользовательском интерфейсе Windows Phone поля меньше.
  • В пользовательском интерфейсе Windows Phone нет предопределенного CaptionTextBlockStyle, поэтому используется только BodyTextBlockStyle. (При желании вы можете создать стиль заголовка.)

Шаг 3: адаптация структуры страницы под различные ориентации и представления

На данный момент мы создали приложение для Windows, просматриваемое в полноэкранном режиме в альбомной ориентации, и приложение для Windows Phone, просматриваемое в книжной ориентации. Однако пользовательский интерфейс обеих платформ должен адаптироваться к разным ориентациям. Кроме того, пользовательский интерфейс Windows должен адаптироваться к изменению размера пользователем.

Используйте различные представления в Visual Studio

Чтобы узнать, как приложение выглядит в разных представлениях, можно использовать окно Device (Устройство) в Visual Studio. Окно Device (Устройство) доступно только при активной странице XAML. В окне Device (Устройство) можно имитировать разные представления и экраны, а также отображать параметры для вашего приложения. В этом учебнике вы узнаете, как использовать параметры Orientation (Ориентация). Чтобы проверить, как выглядит приложение при разных разрешениях экрана, применяются параметры Display (Разрешение экрана). Качественно разработанный гибкий макет способен подстраиваться, чтобы хорошо смотреться на разных экранах.

Окно “Device” (Устройство)

Опробуем книжную ориентацию в проекте Windows, чтобы посмотреть, как будет выглядеть приложение.

Dn263172.wedge(ru-ru,WIN.10).gifИспользование различных представлений в Visual Studio

  1. В окне Device (Устройство) нажмите кнопку Portrait (Книжная) (Кнопка книжного представления). Конструктор изменится для имитации представления в книжной ориентации.

    Вот так приложение выглядит при книжной ориентации. Слишком зауженный вид. Необходимо изменить ширину пользовательского интерфейса приложения.

    Имитация книжного представления

  2. Чтобы вернуться к представлению по умолчанию, нажмите кнопку Landscape (Альбомная).
  3. Теперь переключитесь на проект для Windows Phone и переключите конструктор на альбомную ориентацию:

    Имитация альбомного представления

Настройка книжной ориентации в Windows 8.1

Теперь исправим книжное представление в проекте для Windows.

При изменении StackPanel с Horizontal на VerticalBorder и Image меняют размер автоматически. Это пример гибкого макета. StackPanel позволяет своим дочерним элементам растягиваться в направлении ориентации устройства, ограничивая их в противоположном направлении. Вместо задания фиксированного размера изображения мы позволяем панели макета расставлять свои дочерние элементы и изменять их размер.

Dn263172.wedge(ru-ru,WIN.10).gifВыполнение корректировки книжного представления

  1. В PhotoPage.xaml добавьте этот блок XAML-кода после элемента contentRoot Grid:
    
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup>
                    <VisualState x:Name="Landscape">
                        <Storyboard>
                        </Storyboard>
                    </VisualState>
    
                    <VisualState x:Name="Portrait">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames 
                                Storyboard.TargetProperty="(StackPanel.Orientation)" 
                                Storyboard.TargetName="imagePanel">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Orientation>Vertical</Orientation>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames 
                                Storyboard.TargetProperty="(FrameworkElement.Margin)" 
                                Storyboard.TargetName="imagePanel">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Thickness>0,0,20,0</Thickness>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
    
    
  2. В открывающем корневом теге страницы начните вводить "SizeChanged" и позвольте Visual Studio создать обработчик событий. Примите имя по умолчанию, нажмите клавишу F12, чтобы перейти к реализации, и добавьте этот код:
    
    
    if (e->NewSize.Height / e->NewSize.Width >= 1)
    {
        VisualStateManager::GoToState(this, "Portrait", true);
    }
    else
    {
        VisualStateManager::GoToState(this, "Landscape", true);
    }
    
    
  3. Повторите два предыдущих шага для проекта Windows Phone 8.1.

Вы можете протестировать различные ориентации, различные представления и различное разрешение экрана для приложения Windows с помощью имитатора в Visual Studio. Чтобы запустить приложение в имитаторе, сначала убедитесь, что в качестве запускаемого проекта выбран проект Windows. Выберите Simulator (Имитатор) из раскрывающегося списка рядом с кнопкой Start Debugging (Начать отладку) на стандартной панели инструментов. Подробнее о тестировании приложения в имитаторе см. в разделе Выполнение приложений для Магазина Windows в Visual Studio.

Вот как теперь выглядит приложение при запуске на имитаторе в книжной ориентации:

Имитация книжного представления

Теперь в качестве запускаемого проекта выберите проект для Windows Phone и нажмите клавишу F5, чтобы протестировать его тем же образом:

Сводка

Поздравляем! Вы закончили третий учебник и научились добавлять в приложение новые страницы и использовать средства в Visual Studio для создания пользовательского интерфейса.

См. код

Вы зашли в тупик или хотите проверить выполненную работу? Тогда смотрите полный код в примере Hello World (C++) в коллекции примеров кода.

Следующие действия

В следующей части этой серии учебников вы узнаете о том, как получить доступ к файлам и работать с ними. См. раздел Доступ к файлам и средства выбора файлов (C++).

Связанные разделы

Для разработчиков
Схемы навигации
Шаблоны команд
Макет
Главный раздел
Нижняя панель приложения
Верхняя панель приложения
Кнопка перехода назад
Руководство по элементу управления Hub
Руководство по панелям приложения (приложения Магазина Windows)
Создание специальной панели приложения
Для разработчиков (XAML)
Добавление панелей приложения (XAML)
Навигация между страницами (XAML)
Пример XAML Hub control
Пример XAML AppBar control
Пример XAML Navigation
Windows.UI.Xaml.Controls Hub class
Windows.UI.Xaml.Controls AppBar class
Windows.UI.Xaml.Controls CommandBar class

 

 

Показ:
© 2014 Microsoft