Обучение
Модуль
Настройка макета на страницах .NET MAUI XAML - Training
Создание согласованного пользовательского интерфейса на различных устройствах с помощью StackLayout и Grid.
Этот браузер больше не поддерживается.
Выполните обновление до Microsoft Edge, чтобы воспользоваться новейшими функциями, обновлениями для системы безопасности и технической поддержкой.
Windows предоставляет строку заголовка по умолчанию для каждого окна и позволяет настроить ее в соответствии с личностью приложения. Строка заголовка по умолчанию поставляется с некоторыми стандартными компонентами и основными функциями, такими как перетаскивание и изменение размера окна.
Сведения о настройке заголовка строки заголовка, допустимом содержимом области заголовка приложения и рекомендуемых шаблонах пользовательского интерфейса см. в статье о конструкторе заголовков.
Примечание
В этой статье показано, как настроить заголовок для приложений, использующих UWP и WinUI 2. Сведения о приложениях, использующих пакет SDK для приложений Windows и WinUI 3, см. в разделе " Настройка заголовка" пакета SDK для приложений Windows.
Если вы планируете перенести приложение UWP в пакет SDK для приложений Windows, ознакомьтесь с нашим руководством по миграции функций окна. Дополнительные сведения см. в разделе "Миграция функций окна".
В этом списке описываются компоненты стандартной строки заголовка.
В приложениях UWP можно настроить заголовок с помощью элементов классов ApplicationView и CoreApplicationView . Существует несколько API для постепенного изменения внешнего вида строки заголовка на основе необходимого уровня настройки.
Примечание
Класс Windows.UI.WindowManagement.AppWindow , используемый для вторичных окон в приложениях UWP, не поддерживает настройку строки заголовка. Чтобы настроить заголовок приложения UWP, использующего вторичные окна, используйте ApplicationView, как описано в разделе "Показать несколько представлений с помощью ApplicationView".
Существует два уровня настройки, которые можно применить к строке заголовка: применение незначительных изменений к строке заголовка по умолчанию или расширение холста приложения в области заголовка и предоставление полностью настраиваемого содержимого.
Для простой настройки, например изменение цвета строки заголовка, можно задать свойства в объекте заголовка окна приложения, чтобы указать цвета, которые вы хотите использовать для элементов строки заголовка. В этом случае система несет ответственность за все остальные аспекты строки заголовка, например рисование названия приложения и определение областей перетаскивания.
Другой вариант — скрыть строку заголовка по умолчанию и заменить ее собственным пользовательским содержимым. Например, можно разместить текст, поле поиска или настраиваемые меню в области заголовка. Кроме того, вам потребуется использовать этот параметр для расширения материального фона, например Мика, в область заголовка.
При выборе полной настройки вы несете ответственность за размещение содержимого в области заголовка, и вы можете определить свой собственный регион перетаскивания. Элементы управления субтитрами (системные кнопки закрытия, свертывания и развертывания) по-прежнему доступны и обрабатываются системой, но элементы, такие как название приложения, не являются. Вам потребуется создать эти элементы самостоятельно при необходимости в приложении.
Если вы хотите настроить только цвета строк заголовка или значок, можно задать свойства в объекте строки заголовка для окна приложения.
По умолчанию в строке заголовка отображается отображаемое имя приложения в качестве заголовка окна. Отображаемое имя задается в Package.appxmanifest
файле.
Чтобы добавить пользовательский текст в заголовок, задайте свойству ApplicationView.Title текстовое значение, как показано ниже.
public MainPage()
{
this.InitializeComponent();
ApplicationView.GetForCurrentView().Title = "Custom text";
}
Текст добавляется в заголовок окна, который будет отображаться как "пользовательский текст — отображаемое имя приложения". Чтобы отобразить настраиваемое название без отображаемого имени приложения, необходимо заменить строку заголовка по умолчанию, как показано в разделе полной настройки .
В этом примере показано, как получить экземпляр ApplicationViewTitleBar и задать его свойства цвета.
Этот код можно поместить в метод OnLaunched приложения (App.xaml.cs), после вызова Window.Activate или на первой странице приложения.
// using Windows.UI;
// using Windows.UI.ViewManagement;
var titleBar = ApplicationView.GetForCurrentView().TitleBar;
// Set active window colors
titleBar.ForegroundColor = Colors.White;
titleBar.BackgroundColor = Colors.Green;
titleBar.ButtonForegroundColor = Colors.White;
titleBar.ButtonBackgroundColor = Colors.SeaGreen;
titleBar.ButtonHoverForegroundColor = Colors.White;
titleBar.ButtonHoverBackgroundColor = Colors.DarkSeaGreen;
titleBar.ButtonPressedForegroundColor = Colors.Gray;
titleBar.ButtonPressedBackgroundColor = Colors.LightGreen;
// Set inactive window colors
titleBar.InactiveForegroundColor = Colors.Gainsboro;
titleBar.InactiveBackgroundColor = Colors.SeaGreen;
titleBar.ButtonInactiveForegroundColor = Colors.Gainsboro;
titleBar.ButtonInactiveBackgroundColor = Colors.SeaGreen;
При настройке цветов строки заголовка следует учитывать несколько действий.
null
сброса его на системный цвет по умолчанию.Windows предоставляет пользователю возможность применить выбранный цвет акцента к строке заголовка. Если вы задаете любой цвет строки заголовка, рекомендуется явно задать все цвета. Это гарантирует отсутствие непреднамеренных сочетаний цветов из-за пользовательских параметров цвета.
При выборе полной настройки строки заголовка клиентская область приложения расширяется, чтобы охватывать все окно, включая область заголовка. Вы несете ответственность за рисование и обработку входных данных для всего окна, кроме кнопок заголовка, которые по-прежнему предоставляются окном.
Чтобы скрыть строку заголовка по умолчанию и расширить содержимое в области заголовка, задайте для свойства ExtendViewIntoTitleBar значение true
. Это свойство можно задать в методе приложения OnLaunched
(App.xaml.cs) или на первой странице приложения.
Совет
Ознакомьтесь с разделом "Полный пример настройки", чтобы просмотреть весь код одновременно.
В этом примере показано, как получить CoreApplicationViewTitleBar и задать для свойства ExtendViewIntoTitleBar значение true
.
using Windows.ApplicationModel.Core;
public MainPage()
{
this.InitializeComponent();
// Hide default title bar.
var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
coreTitleBar.ExtendViewIntoTitleBar = true;
}
Совет
Этот параметр сохраняется при закрытии и перезапуске приложения. В Visual Studio, если задано ExtendViewIntoTitleBar
true
значение , а затем требуется вернуться к умолчанию, необходимо явно задать его false
и запустить приложение, чтобы перезаписать сохраненный параметр.
Когда приложение распространяется на область заголовков, вы отвечаете за определение пользовательского интерфейса и управление ими для строки заголовка. Обычно это включает в себя, как минимум, указание текста заголовка и области перетаскивания. Область перетаскивания в строке заголовка определяет, где пользователь может щелкнуть и перетащить его, чтобы переместить окно вокруг. Кроме того, пользователь может щелкнуть правой кнопкой мыши, чтобы отобразить системное меню.
Дополнительные сведения о допустимом содержимом строки заголовка и рекомендуемых шаблонах пользовательского интерфейса см. в разделе "Конструктор заголовков".
Область перетаскивания указывается путем вызова метода Window.SetTitleBar и передачи в UIElement , определяющего область перетаскивания. (Обычно это UIElement
панель, содержащая другие элементы.) Свойство ExtendViewIntoTitleBar
должно иметь true
значение, чтобы вызов SetTitleBar
не влиял.
Вот как задать Grid
содержимое в качестве области перетаскиваемой строки заголовка. Этот код передается в XAML и коде для первой страницы приложения.
<Grid x:Name="AppTitleBar" Background="Transparent">
<!-- Width of the padding columns is set in LayoutMetricsChanged handler. -->
<!-- Using padding columns instead of Margin ensures that the background
paints the area under the caption control buttons (for transparent buttons). -->
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
<ColumnDefinition/>
<ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
</Grid.ColumnDefinitions>
<Image Source="Assets/WindowIcon.png"
Grid.Column="1"
HorizontalAlignment="Left"
Width="16" Height="16"
Margin="8,0,0,0"/>
<TextBlock x:Name="AppTitleTextBlock"
Text="App title"
Style="{StaticResource CaptionTextBlockStyle}"
Grid.Column="1"
VerticalAlignment="Center"
Margin="28,0,0,0"/>
</Grid>
public MainPage()
{
this.InitializeComponent();
var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
coreTitleBar.ExtendViewIntoTitleBar = true;
// Set XAML element as a drag region.
Window.Current.SetTitleBar(AppTitleBar);
}
По умолчанию в строке заголовка системы отображается отображаемое имя приложения в качестве заголовка окна. Отображаемое имя задается в файле Package.appxmanifest. Это значение можно получить и использовать в пользовательской строке заголовка, как показано ниже.
AppTitleTextBlock.Text = AppInfo.Current.DisplayInfo.DisplayName;
Важно!
Указанная область перетаскивания должна быть проверена. По умолчанию некоторые элементы пользовательского интерфейса, например Grid
, не участвуют в тестировании попаданий, если у них нет фонового набора. Это означает, что для некоторых элементов может потребоваться задать прозрачную фоновую кисть. Дополнительные сведения см. в примечаниях VisualTreeHelper.FindElementsInHostCoordinates.
Например, если вы определяете сетку в качестве области перетаскивания, задайте Background="Transparent"
для перетаскивания ее.
Эта сетка не перетаскивается (но видимые элементы в ней): <Grid x:Name="AppTitleBar">
Эта сетка выглядит так же, но вся сетка перетаскивается: <Grid x:Name="AppTitleBar" Background="Transparent">
Интерактивные элементы управления, такие как кнопки, меню или поле поиска, можно разместить в верхней части приложения, чтобы они отображались в строке заголовка. Однако существует несколько правил, которые необходимо соблюдать, чтобы интерактивные элементы получали входные данные пользователей, позволяя пользователям перемещать окно вокруг.
SetTitleBar
в UIElement. После передачи элемента SetTitleBar
в систему система обрабатывает его как строку заголовка системы и обрабатывает все входные данные указателя на этот элемент.Здесь элемент AutoSuggestBox имеет более высокий порядок z, чемAppTitleBar
, поэтому он получает входные данные пользователя.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="48"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid x:Name="AppTitleBar" Background="Transparent">
<!-- Width of the padding columns is set in LayoutMetricsChanged handler. -->
<!-- Using padding columns instead of Margin ensures that the background
paints the area under the caption control buttons (for transparent buttons). -->
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
<ColumnDefinition/>
<ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
</Grid.ColumnDefinitions>
<Image Source="Assets/WindowIcon.png"
Grid.Column="1"
HorizontalAlignment="Left"
Width="16" Height="16"
Margin="8,0,0,0"/>
<TextBlock x:Name="AppTitleTextBlock"
Text="App title"
Style="{StaticResource CaptionTextBlockStyle}"
Grid.Column="1"
VerticalAlignment="Center"
Margin="28,0,0,0"/>
</Grid>
<!-- This control has a higher z-order than AppTitleBar,
so it receives user input. -->
<AutoSuggestBox QueryIcon="Find"
PlaceholderText="Search"
HorizontalAlignment="Center"
Width="260" Height="32"/>
</Grid>
Система резервирует левый или правый верхний угол окна приложения для кнопок заголовка системы (свернуть, развернуть или восстановить, закрыть). Система сохраняет контроль над областью кнопки заголовка, чтобы гарантировать, что минимальные функциональные возможности предоставляются для перетаскивания, минимизации, максимизации и закрытия окна. Система рисует кнопку "Закрыть" в правом верхнем углу для языков слева направо и в левом верхнем углу для языков справа налево.
Содержимое можно нарисовать под областью управления заголовками, например фон приложения, но не следует помещать пользовательский интерфейс, с которым пользователь сможет взаимодействовать. Он не получает никаких входных данных, так как входные данные для элементов управления заголовками обрабатываются системой.
В этих строках из предыдущего примера показаны столбцы заполнения в XAML, определяющие строку заголовка. Использование столбцов заливки вместо полей гарантирует, что фон закрашивает область под кнопками элемента управления заголовком (для прозрачных кнопок). Использование столбцов с заполнением вправо и влево гарантирует правильность работы строки заголовка в макетах справа налево и слева направо.
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
<ColumnDefinition/>
<ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
</Grid.ColumnDefinitions>
Измерения и положение области управления субтитрами передаются классом CoreApplicationViewTitleBar , чтобы вы могли учесть его в макете пользовательского интерфейса строки заголовка. Ширина зарезервированной области на каждой стороне определяется свойствами SystemOverlayLeftInset или SystemOverlayRightInset, а ее высота определяется свойством Height.
Событие LayoutMetricsChanged можно обрабатывать для реагирования на изменения размера кнопок заголовка. Например, это может произойти, если макет приложения изменяется слева направо налево. Обработайте это событие, чтобы проверить и обновить расположение элементов пользовательского интерфейса, зависящих от размера строки заголовка.
В этом примере показано, как настроить макет строки заголовка для учета изменений в метрике заголовка. AppTitleBar
, LeftPaddingColumn
и RightPaddingColumn
объявлены в XAML, показанном ранее.
private void CoreTitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
// Get the size of the caption controls and set padding.
LeftPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayLeftInset);
RightPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayRightInset);
}
Когда вы расширяете содержимое приложения в области заголовков, вы можете сделать фон кнопок заголовка прозрачным, чтобы разрешить фоновому просмотру приложения. Обычно фон устанавливается на Colors.Transparent для полной прозрачности. Для частичной прозрачности задайте альфа-канал для цвета , для которого задано свойство.
Эти свойства строки заголовка могут быть прозрачными:
Все остальные свойства цвета будут игнорировать альфа-канал. Если ExtendViewIntoTitleBar
задано значение false
, альфа-канал всегда игнорируется для всех ApplicationViewTitleBar
свойств цвета.
Цвет фона кнопки не применяется к наведении указателя мыши на кнопку "Закрыть" и нажатием состояний. Кнопка закрытия всегда использует системный цвет для этих состояний.
Совет
Мика является восхитительным материалом , который помогает отличить окно, которое находится в фокусе. Мы рекомендуем использовать его в качестве фона для долгоживущие окна в Windows 11. Если вы применили Мику в клиентской области окна, вы можете расширить его в области заголовка и сделать кнопки подписи прозрачными для мики, чтобы показать. Дополнительные сведения см . в материале Mica.
Вы должны сделать его очевидным, если окно активно или неактивно. Как минимум, необходимо изменить цвет текста, значков и кнопок в строке заголовка.
Обработайте событие CoreWindow.Activated, чтобы определить состояние активации окна и обновить пользовательский интерфейс строки заголовка по мере необходимости.
public MainPage()
{
...
Window.Current.CoreWindow.Activated += CoreWindow_Activated;
}
private void CoreWindow_Activated(CoreWindow sender, WindowActivatedEventArgs args)
{
UISettings settings = new UISettings();
if (args.WindowActivationState == CoreWindowActivationState.Deactivated)
{
AppTitleTextBlock.Foreground =
new SolidColorBrush(settings.UIElementColor(UIElementType.GrayText));
}
else
{
AppTitleTextBlock.Foreground =
new SolidColorBrush(settings.UIElementColor(UIElementType.WindowText));
}
}
Вы можете вызвать SetTitleBar , чтобы переключиться на новый элемент строки заголовка во время работы приложения. Вы также можете передать null
в качестве параметра и SetTitleBar
задать ExtendViewIntoTitleBar , чтобы false
вернуться к строке заголовка системы по умолчанию.
Если в приложение добавлена поддержка полноэкранных или компактных режимов наложения , может потребоваться внести изменения в строку заголовка, когда приложение переключается между этими режимами.
Когда приложение работает в полноэкранном или планшетном режиме (только Windows 10), система скрывает кнопки управления заголовками и заголовками. Однако пользователь может вызвать строку заголовка, чтобы она отображалась как наложение на пользовательский интерфейс приложения.
Вы можете обрабатывать событие CoreApplicationViewTitleBar.IsVisibleChanged , чтобы получать уведомления, когда строка заголовка скрыта или вызвана, а также отображать или скрывать содержимое настраиваемой строки заголовка по мере необходимости.
В этом примере показано, как обрабатывать IsVisibleChanged
событие для отображения и скрытия AppTitleBar
элемента из предыдущих примеров.
public MainPage()
{
this.InitializeComponent();
var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
// Register a handler for when the title bar visibility changes.
// For example, when the title bar is invoked in full screen mode.
coreTitleBar.IsVisibleChanged += CoreTitleBar_IsVisibleChanged;
}
private void CoreTitleBar_IsVisibleChanged(CoreApplicationViewTitleBar sender, object args)
{
if (sender.IsVisible)
{
AppTitleBar.Visibility = Visibility.Visible;
}
else
{
AppTitleBar.Visibility = Visibility.Collapsed;
}
}
Примечание
Полноэкранный режим можно ввести только в том случае, если оно поддерживается приложением. Дополнительные сведения см. в applicationView.IsFullScreenMode . Режим планшета (только Для Windows 10) — это вариант пользователя в Windows 10 на поддерживаемом оборудовании, поэтому пользователь может выбрать запуск любого приложения в режиме планшета.
В этом примере показан весь код, описанный в разделе полной настройки.
<Page
x:Class="WinUI2_ExtendedTitleBar.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:WinUI2_ExtendedTitleBar"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
muxc:BackdropMaterial.ApplyToRootOrPageBackground="True">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="48"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid x:Name="AppTitleBar" Background="Transparent">
<!-- Width of the padding columns is set in LayoutMetricsChanged handler. -->
<!-- Using padding columns instead of Margin ensures that the background
paints the area under the caption control buttons (for transparent buttons). -->
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
<ColumnDefinition/>
<ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
</Grid.ColumnDefinitions>
<Image Source="Assets/WindowIcon.png"
Grid.Column="1"
HorizontalAlignment="Left"
Width="16" Height="16"
Margin="8,0,0,0"/>
<TextBlock x:Name="AppTitleTextBlock"
Text="App title"
Style="{StaticResource CaptionTextBlockStyle}"
Grid.Column="1"
VerticalAlignment="Center"
Margin="28,0,0,0"/>
</Grid>
<!-- This control has a higher z-order than AppTitleBar,
so it receives user input. -->
<AutoSuggestBox QueryIcon="Find"
PlaceholderText="Search"
HorizontalAlignment="Center"
Width="260" Height="32"/>
<muxc:NavigationView Grid.Row="1"
IsBackButtonVisible="Collapsed"
IsSettingsVisible="False">
<StackPanel>
<TextBlock Text="Content"
Style="{ThemeResource TitleTextBlockStyle}"
Margin="12,0,0,0"/>
</StackPanel>
</muxc:NavigationView>
</Grid>
</Page>
public MainPage()
{
this.InitializeComponent();
// Hide default title bar.
CoreApplicationViewTitleBar coreTitleBar =
CoreApplication.GetCurrentView().TitleBar;
coreTitleBar.ExtendViewIntoTitleBar = true;
// Set caption buttons background to transparent.
ApplicationViewTitleBar titleBar =
ApplicationView.GetForCurrentView().TitleBar;
titleBar.ButtonBackgroundColor = Colors.Transparent;
// Set XAML element as a drag region.
Window.Current.SetTitleBar(AppTitleBar);
// Register a handler for when the size of the overlaid caption control changes.
coreTitleBar.LayoutMetricsChanged += CoreTitleBar_LayoutMetricsChanged;
// Register a handler for when the title bar visibility changes.
// For example, when the title bar is invoked in full screen mode.
coreTitleBar.IsVisibleChanged += CoreTitleBar_IsVisibleChanged;
// Register a handler for when the window activation changes.
Window.Current.CoreWindow.Activated += CoreWindow_Activated;
}
private void CoreTitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
// Get the size of the caption controls and set padding.
LeftPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayLeftInset);
RightPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayRightInset);
}
private void CoreTitleBar_IsVisibleChanged(CoreApplicationViewTitleBar sender, object args)
{
if (sender.IsVisible)
{
AppTitleBar.Visibility = Visibility.Visible;
}
else
{
AppTitleBar.Visibility = Visibility.Collapsed;
}
}
private void CoreWindow_Activated(CoreWindow sender, WindowActivatedEventArgs args)
{
UISettings settings = new UISettings();
if (args.WindowActivationState == CoreWindowActivationState.Deactivated)
{
AppTitleTextBlock.Foreground =
new SolidColorBrush(settings.UIElementColor(UIElementType.GrayText));
}
else
{
AppTitleTextBlock.Foreground =
new SolidColorBrush(settings.UIElementColor(UIElementType.WindowText));
}
}
Обучение
Модуль
Настройка макета на страницах .NET MAUI XAML - Training
Создание согласованного пользовательского интерфейса на различных устройствах с помощью StackLayout и Grid.