Поделиться через

Строка заголовка

Элемент управления TitleBar предоставляет упрощенный способ создания настраиваемой строки заголовка для приложения. Строка заголовка является основным компонентом пользовательского интерфейса приложения Windows, который определяет приложение с помощью значка и заголовка, содержит кнопки заголовка системы, позволяющие пользователю закрыть, развернуть, свести к минимуму и восстановить окно, и позволит пользователю перетаскивать окно на экране.

Вы можете использовать настраиваемую строку заголовка, чтобы лучше интегрировать область заголовка с пользовательским интерфейсом приложения. Строку заголовка можно настроить, чтобы она соответствовала визуальному стилю приложения, используя тематику Mica. Она может включать другие важные сведения, такие как название документа или текущее состояние (например, "Редактирование", "Просмотр", и т. д.). Он также может размещать другие элементы управления WinUI, такие как AutoSuggestBox и PersonPicture, предоставляя единый пользовательский интерфейс для вашего приложения.

Снимок экрана: окно приложения с настраиваемой строкой заголовка

Это правильный контроль?

Используйте элемент управления TitleBar, если вы хотите интегрировать область заголовка с пользовательским интерфейсом приложения с помощью настроек, таких как субтитры, тематические элементы Mica и интеграции с элементами управления WinUI.

Анатомия

По умолчанию в панели заголовка отображаются только кнопки управления системой. Другие части строки заголовка отображаются или скрыты в зависимости от параметров связанного свойства.

Строка заголовка разделена на следующие области:

Снимок экрана, показывающий части элемента управления строкой заголовка.

  • Кнопка назад:IsBackButtonEnabled, IsBackButtonVisible, BackRequested — встроенная кнопка назад для навигации.
  • Кнопка переключения области:IsPaneToggleButtonVisible и PaneToggleRequested предназначена для использования в сочетании с элементом управления NavigationView.
  • Левый заголовок:LeftHeader
  • Значок:IconSource
  • Заголовок:Заголовок
  • Субтитры:Субтитры
  • Content:Content
  • Правый заголовок:RightHeader
  • Минимальная область перетаскивания: Эта область зарезервирована рядом с системными кнопками заголовка, чтобы пользователь всегда мог захватить окно для его перемещения.
  • Кнопки заголовка системы: Эти кнопки не являются частью элемента управления TitleBar. Он просто выделяет пространство, в котором отображаются кнопки заголовка в зависимости от параметров RTL или LTR. Кнопки заголовка и настройки обрабатываются AppWindowTitleBar.

Макет изменяется, когда FlowDirection имеет значение RightToLeft.

Создание строки заголовка

Откройте приложение коллекции WinUI 3 и просмотрите строку TitleBar в действии

Приложение Галерея WinUI 3 включает интерактивные примеры большинства элементов управления, особенностей и возможностей WinUI 3. Получение приложения из Microsoft Store или получение исходного кода на GitHub

В этом примере создается простая строка заголовка, которая заменяет строку заголовка системы. Он имеет заголовок, значок и тематику Mica.

<Window
    ...  >
    <Window.SystemBackdrop>
        <MicaBackdrop Kind="Base"/>
    </Window.SystemBackdrop>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <TitleBar x:Name="SimpleTitleBar"
                  Title="My App">
            <TitleBar.IconSource>
                <FontIconSource Glyph="&#xF4AA;"/>
            </TitleBar.IconSource>
        </TitleBar>

        <!-- App content -->
        <Frame x:Name="RootFrame" Grid.Row="1"/>
    </Grid>
</Window>

public MainWindow()
{
    this.InitializeComponent();

    // Hides the default system title bar.
    ExtendsContentIntoTitleBar = true;
    // Replace system title bar with the WinUI TitleBar control. 
    SetTitleBar(SimpleTitleBar); 
}

Интеграция с NavigationView

В представлении навигации есть встроенная кнопка "Назад" и кнопка переключателя области. Руководство по проектированию Fluent рекомендует поместить эти элементы управления в строку заголовка при использовании настраиваемой строки заголовка.

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

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <TitleBar Title="My App"
              IsBackButtonVisible="True"
              IsBackButtonEnabled="{x:Bind RootFrame.CanGoBack, Mode=OneWay}"
              BackRequested="TitleBar_BackRequested"
              IsPaneToggleButtonVisible="True"
              PaneToggleRequested="TitleBar_PaneToggleRequested">
    </TitleBar>

    <NavigationView x:Name="RootNavigationView" Grid.Row="1"
                    IsBackButtonVisible="Collapsed"
                    IsPaneToggleButtonVisible="False">
        <Frame x:Name="RootFrame" />
    </NavigationView>
</Grid>

private void TitleBar_BackRequested(TitleBar sender, object args)
{
    if (RootFrame.CanGoBack)
    {
        RootFrame.GoBack();
    }
}

private void TitleBar_PaneToggleRequested(TitleBar sender, object args)
{
    RootNavigationView.IsPaneOpen = !RootNavigationView.IsPaneOpen;
}

UWP и WinUI 2

Элемент управления TitleBar недоступен для UWP и WinUI 2. Вместо этого см. раздел "Настройка строки заголовка" (приложения UWP).

  • Last updated on