共用方式為

標題列

  • 發行項

流覽範例。 流覽範例

.NET 多平臺應用程式 UI （.NET MAUI） TitleBar 是一種檢視，可讓您將自定義標題列新增至 Window，以符合您應用程式的個性。 下圖顯示 的 TitleBar元件：

.NET MAUI 標題欄概觀。

重要

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 控件。

除了和 DefaultTemplate之外，PassthroughElements這些屬性是由 BindableProperty 物件所支援，這表示可以設定樣式，並成為數據系結的目標。

重要

設定為、 Content和 LeadingContent 屬性值的TrailingContent檢視會封鎖標題列區域的所有輸入，並直接處理輸入。

標準標題欄高度為 32px，但可以設定為較大的值。 如需在 Windows 上設計標題列的相關信息，請參閱 標題列。

建立 TitleBar

若要將標題列新增至視窗，請將 Window.TitleBar 屬性設定為 TitleBar 物件。

下列 XAML 範例示範如何將 新增 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>

TitleBar也可以在 C# 中定義 ，並將 新增至 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>

下列螢幕快照顯示產生的外觀：

.NET MAUI 標題欄螢幕快照。

注意

您可以藉由設定 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為特定色彩。

如需視覺狀態的詳細資訊，請參閱 視覺狀態。