Настройка заголовка окна Title bar customization

Если приложение выполняется в окне рабочего стола, можно настроить заголовки окон с учетом индивидуальных особенностей приложения. When your app is running in a desktop window, you can customize the title bars to match the personality of your app. API-интерфейсы для настройки заголовка окна позволяют указать цвета элементов заголовка окна или расширить содержимое приложения до области заголовка окна и получить над ним полный контроль. The title bar customization APIs let you specify colors for title bar elements, or extend your app content into the title bar area and take full control of it.

Степень настройки заголовка окна How much to customize the title bar

Существует два уровня настройки, которые можно применить к заголовку окна. There are two levels of customization that you can apply to the title bar.

Для простой настройки цвета можно установить свойствам ApplicationViewTitleBar значения в соответствии с цветами, в которые требуется окрасить элементы заголовка окна. For simple color customization, you can set ApplicationViewTitleBar properties to specify the colors you want to use for title bar elements. В этом случае система продолжает управлять всеми остальными аспектами заголовка окна, такими как отрисовка названия приложения и определение перетаскиваемых областей. In this case, the system retains responsibility for all other aspects of the title bar, such as drawing the app title and defining draggable areas.

Другой вариант — скрыть заголовок окна по умолчанию и заменить его собственным содержимым XAML. Your other option is to hide the default title bar and replace it with your own XAML content. Например, в области заголовка окна можно разместить текст, кнопки или пользовательские меню. For example, you can place text, buttons, or custom menus in the title bar area. Кроме того, этот вариант следует использовать для расширения акрилового фона до области заголовка окна. You will also need to use this option to extend an acrylic background into the title bar area.

Выбирая полную настройку, вы отвечаете за размещение содержимого в области заголовка окна и можете определить собственную перетаскиваемую область. When you opt for full customization, you are responsible for putting content in the title bar area, and you can define your own draggable region. Системные кнопки «Назад», «Закрыть», «Свернуть» и «Развернуть» остаются доступными и обрабатываются системой, в отличие от таких элементов, как название приложения. The system Back, Close, Minimize, and Maximize buttons are still available and handled by the system, but elements like the app title are not. Вам потребуется самостоятельно создать эти элементы с учетом потребностей приложения. You will need to create those elements yourself as needed by your app.

Простая настройка цвета доступна для приложений Windows, использующих XAML, DirectX и HTML. Simple color customization is available to Windows apps using XAML, DirectX, and HTML. Полная настройка доступна только для приложений Windows, использующих XAML. Full customization is available only to Windows apps using XAML.

Простая настройка цвета Simple color customization

Если вам требуется настроить только цвета заголовка окна, а не выполнить более сложную задачу (такую как размещение вкладок в заголовке окна), можно настроить свойства цветов в ApplicationViewTitleBar для окна приложения. If you want only to customize the title bar colors and not do anything too fancy (such as putting tabs in your title bar), you can set the color properties on the ApplicationViewTitleBar for your app window.

В этом примере показано, как получить экземпляр ApplicationViewTitleBar и настроить его свойства цветов. This example shows how to get an instance of ApplicationViewTitleBar and set its color properties.

Этот код можно разместить в методе OnLaunched приложения (App.xaml.cs) после вызова Window.Activate или на первой странице приложения. This code can be placed in your app’s OnLaunched method (App.xaml.cs), after the call to Window.Activate, or in your app’s first page.

Набор средств сообщества Windows предоставляет расширения, которые позволяют задать эти свойства цветов в XAML. The Windows Community Toolkit provides extensions that let you set these color properties in XAML. Дополнительные сведения см. в документации по набору средств сообщества Windows. For more info, see the Windows Community Toolkit documentation.

При настройке цветов заголовка окна следует учитывать несколько особенностей. There are a few things to be aware of when setting title bar colors:

• Цвет фона кнопки не применяется к кнопке «Закрыть» в состояниях наведения и нажатия. The button background color is not applied to the close button hover and pressed states. В этих состояниях для кнопки «Закрыть» всегда используется определенный системой цвет. The close button always uses the system-defined color for those states.
• Свойства цветов кнопок применяются к системной кнопке «Назад» при ее использовании. The button color properties are applied to the system back button when it’s used. (См. раздел «Журнал навигации и навигация в обратном направлении».) (See Navigation history and backwards navigation.)
• Если установить свойству цвета значение null, оно будет сброшено к системному цвету по умолчанию. Setting a color property to null resets it to the default system color.
• Невозможно установить прозрачные цвета. You can’t set transparent colors. Альфа-канал цвета игнорируется. The color’s alpha channel is ignored.
• Цвет на экране может отличаться от вариантов, например, из-за таких параметров, как цветовые фильтры или режим высокой контрастности. The color on screen may differ from your choices, for example, due to settings such as color filters or high contrast mode. Не полагайтесь только на цвет для передачи важной информации. Do not rely solely on color to convey important information.

Пользователь Windows может применить к заголовку окна любой цвет элементов. Windows gives a user the option to apply their selected accent color to the title bar. При установке любого цвета заголовка окна рекомендуется установить все цвета явным образом. If you set any title bar color, we recommend that you explicitly set all the colors. Это необходимо, чтобы исключить появление случайных сочетаний цветов из-за определенных пользователем параметров цвета. This ensures that there are no unintended color combinations that occur because of user defined color settings.

Полная настройка Full customization

Если выбрать полную настройку заголовка окна, клиентская область приложения расширяется и закрывает все окно, включая область заголовка окна. When you opt-in to full title bar customization, your app’s client area is extended to cover the entire window, including the title bar area. Вы отвечаете за отрисовку и обработку входных данных для всего окна за исключением кнопок заголовка, которые накладываются поверх холста приложения. You are responsible for drawing and input-handling for the entire window except the caption buttons, which are overlaid on top of the app’s canvas.

Чтобы скрыть заголовок окна по умолчанию и расширить собственное содержимое до области заголовка окна, задайте свойству CoreApplicationViewTitleBar.ExtendViewIntoTitleBar значение true. To hide the default title bar and extend your content into the title bar area, set the CoreApplicationViewTitleBar.ExtendViewIntoTitleBar property to true.

В этом примере показано, как получить CoreApplicationViewTitleBar и задать свойству ExtendViewIntoTitleBar значение true. This example shows how to get the CoreApplicationViewTitleBar and set the ExtendViewIntoTitleBar property to true. Это можно сделать в методе OnLaunched приложения (App.xaml.cs) или на первой странице приложения. This can be done in your app’s OnLaunched method (App.xaml.cs), or in your app’s first page.

Этот параметр сохраняется даже после закрытия и перезапуска приложения. This setting persists when your app is closed and restarted. Если в Visual Studio задать для ExtendViewIntoTitleBar значение true, то для возврата к значению по умолчанию следует явным образом задать значение false и запустить приложение, чтобы перезаписать сохраненный параметр. In Visual Studio, if you set ExtendViewIntoTitleBar to true, and then want to revert to the default, you should explicitly set it to false and run your app to overwrite the persisted setting.

Перетаскиваемые области Draggable regions

Перетаскиваемая область заголовка окна определяет, в каком месте пользователь может щелкнуть и перетащить окно (в отличие от перетаскивания содержимого в пределах холста приложения). The draggable region of the title bar defines where the user can click and drag to move the window around (as opposed to simply dragging content within the app’s canvas). Чтобы указать перетаскиваемую область, необходимо вызвать метод Window.SetTitleBar и передать UIElement, определяющий перетаскиваемую область. You specify the draggable region by calling the Window.SetTitleBar method and passing in a UIElement that defines the draggable region. (UIElement часто представляет собой панель, содержащую другие элементы.) (The UIElement is often a panel that contains other elements.)

Ниже показано, как установить сетку с содержимым в качестве перетаскиваемой области заголовка окна. Here’s how to set a Grid of content as the draggable title bar region. Этот код добавляется в код XAML и код программной части для первой страницы приложения. This code goes in the XAML and code-behind for your app’s first page. Полный код см. в разделе Пример полной настройки. See the Full customization example section for the full code.

По умолчанию некоторые элементы пользовательского интерфейса, такие как Grid, не участвуют в проверке нажатия, если они не имеют фонового набора. By default, some UI elements such as Grid do not participate in hit testing when they don’t have a background set. Для сетки AppTitleBar в примере ниже, чтобы разрешить перетаскивание, необходимо установить для фона значение Transparent . For the grid AppTitleBar in the sample below to allow dragging, we therefore need to set the background to Transparent .

Класс UIElement ( AppTitleBar ) входит в состав XAML для приложения. The UIElement ( AppTitleBar ) is part of the XAML for your app. Можно объявить и настроить заголовок окна на неизменной корневой странице или объявить и настроить область заголовка панели на каждой странице внутри приложения. You can either declare and set the title bar in a root page that doesn’t change, or declare and set a title bar region in each page that your app can navigate to. При настройке на каждой странице следует убедиться, что перетаскиваемая область остается согласованной по мере навигации пользователя по приложению. If you set it in each page, you should make sure the draggable region stays consistent as a user navigates around your app.

Можно вызвать SetTitleBar для переключения на новый элемент заголовка окна во время работы приложения. You can call SetTitleBar to switch to a new title bar element while your app is running. Также можно передать значение null как параметр для метода SetTitleBar, чтобы вернуться к поведению перетаскивания по умолчанию. You can also pass null as the parameter to SetTitleBar to revert to the default dragging behavior. (Дополнительные сведения см. в разделе «Перетаскиваемая область по умолчанию».) (See «Default draggable region» for more info.)

Указанная перетаскиваемая область должна быть доступной для проверки нажатия, то есть для некоторых элементов может потребоваться настроить прозрачную кисть фона. The draggable region you specify needs to be hit testable, which means, for some elements, you might need to set a transparent background brush. Дополнительные сведения см. в примечаниях по VisualTreeHelper.FindElementsInHostCoordinates. See the remarks on VisualTreeHelper.FindElementsInHostCoordinates for more info.

Например, если определить сетку как перетаскиваемую область, установите значение Background=»Transparent» , чтобы сделать ее перетаскиваемой. For example, if you define a Grid as your draggable region, set Background=»Transparent» to make it draggable.

Эта сетка не является перетаскиваемой (но видимые элементы в ней можно перетаскивать): . This Grid is not draggable (but visible elements within it are): .

Эта сетка выглядит так же, но является полностью перетаскиваемой: . This Grid looks the same, but the whole Grid is draggable: .

Перетаскиваемая область по умолчанию Default draggable region

Если перетаскиваемая область не указана, в качестве перетаскиваемой области по умолчанию используется прямоугольник с шириной окна и высотой кнопок заголовка, расположенный вдоль верхнего края окна. If you don’t specify a draggable region, a rectangle that is the width of the window, the height of the caption buttons, and positioned along the top edge of the window is set as the default draggable region.

Если перетаскиваемая область указана, система сжимает перетаскиваемую область по умолчанию до небольшой области размером с кнопку заголовка, расположенную слева от кнопок заголовка (или справа от них, если кнопки заголовка находятся в левой части окна). If you do define a draggable region, the system shrinks the default draggable region down to a small area the size of a caption button, positioned to the left of the caption buttons (or to the right if the captions buttons are on the left side of the window). Таким образом, в окне всегда присутствует согласованная область для перетаскивания. This ensures that there is always a consistent area the user can drag.

Системные кнопки заголовка System caption buttons

Система резервирует верхние левый и правый углы окна приложения для системных кнопок заголовка («Назад», «Свернуть», «Развернуть» и «Закрыть»). The system reserves the upper-left or upper-right corner of the app window for the system caption buttons (Back, Minimize, Maximize, Close). Система сохраняет контроль над областью элементов управления заголовка, чтобы обеспечить наличие минимальных возможностей для перетаскивания, свертывания, развертывания и закрытия окна. The system retains control of the caption control area to guarantee that minimum functionality is provided for dragging, minimizing, maximizing, and closing the window. Система отображает кнопку «Закрыть» в верхнем правом углу для языков с написанием слева направо и в верхнем левом углу для языков с написанием справа налево. The system draws the Close button in the upper-right for left-to-right languages and the upper-left for right-to-left languages.

Размеры и расположение области элементов управления заголовка определяются классом CoreApplicationViewTitleBar, поэтому его можно учитывать в макете пользовательского интерфейса заголовка окна. The dimensions and position of the caption control area is communicated by the CoreApplicationViewTitleBar class so that you can account for it in the layout of your title bar UI. Ширина зарезервированной области с каждой стороны задается свойствами SystemOverlayLeftInset и SystemOverlayRightInset, а ее высота задается свойством Height. The width of the reserved region on each side is given by the SystemOverlayLeftInset or SystemOverlayRightInset properties, and its height is given by the Height property.

Под областью элементов управления заголовка, определенной этими свойствами, можно отображать содержимое, например фон приложения, но не следует размещать здесь элементы пользовательского интерфейса, с которыми пользователь должен взаимодействовать. You can draw content underneath the caption control area defined by these properties, such as your app background, but you should not put any UI that you expect the user to be able to interact with. Эта область не принимает входные данные, так как ввод для элементов управления заголовка обрабатывается системой. It does not receive any input because input for the caption controls is handled by the system.

Можно обработать событие LayoutMetricsChanged, чтобы отреагировать на изменения размера кнопок заголовка. You can handle the LayoutMetricsChanged event to respond to changes in the size of the caption buttons. Например, это может произойти, если системная кнопка «Назад» отображается или скрывается. For example, this can happen when the system back button is shown or hidden. Обработайте это событие для проверки и обновления позиционирования элементов пользовательского интерфейса, который зависят от размера панели заголовка окна. Handle this event to verify and update the positioning of UI elements that depend on the title bar’s size.

В этом примере показано, как настроить макет заголовка окна с учетом таких изменений, как отображение или скрытие системной кнопки «Назад». This example shows how to adjust the layout of your title bar to account for changes like the system back button being shown or hidden. AppTitleBar , LeftPaddingColumn и RightPaddingColumn объявляются в коде XAML, показанном ранее. AppTitleBar , LeftPaddingColumn , and RightPaddingColumn are declared in the XAML shown previously.

Интерактивное содержимое Interactive content

Интерактивные элементы управления, такие как кнопки, меню или поле поиска, можно разместить в верхней части приложения, чтобы они отображались в строке заголовка. You can place interactive controls, like buttons, menus, or a search box, in the top part of the app so they appear to be in the title bar. Однако существует несколько правил, которые необходимо выполнить для того, чтобы интерактивные элементы получали входные данные пользователя. However, there are a few rules you must follow to ensure that your interactive elements receive user input.

• Чтобы определить какую-либо область как перетаскиваемую область заголовка окна, необходимо вызвать метод SetTitleBar. You must call SetTitleBar to define an area as the draggable title bar region. Если этого не сделать, система устанавливает перетаскиваемую область по умолчанию в верхней части страницы. If you don’t, the system sets the default draggable region at the top of the page. Затем система будет обрабатывать все входные данные пользователя в этой области и не позволит входным данным достичь элементов управления. The system will then handle all user input to this area, and prevent input from reaching your controls.
• Разместите интерактивные элементы управления поверх перетаскиваемой области, определенной вызовом SetTitleBar (с более высоким значением z-порядка). Place your interactive controls over the top of the draggable region defined by the call to SetTitleBar (with a higher z-order). Не делайте интерактивные элементы управления дочерними элементами класса UIElement, переданного методу SetTitleBar. Don’t make your interactive controls children of the UIElement passed to SetTitleBar. После передачи элемента методу SetTitleBar система считает его частью системного заголовка окна и направляет весь ввод указателя в этот элемент. After you pass an element to SetTitleBar, the system treats it like the system title bar and handles all pointer input to that element.

В данном случае элемент TitleBarButton имеет более высокое значение z-порядка, чем AppTitleBar , поэтому он получает ввод пользователя. Here, the TitleBarButton element has a higher z-order than AppTitleBar , so it receives user input.

Прозрачность кнопок заголовка Transparency in caption buttons

Если задать свойству ExtendViewIntoTitleBar значение true, можно сделать фон кнопок заголовка прозрачным, чтобы сквозь него было видно фон приложения. When you set ExtendViewIntoTitleBar to true, you can make the background of the caption buttons transparent to let your app background show through. Как правило, для полной прозрачности следует установить для фона значение Colors.Transparent. You typically set the background to Colors.Transparent for full transparency. Для частичной прозрачности настройте альфа-канал для значения Color, заданного свойству. For partial transparency, set the alpha channel for the Color you set the property to.

Следующие свойства ApplicationViewTitleBar могут быть прозрачными: These ApplicationViewTitleBar properties can be transparent:

• ButtonBackgroundColor ButtonBackgroundColor
• ButtonHoverBackgroundColor ButtonHoverBackgroundColor
• ButtonPressedBackgroundColor ButtonPressedBackgroundColor
• ButtonInactiveBackgroundColor ButtonInactiveBackgroundColor

Цвет фона кнопки не применяется к кнопке «Закрыть» в состояниях наведения и нажатия. The button background color is not applied to the close button hover and pressed states. В этих состояниях для кнопки «Закрыть» всегда используется определенный системой цвет. The close button always uses the system-defined color for those states.

Все остальные свойства цвета продолжат игнорировать альфа-канал. All other color properties will continue to ignore the alpha channel. Если свойству ExtendViewIntoTitleBar задано значение false, все свойства цвета ApplicationViewTitleBar всегда игнорируют альфа-канал. If ExtendViewIntoTitleBar is set to false, the alpha channel is always ignored for all ApplicationViewTitleBar color properties.

Полноэкранный режим и режим планшета Full screen and tablet mode

Если приложение выполняется в полноэкранном режиме или режиме планшета, система скрывает заголовок окна и кнопки управления заголовка. When your app runs in full screen or tablet mode, the system hides the title bar and caption control buttons. Тем не менее, пользователь может вызвать заголовок окна, чтобы он отображался поверх пользовательского интерфейса приложения. However, the user can invoke the title bar to have it shown as an overlay on top of the app’s UI. Можно обработать событие CoreApplicationViewTitleBar.IsVisibleChanged, чтобы получать уведомление при скрытии или вызове заголовка окна и отображать или скрывать пользовательское содержимое заголовка окна по необходимости. You can handle the CoreApplicationViewTitleBar.IsVisibleChanged event to be notified when the title bar is hidden or invoked, and show or hide your custom title bar content as needed.

В этом примере показано, как обработать событие IsVisibleChanged, чтобы отобразить или скрыть показанный ранее элемент AppTitleBar . This example shows how to handle IsVisibleChanged to show and hide the AppTitleBar element shown previously.