标题栏

浏览示例

.NET 多平台应用 UI （.NET MAUI） TitleBar 是一种视图，可用于向 Window 添加自定义标题栏，以匹配应用的个性。 下图显示了以下内容 TitleBar的组件：

重要

TitleBar 仅在 Windows 上可用。 Mac Catalyst 支持将在将来的版本中添加。

TitleBar 定义以下属性：

• Content，类型 IView，指定标题栏中居中的内容的控件，并分配前导内容和尾随内容之间的空间。
• DefaultTemplate，类型 ControlTemplate，表示标题栏的默认模板。
• ForegroundColor，类型 Color，指定标题栏的前景色，并用作标题和副标题文本的颜色。
• Icon类型 ImageSource，表示标题栏的可选 16x16px 图标图像。
• LeadingContent，类型为 IView，用于指定图标之前的内容控件。
• PassthroughElements，类型 IList<IView>，表示应阻止在标题栏区域中拖动的元素列表，而是直接处理输入。
• Subtitle，类型 string，指定标题栏的副标题文本。 这通常是有关应用或窗口的辅助信息。
• Title，类型 string，指定标题栏的标题文本。 这通常是应用的名称或指示窗口的用途。
• TrailingContent，类型 IView，指定控件后面的 Content 控件。

这些属性除外，并且DefaultTemplatePassthroughElements受BindableProperty对象支持，这意味着这些属性可以设置样式，并成为数据绑定的目标。

重要

设置为值ContentLeadingContentTrailingContent且属性将阻止标题栏区域的所有输入，并直接处理输入的视图。

标准标题栏高度为 32px，但可以设置为更大的值。 有关在 Windows 上设计标题栏的信息，请参阅 标题栏。

创建 TitleBar

若要向窗口添加标题栏，请将 Window.TitleBar 属性设置为对象 TitleBar 。

以下 XAML 示例演示如何向 a TitleBar添加以下内容Window：

<Window xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:local="clr-namespace:TitleBarDemo"
        x:Class="TitleBarDemo.MainWindow">
    ...
    <Window.TitleBar>
        <TitleBar Title="{Binding Title}"
                  Subtitle="{Binding Subtitle}"
                  IsVisible="{Binding ShowTitleBar}"
                  BackgroundColor="#512BD4"
                  ForegroundColor="White"                  
                  HeightRequest="48">
            <TitleBar.Content>
                <SearchBar Placeholder="Search"
                           PlaceholderColor="White"
                           MaximumWidthRequest="300"
                           HorizontalOptions="Fill"
                           VerticalOptions="Center" />
            </TitleBar.Content>            
        </TitleBar>
    </Window.TitleBar>
</Window>

还可以在 C# 中定义 A TitleBar 并将其添加到 ：Window

Window window = new Window
{
    TitleBar = new TitleBar
    {
        Icon = "titlebar_icon.png"
        Title = "My App",
        Subtitle = "Demo"
        Content = new SearchBar { ... }      
    }
};

TitleBar 可通过其 Content、LeadingContent 和 TrailingContent 属性进行高度自定义：

<TitleBar Title="My App"
          BackgroundColor="#512BD4"
          HeightRequest="48">
    <TitleBar.Content>
        <SearchBar Placeholder="Search"
                   MaximumWidthRequest="300"
                   HorizontalOptions="FillAndExpand"
                   VerticalOptions="Center" />
    </TitleBar.Content>
    <TitleBar.TrailingContent>
        <ImageButton HeightRequest="36"
                     WidthRequest="36"
                     BorderWidth="0"
                     Background="Transparent">
            <ImageButton.Source>
                <FontImageSource Size="16"
                                 Glyph="&#xE713;"
                                 FontFamily="SegoeMDL2"/>
            </ImageButton.Source>
        </ImageButton>
    </TitleBar.TrailingContent>
</TitleBar>

以下屏幕截图显示了结果：

注意

可以通过设置属性来 IsVisible 隐藏标题栏，这会导致窗口内容显示在标题栏区域中。

TitleBar 视觉状态

TitleBar 定义可用于启动对以下视觉对象的更改的 TitleBar视觉状态：

• IconVisible
• IconCollapsed
• TitleVisible
• TitleCollapsed
• SubtitleVisible
• SubtitleCollapsed
• LeadingContentVisible
• LeadingContentCollapsed
• ContentVisible
• ContentCollapsed
• TrailingContentVisible
• TrailingContentCollapsed
• TitleBarTitleActive
• TitleBarTitleInactive

以下 XAML 示例展示了如何为 TitleBarTitleActive 和 TitleBarTitleInactive 状态定义视觉状态：

<TitleBar ...>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroupList>
            <VisualStateGroup x:Name="TitleActiveStates">
                <VisualState x:Name="TitleBarTitleActive">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Transparent" />
                        <Setter Property="ForegroundColor" Value="Black" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="TitleBarTitleInactive">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="White" />
                        <Setter Property="ForegroundColor" Value="Gray" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </VisualStateManager.VisualStateGroups>
</TitleBar>

在此示例中，视觉状态根据标题栏是活动还是非活动状态，将 BackgroundColor 属性 ForegroundColor 设置为特定颜色。

要详细了解视觉效果状态，请参阅视觉效果状态。