Перенос XAML среды выполнения Windows 8.x и пользовательского интерфейса в UWP
Предыдущий раздел называется Устранение неполадок.
Практика определения пользовательского интерфейса в форме декларативной разметки XAML очень хорошо подходит не только для универсальных приложений для версии 8.1, но и для приложений универсальной платформы Windows (UWP). Вы увидите, что большая часть вашей разметки совместима, хотя может потребоваться внести некоторые изменения в ключи системных ресурсов или используемые настраиваемые шаблоны. Для императивного кода доработка не потребуется или она будет минимальной. Перенести большую часть кода в вашем уровне представления, которая управляет элементами пользовательского интерфейса, также будет крайне просто.
Императивный код
Если вы просто хотите дойти до этапа, на котором выполняется сборка вашего проекта, можно закомментировать или снабдить заглушками фрагменты ненужного кода. Затем последовательно устраняйте неполадку за неполадкой и см. следующие темы в данном разделе (включая предыдущий раздел Устранение неполадок), пока любые проблемы сборки и выполнения не будут решены и перенос не будет завершен.
Адаптивный пользовательский интерфейс с быстрым откликом
Так как приложение потенциально может работать на множестве различных устройств, каждое из которых имеет свой размер и разрешение экрана, вам необходимо будет выйти за пределы минимальных действий для переноса приложения. При этом вы, конечно же, захотите адаптировать свой пользовательский интерфейс для придания ему наилучшего вида на этих устройствах. Вы можете использовать адаптивную функцию "Диспетчер визуальных состояний", чтобы динамически определять размер окна и изменять макет. Пример того, как это сделать, представлен в разделе Адаптивный пользовательский интерфейс в примере Bookstore2.
Работа с кнопкой "Назад"
Для универсальных приложений версии 8.1 приложения среда выполнения Windows 8.x и приложения Windows Phone Store имеют разные подходы к отображаемого пользовательского интерфейса и событиям, обрабатываемых для кнопки "Назад". Но для приложений для Windows 10 можно использовать единый подход в приложении. На мобильных устройствах эта кнопка выполняет роль емкостной кнопки на устройстве или кнопки в оболочке. На настольном устройстве вы добавляете кнопку в хром приложения всякий раз, когда в приложении возможна обратная навигация, и она отображается в заголовке окна для оконных приложений или на панели задач в режиме планшета (только Windows 10). Событие кнопки "Назад" — это универсальная концепция во всех семействах устройств, и кнопки, реализованные в аппаратном или программном обеспечении, создают одно и то же событие BackRequested.
Приведенный ниже пример работает для всех семейств устройств и хорошо подходит в случаях, когда ко всем страницам применяется один и тот же метод обработки и подтверждать переходы (например, для предупреждения о несохраненных изменениях) не нужно.
// app.xaml.cs
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
[...]
Windows.UI.Core.SystemNavigationManager.GetForCurrentView().BackRequested += App_BackRequested;
rootFrame.Navigated += RootFrame_Navigated;
}
private void RootFrame_Navigated(object sender, NavigationEventArgs e)
{
Frame rootFrame = Window.Current.Content as Frame;
// Note: On device families that have no title bar, setting AppViewBackButtonVisibility can safely execute
// but it will have no effect. Such device families provide back button UI for you.
if (rootFrame.CanGoBack)
{
Windows.UI.Core.SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility =
Windows.UI.Core.AppViewBackButtonVisibility.Visible;
}
else
{
Windows.UI.Core.SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility =
Windows.UI.Core.AppViewBackButtonVisibility.Collapsed;
}
}
private void App_BackRequested(object sender, Windows.UI.Core.BackRequestedEventArgs e)
{
Frame rootFrame = Window.Current.Content as Frame;
if (rootFrame.CanGoBack)
{
rootFrame.GoBack();
}
}
Существует также единый подход для всех семейств устройств для программного выхода из приложения.
Windows.UI.Xaml.Application.Current.Exit();
Чудо-кнопки
Вам не нужно изменять код, интегрируемый с чудо-кнопками, но необходимо добавить в приложение некоторые элементы пользовательского интерфейса, которые заменят на данный момент отсутствующие в оболочке Windows 10 чудо-кнопки. Универсальное приложение версии 8.1, работающее в Windows 10, применяет собственный пользовательский интерфейс, предоставляемый системой, в заголовке окна приложения.
Элементы управления, стили и шаблоны элементов управления
Универсальное приложение версии 8.1, работающее в Windows 10, сохраняет внешний вид и принципы работы элементов управления версии 8.1. Однако в случае переноса такого приложения в приложение Windows 10 некоторые отличия внешнего вида и принципов работы всё же будут присутствовать. Они описаны далее. Архитектура и дизайн элементов управления практически не изменяются для Windows 10 приложений, поэтому изменения в основном связаны с языком проектирования, упрощением и удобством использования.
Примечание Визуальное состояние PointerOver относится к пользовательским стилям и шаблонам в приложениях Windows 10 и в приложениях среда выполнения Windows версии 8.x, но не в приложениях магазина Windows Phone. По этой причине (а также из-за ключей системных ресурсов, поддерживаемых для приложений Windows 10), рекомендуется повторно использовать настраиваемые стили и шаблоны из приложений среда выполнения Windows 8.x при переносе приложения в Windows 10. Если вы хотите быть уверены, что ваши пользовательские стили или шаблоны используют последний набор визуальных состояний, и в них максимально применяются улучшения производительности, внесенные в стили или шаблоны по умолчанию, тогда отредактируйте копию нового шаблона Windows 10 по умолчанию и повторно примените свои настройки к ней. Одним из примеров улучшения производительности является то, что были удалены все элементы Border, ранее содержащие в себе ContentPresenter или панель, и теперь дочерний элемент отображает границу.
Далее приводится несколько более конкретных примеров изменений элементов управления.
| Имя элемента управления | Изменение |
|---|---|
| AppBar | Если вы используете элемент управления AppBar (вместо него рекомендуется CommandBar), тогда он не является скрытым по умолчанию в приложении для Windows 10. Это можно контролировать с помощью свойства AppBar.ClosedDisplayMode. |
| AppBar, CommandBar | В приложении для Windows 10 AppBar и CommandBar имеют кнопку Подробнее (многоточие). |
| CommandBar | В приложении среда выполнения Windows версии 8.x вторичные команды CommandBar всегда видны. В приложении Магазина Windows Phone и в приложении для Windows 10 они не отображаются до открытия панели команд. |
| CommandBar | Для приложения Магазина Windows Phone значение CommandBar.IsSticky не влияет на функцию исчезновения панели. Для приложения Windows 10, если для параметра IsSticky установлено значение "true", CommandBar не будет реагировать на жест исчезновения. |
| CommandBar | В приложении для Windows 10 элемент CommandBar не обрабатывает EdgeGesture.Completed и события UIElement.RightTapped. Он также не реагирует на касание и проведение пальцем вверх. Вы по-прежнему можете обрабатывать эти события и настроить IsOpen. |
| DatePicker, TimePicker | Посмотрите, как будет выглядеть ваше приложение с визуальными изменениями DatePicker и TimePicker. Для приложения Windows 10, запущенного на мобильном устройстве, эти элементы управления более не служат для перехода на страницу выбора, вместо этого используется всплывающее окно исчезновения. |
| DatePicker, TimePicker | В приложении Windows 10 нельзя поместить DatePicker или TimePicker во всплывающее окно. Если вы хотите, чтобы эти элементы управления отображались во всплывающем элементе управления, можно использовать DatePickerFlyout и TimePickerFlyout. |
| GridView, ListView | Сведения о GridView/ListView см. в разделе Изменения GridView и ListView. |
| Концентратор | В приложении Магазина Windows Phone элемент управления Hub создает оболочку от последнего раздела к первому. В приложении среда выполнения Windows версии 8.x и в приложении Windows 10 центральные разделы не обтекают. |
| Концентратор | В приложении Магазина Windows Phone фоновое изображение элемента управления Hub перемещается в параллаксе относительно главных разделов. В приложении среда выполнения Windows версии 8.x и в приложении Windows 10 параллакс не используется. |
| Концентратор | В универсальном приложении версии 8.1 из-за свойства HubSection.IsHeaderInteractive заголовок раздела и глиф шеврона, отображаемый рядом с ним, становятся интерактивными. В приложении для Windows 10 кроме заголовка существует интерактивная возможность "Подробнее", но сам заголовок не является интерактивным. IsHeaderInteractive по-прежнему определяет, вызывает ли взаимодействие событие Hub.SectionHeaderClick. |
| MessageDialog | Рекомендуется вместо MessageDialog использовать более гибкий ContentDialog. См. также пример Основы создания пользовательского интерфейса XAML. |
| ListPickerFlyout, PickerFlyout | ListPickerFlyout и PickerFlyout не рекомендуются для приложений для Windows 10. Для простого всплывающего элемента используйте MenuFlyout. Для более сложных элементов используйте Flyout. |
| PasswordBox | Свойство PasswordBox.IsPasswordRevealButtonEnabled устарело для приложения для Windows 10. Его настройка не будет иметь никакого эффекта. Вместо этого используйте PasswordBox.PasswordRevealMode, который по умолчанию имеет значение Показать (в котором отображается глиф для глаз, как в приложении среда выполнения Windows 8.x). См. также раздел Руководство по полям паролей. |
| Сводка | Элемент управления Pivot теперь универсален, его использование больше не ограничивается мобильными устройствами. |
| SearchBox | Хотя SearchBox реализуется во всех семействах устройств, он не полностью использует свои функции в мобильных устройствах. См. раздел SearchBox заменен на AutoSuggestBox. |
| SemanticZoom | Сведения о SemanticZoom см. в разделе Изменения SemanticZoom. |
| ScrollViewer | Некоторые свойства ScrollViewer по умолчанию изменились. HorizontalScrollMode равно Auto, VerticalScrollMode — Auto и ZoomMode — Отключено. Если новые значения по умолчанию не подходят для вашего приложения, вы можете изменить их в стиле и как локальные значения в самом элементе управления. |
| Textbox | В приложении среда выполнения Windows 8.x проверка орфографии отключена по умолчанию для TextBox. В приложении Магазина Windows Phone и приложении для Windows 10 она включена по умолчанию. |
| Textbox | Размер шрифта по умолчанию для TextBox изменен с 11 на 15. |
| Textbox | Значение по умолчанию TextBox.TextReadingOrder изменилось с Default на DetectFromContent. Если это нежелательно, используйте UseFlowDirection. Использовать значение Default не рекомендуется. |
| Различные | Контрастный цвет применяется к приложениям магазина Windows Phone и Windows 10 приложениям, но не к приложениям среда выполнения Windows версии 8.x. |
Дополнительные сведения об элементах управления приложения UWP см. в разделах Распределение элементов управления по функциямСписок элементов управления и Руководство по элементам управления.
Язык дизайна в Windows 10
Некоторые незначительные, но важные отличия в языке дизайна между универсальными приложениями версии 8.1 и приложениями Windows 10. Все сведения см. в разделе Дизайн. Несмотря на изменения языка дизайна, принципы дизайна остаются прежними: будьте внимательны к деталям, при этом всегда стремитесь к простоте и фокусируйте внимание на содержимом, а не внешнем оформлении, уменьшая количество визуальных элементов и сохраняя характерные особенности цифрового домена, используйте визуальную иерархию (особенно для шрифтового оформления), проектируйте, используя сетку, оживляйте интерфейс с помощью плавных анимаций.
Эффективные пиксели, расстояние от экрана и коэффициенты масштабирования
Раньше пиксели представления были способом отделить размер и макет элементов пользовательского интерфейса от фактического физического размера и разрешения устройств. Теперь же пиксели представления стали эффективными пикселями. Далее приведено объяснение этого термина.
Термин «разрешение» относится к измерению плотности пикселей, а не, как обычно считается, количества пикселей. «Эффективное разрешение» — это способ, которым физические пиксели, образующие изображение или глиф разрешают для глаза данные различия в расстоянии от экрана и физическом размере пикселей устройства (плотность пикселей обратна физическому размеру пикселей). Эффективное разрешение — это хорошая метрика для создания взаимодействия на ее основе, поскольку оно ориентируется на пользователя. Поняв все факторы и контролируя размер элементов пользовательского интерфейса, вы можете сделать взаимодействие с пользователем комфортным.
Количество эффективных пикселей в ширину разное для различных устройств, от 320 epx для самых маленьких устройств и до 1024 epx для мониторов скромных размеров и выходит далеко за этот предел. Вам потребуется всего лишь продолжать использовать элементы с автоматически устанавливаемым размером и динамические панели макета, как и раньше. В некоторых случаях в свойствах элементов пользовательского интерфейса в разметке XAML задается фиксированный размер. Коэффициент масштабирования автоматически применяется к приложению в зависимости от устройства, на котором оно запускается, и от настроенных пользователем параметров экрана. Коэффициент масштабирования служит для сохранения представления элементами пользовательского интерфейса цели сенсорного ввода (и чтения) с более или менее постоянным размером для пользователя устройств с различными размерами экрана. И вместе с динамическим макетом ваш пользовательский интерфейс не будет просто оптически масштабироваться на разных устройствах. Вместо этого он будет выполнять необходимые действия для размещения соответствующего объема содержимого в доступном пространстве.
Чтобы ваше приложение будет наилучшим образом выглядело на любых устройствах, мы рекомендуем создать каждый растровый ресурс в различных размерах для определенного коэффициента масштабирования. Если вы предоставите ресурсы с масштабом 100 %, 200 % и 400 % (в такой последовательности), это обеспечит отличные результаты в большинстве случаев при любых промежуточных коэффициентах масштабирования.
Примечание Если по какой-либо причине невозможно создать ресурсы с несколькими размерами, создайте ресурсы с 100%-м масштабированием. В Microsoft Visual Studio шаблон проекта по умолчанию для приложений UWP предоставляет ресурсы официальной фирменной символики (изображения плиток и эмблемы) только в одном размере, но масштаб при этом не 100 %. При создании ресурсов для своего приложения следуйте рекомендациям в этом разделе и предусмотрите размеры 100 %, 200 % и 400 %, а также используйте пакеты ресурсов.
В случае использования сложного изображения, возможно, следует предусмотреть еще больше размеров. Если используются векторные изображения, тогда процесс создания высококачественных ресурсов при любом масштабе относительно прост.
Мы не рекомендуем пытаться поддерживать все коэффициенты масштабирования, но, на всякий случай, вот все коэффициенты масштабирования в Windows 10: 100 %, 125 %, 150 %, 200 %, 250 %, 300 % и 400 %. Если вы все-таких их предоставляете, Магазин выберет правильные ресурсы для каждого устройства, и только они будут загружены. Магазин выбирает ресурсы для загрузки на основе DPI устройства. Вы можете повторно использовать ресурсы из приложения среда выполнения Windows 8.x с такими коэффициентами масштабирования, как 140 % и 220 %, но приложение будет работать с одним из новых коэффициентов масштабирования, поэтому масштабирование растровых рисунков будет неизбежным. Проверьте ваше приложение на различных устройствах, чтобы убедиться, что результаты вас устраивают.
Возможно, вы повторно используете разметку XAML из приложения среда выполнения Windows 8.x, где в разметке используются значения литеральных измерений (например, для изменения размера фигур или других элементов, например для оформления). Но в некоторых случаях на устройстве в приложении для Windows 10 используется более крупный коэффициент масштабирования, чем для универсальных приложений версии 8.1 (например, 150 % используется вместо 140 %, а 200 % используется вместо 180 %). Поэтому, если литеральные значения окажутся в Windows 10 слишком большими, попробуйте умножить их на 0,8. Подробнее см. в разделе Адаптивный дизайн 101 для приложений UWP.
Изменения GridView в и ListView
В методы задания стилей GridView по умолчанию были внесены некоторые изменения для реализации вертикальной прокрутки этого элемента управления (вместо горизонтальной прокрутки, которая раньше использовалась по умолчанию). Если копия стиля по умолчанию в вашем проекте была изменена, то в вашей копии изменения применены не будут, и вам придется вносить их вручную. Ниже представлен список этих изменений.
- Метод задания для ScrollViewer.HorizontalScrollBarVisibility изменен с Auto на Disabled.
- Метод задания для ScrollViewer.VerticalScrollBarVisibility изменен с Disabled на Auto.
- Метод задания для ScrollViewer.HorizontalScrollMode изменен с Enabled на Disabled.
- Метод задания для ScrollViewer.VerticalScrollMode изменен с Disabled на Enabled.
- В методе задания для ItemsPanel значение ItemsWrapGrid.Orientation изменено с Vertical на Horizontal.
Если это последнее изменение (изменение Orientation) кажется вам противоречивым, помните, что мы говорим о сетке с переносом. Горизонтально ориентированная сетка с переносом (новое значение) похожа на систему письменности, где текст размещается по горизонтали и переносится вниз на следующую строку до конца страницы. Такая страница текста прокручивается по вертикали. И наоборот, вертикально ориентированная сетка с переносом (предыдущее значение) аналогична системе письменности, где текст размещается по вертикали, и поэтому такая страница прокручивается по горизонтали.
Ниже приведены аспекты GridView и ListView, которые были изменены или которые не поддерживаются в Windows 10.
- Свойство IsSwipeEnabled (только среда выполнения Windows приложений 8.x) не поддерживается для Windows 10 приложений. Этот API по-прежнему присутствует, но его нельзя настраивать. Поддерживаются все предыдущие жесты выделения, кроме прокрутки вниз (этот жест не поддерживается, поскольку данные показывают, что он не обнаруживаемый) и щелчка правой кнопкой мыши (этот действие сохраняется для отображения контекстного меню).
- Свойство ReorderMode (только для приложений Магазина Windows Phone) не поддерживается для приложений Windows 10. Этот API по-прежнему присутствует, но его нельзя настраивать. Вместо этого установите для параметров AllowDrop и CanReorderItems значение "true" в GridView или ListView. Тогда пользователь сможет упорядочивать элементы с помощью жеста нажатия и удерживания (или перетаскивания).
- При разработке приложений для Windows 10 используйте ListViewItemPresenter вместо GridViewItemPresenter в стиле контейнера элементов, как для ListView, так и для GridView. В случае изменения копии стилей контейнера элементов по умолчанию вы получите нужный тип.
- Изменены визуальные элементы выбора для приложений Windows 10. Если установить для параметра SelectionMode значение Multiple, флажок будет по умолчанию добавляться для каждого элемента. Значение по умолчанию для элементов ListView означает, что флажок будет расположен рядом с элементом, и в результате пространство, занимаемое оставшейся частью элемента, будет немного уменьшено и сдвинуто. Для элементов GridView, флажок накладывается поверх элемента по умолчанию. Но, в любом случае, вы можете настроить макет (встроенный или наложение) флажков (свойство CheckMode) и их отображение (свойство SelectionCheckMarkVisualEnabled) в элементе ListViewItemPresenter внутри стиля контейнера элементов, как описано в следующем примере.
- В Windows 10 событие ContainerContentChanging вызывается дважды для каждого элемента во время применения виртуализации пользовательского интерфейса: один раз для восстановления, и один раз для последующего использования. Если InRecycleQueue имеет значение true и у вас нет конкретной работы по восстановлению, вы можете сразу же выйти из обработчика событий, зная, что в случае повторного использования данного элемента снова будет осуществлен вход (при этом InRecycleQueue будет иметь значение false).
<Style x:Key="CustomItemContainerStyle" TargetType="ListViewItem|GridViewItem">
...
<Setter.Value>
<ControlTemplate TargetType="ListViewItem|GridViewItem">
<ListViewItemPresenter CheckMode="Inline|Overlay" ... />
</ControlTemplate>
</Setter.Value>
...
</Style>
ListViewItemPresenter со встроенным флажком
ListViewItemPresenter с наложенным флажком
- После удаления жестов прокрутки вниз и щелчка правой кнопкой мыши для осуществления выбора (по причинам, указанным выше) модель взаимодействия изменилась. Одним из последствий стало то, что события ItemClick и SelectionChanged больше не являются взаимно исключающими. Для приложения Windows 10 просмотрите свои сценарии и решите, какую модель взаимодействия применить — "выбора" или "вызова". Подробнее см. в разделе Изменение режима взаимодействия.
- Некоторые изменения свойств, используемые для реализации стиля ListViewItemPresenter. Новые свойства: CheckBoxBrush, PressedBackground, SelectedPressedBackground и FocusSecondaryBorderBrush. Свойства, которые игнорируются в приложениях Windows 10: Padding (вместо него используйте ContentMargin), CheckHintBrush, CheckSelectingBrush, PointerOverBackgroundMargin, ReorderHintOffset, SelectedBorderThickness и SelectedPointerOverBorderBrush.
В этой таблице описаны изменения визуальных состояний и группы визуальных состояний в шаблонах элементов управления ListViewItem и GridViewItem.
| 8.1 | Состояние функции | Windows 10/11 | Состояние функции |
|---|---|---|---|
| CommonStates | CommonStates | ||
| Нормальный | Нормальный | ||
| PointerOver | PointerOver | ||
| Нажато | Нажато | ||
| PointerOverPressed | [недоступно] | ||
| Выключено | [недоступно] | ||
| [недоступно] | PointerOverSelected | ||
| [недоступно] | Выбрано | ||
| [недоступно] | PressedSelected | ||
| [недоступно] | DisabledStates | ||
| [недоступно] | Выключено | ||
| [недоступно] | Активировано | ||
| SelectionHintStates | [недоступно] | ||
| VerticalSelectionHint | [недоступно] | ||
| HorizontalSelectionHint | [недоступно] | ||
| NoSelectionHint | [недоступно] | ||
| [недоступно] | MultiSelectStates | ||
| [недоступно] | MultiSelectDisabled | ||
| [недоступно] | MultiSelectEnabled | ||
| SelectionStates | [недоступно] | ||
| Unselecting | [недоступно] | ||
| Unselected | [недоступно] | ||
| UnselectedPointerOver | [недоступно] | ||
| UnselectedSwiping | [недоступно] | ||
| Выбрать | [недоступно] | ||
| Выбрано | [недоступно] | ||
| SelectedSwiping | [недоступно] | ||
| SelectedUnfocused | [недоступно] |
Если используется настраиваемый шаблон элементов управления ListViewItem или GridViewItem, пересмотрите его с учетом вышеуказанных изменений. Рекомендуется начать заново с изменения копии нового шаблона по умолчанию и повторного применения ваших настроек. Если по какой-либо причине вы не можете этого сделать и вам требуется изменить существующий шаблон, ознакомьтесь с некоторыми общими инструкциями, приведенными далее.
- Добавление новой группы визуальных состояний MultiSelectStates.
- Добавление нового визуального состояния MultiSelectDisabled.
- Добавление нового визуального состояния MultiSelectEnabled.
- Добавление новой группы визуальных состояний DisabledStates.
- Добавление нового визуального состояния Enabled.
- В группе визуальных состояний CommonStates удалите визуальное состояние PointerOverPressed.
- Переместите визуальное состояние Disabled в группу визуальных состояний DisabledStates.
- Добавление нового визуального состояния PointerOverSelected.
- Добавление нового визуального состояния PressedSelected.
- Удаление группы визуальных состояний SelectedHintStates.
- Переместите визуальное состояние Selected из группы визуальных состояний в группу визуальных состояний CommonStates.
- Удаление целой группы визуальных состояний SelectionStates.
Локализация и глобализация
Вы можете повторно использовать файл Resources.resw из проекта универсального приложения для версии 8.1 в проекте приложения UWP. После копирования файла добавьте его в проект и задайте для параметра Действие при сборке значение PRIResource, а для параметра Копировать в выходной каталог — Не копировать. В разделе ResourceContext.QualifierValues описывается загрузка ресурсов для определенного семейства устройств на основе коэффициента выбора ресурсов для семейств устройств.
Воспроизведение на устройстве
Вместо устаревших для приложений Windows 10 API-интерфейсов в пространстве имен Windows.Media.PlayTo рекомендуется использовать API-интерфейсы Windows.Media.Casting.
Ключи ресурса и размеры стиля TextBlock
Язык проектирования изменился для соответствия Windows 10, и поэтому некоторые системные стили были также изменены. В некоторых случаях вам может потребоваться обновить визуальные элементы представлений, чтобы они соответствовали свойствам стилей, которые изменились.
В других случаях ключи ресурсов больше не поддерживаются. Редактор разметки XAML в Visual Studio выделяет ссылки на ключи ресурсов, которые не могут быть разрешены. Например, редактор разметки XAML подчеркнет ссылку к ключу стиля ListViewItemTextBlockStyle волнистой линией красного цвета. Если она не будет исправлена, приложение немедленно завершит работу при попытке развернуть его в эмуляторе или на устройстве. Поэтому важно обращать внимание на правильность разметки XAML. И вы увидите, что Visual Studio — это отличный инструмент для нахождения подобных проблем.
Для ключей, которые по-прежнему поддерживаются, изменения языка дизайна означают, что изменились свойства, заданные некоторыми стилями. Например, TitleTextBlockStyle задает для FontSize значение 14,667 пикселей в приложении среда выполнения Windows версии 8.x и 18,14 пикселей в приложении Windows Phone Store. Но этот же стиль задает для элемента FontSize гораздо большее значение 24 пикселя в приложении для Windows 10. Проверьте свои разработки и макеты и используйте соответствующие стили в нужных местах. Дополнительные сведения см. в разделе Рекомендации по шрифтам и Оформление приложений UWP.
Далее приведен полный список ключей, которые больше не поддерживаются.
- CheckBoxAndRadioButtonMinWidthSize
- CheckBoxAndRadioButtonTextPaddingThickness
- ComboBoxFlyoutListPlaceholderTextOpacity
- ComboBoxFlyoutListPlaceholderTextThemeMargin
- ComboBoxHighlightedBackgroundThemeBrush
- ComboBoxHighlightedBorderThemeBrush
- ComboBoxHighlightedForegroundThemeBrush
- ComboBoxInlinePlaceholderTextForegroundThemeBrush
- ComboBoxInlinePlaceholderTextThemeFontWeight
- ComboBoxItemDisabledThemeOpacity
- ComboBoxItemHighContrastBackgroundThemeMargin
- ComboBoxItemMinHeightThemeSize
- ComboBoxPlaceholderTextBlockStyle
- ComboBoxPlaceholderTextThemeMargin
- CommandBarBackgroundThemeBrush
- CommandBarForegroundThemeBrush
- ContentDialogButton1HostPadding
- ContentDialogButton2HostPadding
- ContentDialogButtonsMinHeight
- ContentDialogContentLandscapeWidth
- ContentDialogContentMinHeight
- ContentDialogDimmingColor
- ContentDialogTitleMinHeight
- ControlContextualInfoTextBlockStyle
- ControlHeaderContentPresenterStyle
- ControlHeaderTextBlockStyle
- FlyoutContentPanelLandscapeThemeMargin
- FlyoutContentPanelPortraitThemeMargin
- GrabberMargin
- GridViewItemMargin
- GridViewItemPlaceholderBackgroundThemeBrush
- GroupHeaderTextBlockStyle
- HeaderContentPresenterStyle
- HighContrastBlack
- HighContrastWhite
- HubHeaderCharacterSpacing
- HubHeaderFontSize
- HubHeaderMarginThickness
- HubSectionHeaderCharacterSpacing
- HubSectionHeaderFontSize
- HubSectionHeaderMarginThickness
- HubSectionMarginThickness
- InlineWindowPlayPauseMargin
- ItemTemplate
- LeftFullWindowMargin
- LeftMargin
- ListViewEmptyStaticTextBlockStyle
- ListViewItemContentTextBlockStyle
- ListViewItemContentTranslateX
- ListViewItemMargin
- ListViewItemMultiselectCheckBoxMargin
- ListViewItemSubheaderTextBlockStyle
- ListViewItemTextBlockStyle
- MediaControlPanelAudioThemeBrush
- MediaControlPanelPhoneVideoThemeBrush
- MediaControlPanelVideoThemeBrush
- MediaControlPanelVideoThemeColor
- MediaControlPlayPauseThemeBrush
- MediaControlTimeRowThemeBrush
- MediaControlTimeRowThemeColor
- MediaDownloadProgressIndicatorThemeBrush
- MediaErrorBackgroundThemeBrush
- MediaTextThemeBrush
- MenuFlyoutBackgroundThemeBrush
- MenuFlyoutBorderThemeBrush
- MenuFlyoutLandscapeThemePadding
- MenuFlyoutLeftLandscapeBorderThemeThickness
- MenuFlyoutPortraitBorderThemeThickness
- MenuFlyoutPortraitThemePadding
- MenuFlyoutRightLandscapeBorderThemeThickness
- MessageDialogContentStyle
- MessageDialogTitleStyle
- MinimalWindowMargin
- PasswordBoxCheckBoxThemeMargin
- PhoneAccentBrush
- PhoneBackgroundBrush
- PhoneBackgroundColor
- PhoneBaseBlackColor
- PhoneBaseHighColor
- PhoneBaseLowColor
- PhoneBaseLowSolidColor
- PhoneBaseMediumHighColor
- PhoneBaseMediumMidColor
- PhoneBaseMediumMidSolidColor
- PhoneBaseMidColor
- PhoneBaseWhiteColor
- PhoneBorderThickness
- PhoneButtonBasePressedForegroundBrush
- PhoneButtonContentPadding
- PhoneButtonFontWeight
- PhoneButtonMinHeight
- PhoneButtonMinWidth
- PhoneChromeBrush
- PhoneChromeColor
- PhoneControlBackgroundColor
- PhoneControlDisabledColor
- PhoneControlForegroundColor
- PhoneDisabledBrush
- PhoneDisabledColor
- PhoneFontFamilyLight
- PhoneFontFamilySemiBold
- PhoneForegroundBrush
- PhoneForegroundColor
- PhoneHighContrastSelectedBackgroundThemeBrush
- PhoneHighContrastSelectedForegroundThemeBrush
- PhoneImagePlaceholderColor
- PhoneLowBrush
- PhoneMidBrush
- PhonePageBackgroundColor
- PhonePivotLockedTranslation
- PhonePivotUnselectedItemOpacity
- PhoneRadioCheckBoxBorderBrush
- PhoneRadioCheckBoxBrush
- PhoneRadioCheckBoxCheckBrush
- PhoneRadioCheckBoxPressedBrush
- PhoneStrokeThickness
- PhoneTextHighColor
- PhoneTextLowColor
- PhoneTextMidColor
- PhoneTextOverAccentColor
- PhoneTouchTargetLargeOverhang
- PhoneTouchTargetOverhang
- PivotHeaderItemPadding
- PlaceholderContentPresenterStyle
- ProgressBarHighContrastAccentBarThemeBrush
- ProgressBarIndeterminateRectagleThemeSize
- ProgressBarRectangleStyle
- ProgressRingActiveBackgroundOpacity
- ProgressRingElipseThemeMargin
- ProgressRingElipseThemeSize
- ProgressRingTextForegroundThemeBrush
- ProgressRingTextThemeMargin
- ProgressRingThemeSize
- RichEditBoxTextThemeMargin
- RightFullWindowMargin
- RightMargin
- ScrollBarMinThemeHeight
- ScrollBarMinThemeWidth
- ScrollBarPanningThumbThemeHeight
- ScrollBarPanningThumbThemeWidth
- SliderThumbDisabledBorderThemeBrush
- SliderTrackBorderThemeBrush
- SliderTrackDisabledBorderThemeBrush
- TextBoxBackgroundColor
- TextBoxBorderColor
- TextBoxDisabledHeaderForegroundThemeBrush
- TextBoxFocusedBackgroundThemeBrush
- TextBoxForegroundColor
- TextBoxPlaceholderColor
- TextControlHeaderMarginThemeThickness
- TextControlHeaderMinHeightSize
- TextStyleExtraExtraLargeFontSize
- TextStyleExtraLargePlusFontSize
- TextStyleMediumFontSize
- TextStyleSmallFontSize
- TimeRemainingElementMargin
SearchBox заменен на AutoSuggestBox.
Хотя SearchBox реализуется во всех семействах устройств, он не полностью использует свои функции в мобильных устройствах. Используйте AutoSuggestBox при выполнении любого поиска. Ниже описана типичная реализация поиска с помощью AutoSuggestBox.
Когда пользователь начинает вводить текст, создается событие TextChanged с причиной UserInput. Затем вы можете заполнить список вариантов текста и выбрать ItemsSource элемента AutoSuggestBox. Когда пользователь переходит по списку, создается событие SuggestionChosen (если вы задали TextMemberDisplayPath, в текстовое поле автоматически вводится указанное свойство). Когда пользователь подтверждает выбор с помощью клавиши Enter, создается событие QuerySubmitted, и в этот момент вы можете выполнить соответствующее действие с выбранным вариантом (в данном случае, скорее всего, это будет переход на другую страницу с более подробной информацией об указанном содержимом). Обратите внимание, что свойства LinguisticDetails и Language элемента SearchBoxQuerySubmittedEventArgs больше не поддерживаются (для поддержки этой функции предусмотрены аналогичные API). KeyModifiers также больше не поддерживаются.
AutoSuggestBox также поддерживает редакторы методов ввода (IME). Кроме того, можно отобразить значок поиска, если это необходимо (взаимодействие со значком приведет к вызову события QuerySubmitted).
<AutoSuggestBox ... >
<AutoSuggestBox.QueryIcon>
<SymbolIcon Symbol="Find"/>
</AutoSuggestBox.QueryIcon>
</AutoSuggestBox>
См. также раздел Пример переноса AutoSuggestBox.
Изменения SemanticZoom
Жест уменьшения масштаба для SemanticZoom упрощен на модели Windows Phone. Теперь для уменьшения масштаба нужно коснуться заголовка группы или щелкнуть его (поэтому на настольных компьютерах больше не отображается кнопка со знаком минус, которая использовалась для уменьшения масштаба). Теперь мы бесплатно получаем одинаковое поведение на всех устройствах. Одно незначительное отличие от модели Windows Phone состоит в том, что уменьшенное представление (список переходов) заменяет увеличенное представление, а не накладывается на него. По этой причине вы можете удалить все полупрозрачные фоны из уменьшенных представлений.
В приложении Магазина Windows Phone представление с уменьшенным масштабом растягивается по размеру экрана. В приложении среда выполнения Windows версии 8.x и в приложении Windows 10 размер уменьшенного представления ограничен границами элемента управления SemanticZoom.
В приложении Магазина Windows Phone содержимое за представлением с уменьшенным масштабом (в z-порядке) просвечивается, если представление с уменьшенным масштабом имеет какую-либо прозрачность в своем фоне. В приложении среда выполнения Windows версии 8.x и в приложении Windows 10 ничего не отображается за уменьшенным представлением.
В приложении среда выполнения Windows 8.x при отключении и повторной активации уменьшенное представление закрывается (если оно отображается) и вместо него отображается увеличенное представление. В приложении Магазина Windows Phone и приложении для Windows 10 представление с уменьшенным масштабом будет отображаться, если оно отображалось ранее.
В приложении Магазина Windows Phone и приложении для Windows 10 представление с уменьшенным масштабом закрывается при нажатии кнопки "Назад". Для приложения среда выполнения Windows версии 8.x нет встроенной обработки кнопки "Назад", поэтому вопрос не применяется.
Параметры
Класс среды выполнения Windows 8.x SettingsPane непригоден для Windows 10. Вместо этого, в дополнение к построению страницы параметров, необходимо предоставить пользователям способ получать доступ к ней из вашего приложения. Рекомендуется представить страницу параметров приложения на верхнем уровне, как последний закрепленный элемент на панели навигации, но ниже приводится полный набор доступных вариантов.
- Панель навигации. Страница параметров должна быть последним элементом в навигационном списке вариантов выбора и закреплена внизу.
- Панель приложения или панель инструментов (в представлении вкладки или макете сводки). Страница параметров должна быть последним элементом во всплывающем меню панели приложения или панели инструментов. Не рекомендуется, чтобы страница параметров была одним из элементов верхнего уровня на панели навигации.
- Hub. Страница параметров должна быть расположена внутри всплывающего меню (возможно, из меню панели приложения или меню панели инструментов в макете Центра).
Также не рекомендуется, чтобы располагать параметры на панели основных и подробных данных.
Страница параметров должна полностью заполнять окно приложения и также располагаться в разделе сведений о приложении и отзывов. Рекомендации по проектированию страницы параметров см. в разделе Рекомендации по параметрам приложений.
Текст
Текст (или шрифтовое оформление) является важным аспектом для приложения UWP. Во время переноса, возможно, необходимо будет пересмотреть визуальные элементы в представлениях, чтобы они соответствовали новому языку дизайна. Используйте эти иллюстрации, чтобы найти доступные универсальная платформа Windows (UWP) системные стили TextBlock. Найдите те, которые соответствуют используемым стилям Windows Phone Silverlight. Но вы можете создать собственные универсальные стили и скопировать в них свойства из системных стилей Windows Phone Silverlight.
Стили системы TextBlock для приложений для Windows 10
В приложениях среда выполнения Windows версии 8.x и Windows Phone Store семейство шрифтов по умолчанию — Глобальный пользовательский интерфейс. В приложении для Windows 10 семейством шрифтов по умолчанию является Segoe UI. В результате метрика шрифта в приложении может выглядеть иначе. Если вы хотите воспроизвести вид текста 8.1, то можно настроить собственную метрику с помощью свойств, например, LineHeight и LineStackingStrategy.
В приложениях среда выполнения Windows версии 8.x и Windows Phone Store языком по умолчанию для текста является язык сборки или en-us. В приложении для Windows 10 языком по умолчанию является язык главного приложения (резервный вариант шрифта). Вы можете явно установить FrameworkElement.Language, но вам будет удобнее использовать резервный вариант шрифта, если вы не установите значение для этого свойства.
Дополнительные сведения см. в разделе Рекомендации по шрифтам и Оформление приложений UWP. Сведения об изменениях элементов управления текстом также см. в разделе Элементы управления выше.
Изменения тем
Для универсальных приложений версии 8.1 по умолчанию используется темная тема. Для устройств под управлением Windows 10 тема по умолчанию изменена, но вы можете управлять используемой темой, заявив о запрошенной теме в файле App.xaml. Например, чтобы на всех устройствах отображалась темная тема, добавьте RequestedTheme="Dark" к корневому элементу Application.
Плитки и всплывающие уведомления
Для плиток и всплывающих уведомлений текущие шаблоны, которые вы используете, будут работать и в приложении для Windows 10. Однако есть и новые, адаптивные шаблоны, описанные в разделе Уведомления, плитки, всплывающие уведомления и индикаторы событий.
Ранее на настольных компьютерах всплывающее уведомление было временным сообщением. Через какое-то время или после его игнорирования оно исчезало и больше было не доступно. Если всплывающее уведомление игнорируется или временно закрывается в Windows Phone, оно поступает в центр поддержки. Теперь центр поддержки доступен не только семейству мобильных устройств.
Чтобы отправить всплывающее уведомление, больше не требуется декларировать возможность.
Размер окна
Для универсальных приложений версии 8.1 элемент манифеста приложения ApplicationView используется для объявления минимальной ширины окна. В приложении UWP можно задать минимальный размер окна (ширину и высоту) с помощью императивного кода. Стандартный минимальный размер — 500 x 320 эфф. пикселей. Это также самый маленький из допустимых минимальных размеров. Самый большой из допустимых минимальных размеров — 500 x 500 эфф. пикселей.
Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().SetPreferredMinSize
(new Size { Width = 500, Height = 500 });
Следующий раздел называется Перенос для ввода-вывода, устройства и модели приложения.
Обратная связь
Ожидается в ближайшее время: в течение 2024 года мы постепенно откажемся от GitHub Issues как механизма обратной связи для контента и заменим его новой системой обратной связи. Дополнительные сведения см. в разделе https://aka.ms/ContentUserFeedback.
Отправить и просмотреть отзыв по