Pasek tytułu

Przeglądanie przykładu

Interfejs użytkownika aplikacji wieloplatformowej platformy .NET (.NET MAUI) TitleBar to widok, który umożliwia dodanie niestandardowego paska tytułu do elementu Window w celu dopasowania do osobowości aplikacji. Na poniższym diagramie przedstawiono składniki elementu TitleBar:

Ważne

TitleBar jest dostępna tylko w systemie Windows. Obsługa programu Mac Catalyst zostanie dodana w przyszłej wersji.

TitleBar definiuje następujące właściwości:

• Content, typu IView, który określa kontrolkę zawartości, która jest wyśrodkowana na pasku tytułu, i jest przydzielana przestrzeń między zawartością prowadzącą i końcową.
• DefaultTemplate, typu ControlTemplate, który reprezentuje domyślny szablon paska tytułu.
• ForegroundColor, typu Color, który określa kolor pierwszego planu paska tytułu i jest używany jako kolor tytułu i tekstu podtytułu.
• Icon, typu ImageSource, który reprezentuje opcjonalny obraz ikony 16x16px dla paska tytułu.
• LeadingContent, typu IView, który określa kontrolkę zawartości, która jest zgodna z ikoną.
• PassthroughElements, typu IList<IView>, który reprezentuje listę elementów, które powinny uniemożliwić przeciąganie w regionie paska tytułu, a zamiast tego bezpośrednio obsłużyć dane wejściowe.
• Subtitle, typu string, który określa tekst podtytułu paska tytułu. Zazwyczaj są to dodatkowe informacje o aplikacji lub oknie.
• Title, typu string, który określa tekst tytułu paska tytułu. Zazwyczaj jest to nazwa aplikacji lub wskazuje przeznaczenie okna.
• TrailingContent, typu IView, który określa kontrolkę zgodną z kontrolką Content .

Te właściwości, z wyjątkiem DefaultTemplate i PassthroughElements, są wspierane przez BindableProperty obiekty, co oznacza, że można je stylizować i być obiektem docelowym powiązań danych.

Ważne

Widoki ustawione jako wartość Contentwłaściwości , LeadingContenti TrailingContent będą blokować wszystkie dane wejściowe w regionie paska tytułu i będą bezpośrednio obsługiwać dane wejściowe.

Wysokość standardowego paska tytułu wynosi 32 pikseli, ale można ustawić na większą wartość. Aby uzyskać informacje na temat projektowania paska tytułu w systemie Windows, zobacz Pasek tytułu.

Tworzenie paska tytułu

Aby dodać pasek tytułu do okna, ustaw Window.TitleBar właściwość na TitleBar obiekt.

W poniższym przykładzie XAML pokazano, jak dodać element TitleBar do elementu 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>

Element TitleBar można również zdefiniować w języku C# i dodać do elementu Window:

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

Element A TitleBar jest wysoce dostosowywalny za pomocą właściwości Content, LeadingContenti 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>

Poniższy zrzut ekranu przedstawia wynikowy wygląd:

Uwaga

Pasek tytułu można ukryć, ustawiając IsVisible właściwość , co powoduje wyświetlanie zawartości okna w regionie paska tytułu.

Stany wizualizacji paska tytułu

TitleBardefiniuje następujące stany wizualizacji, których można użyć do zainicjowania zmiany wizualizacji na :TitleBar

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

W poniższym przykładzie XAML pokazano, jak zdefiniować stan wizualizacji dla TitleBarTitleActive stanów i 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>

W tym przykładzie stan wizualizacji ustawia BackgroundColor właściwości i ForegroundColor na określone kolory na podstawie tego, czy pasek tytułu jest aktywny, czy nieaktywny.

Aby uzyskać więcej informacji na temat stanów wizualizacji, zobacz Visual states (Stany wizualizacji).