标题栏

TitleBar 控件提供了为应用创建自定义标题栏的简化方法。 标题栏是 Windows 应用的用户界面的基本组件，它通过其图标和标题标识应用，并包含系统标题按钮，允许用户关闭、最大化、最小化和还原窗口，并允许用户在屏幕上拖动窗口。

可以使用自定义标题栏更好地将标题栏区域与应用 UI 集成。 可以使用 Mica 主题设置自定义标题栏以匹配应用的视觉样式。 它可以包括其他相关信息，例如文档标题或当前状态（例如“编辑”、“查看”等）。 它还可以托管其他 WinUI 控件，例如 AutoSuggestBox 和 PersonPicture，为应用提供一个凝聚力的用户体验。

这是正确的控制吗？

如果要使用字幕、 Mica 主题和 WinUI 控件等自定义项将标题栏区域与应用 UI 集成，请使用 TitleBar 控件。

解剖学

默认情况下，标题栏仅显示系统标题按钮。 标题栏的其他部分根据关联的属性设置显示或隐藏。

标题栏划分为以下区域：

• 后退按钮：IsBackButtonEnabled、 IsBackButtonVisible、 BackRequested - 用于导航的内置后退按钮。
• 窗格切换按钮：IsPaneToggleButtonVisible、 PaneToggleRequested - 此按钮旨在与 NavigationView 控件结合使用。
• 左标题：LeftHeader
• 图标：IconSource
• 标题：标题
• 副标题：副标题
• 内容：内容内容
• 右标题：RightHeader
• 最小拖动区域： 此区域保留在系统标题按钮旁边，以便用户始终有一个用于抓取窗口以供拖动的位置。
• 系统标题按钮： 这些按钮不是 TitleBar 控件的一部分- 它只是分配标题按钮显示的空间，具体取决于 RTL 或 LTR 设置。 标题按钮和自定义由 AppWindowTitleBar 处理。

当 FlowDirection 为 RightToLeft 时，布局将相反。

创建标题栏

• 重要 API：TitleBar 类、 Title 属性

打开 WinUI 3 Gallery 应用并查看 TitleBar 的展示效果

WinUI 3 示例集应用程序包括大多数 WinUI 3 控件、特性和功能的交互式示例。 从 Microsoft 应用商店获取应用或在 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 Design 指南建议在使用自定义标题栏时将这些控件放在标题栏中。

此示例演示如何通过将后退按钮和窗格切换按钮隐藏在导航视图中并使用标题栏上的相应按钮，将 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 应用）。

相关文章

• 标题栏 （设计）
• 标题栏自定义
• 标题栏类