TitleBar

Durchsuchen Sie das Beispiel

Die .NET Multi-Platform App UI (.NET MAUI) TitleBar ist eine Ansicht, mit der Sie einer benutzerdefinierten Titelleiste eine Benutzerdefinierte Titelleiste Window hinzufügen können, um der Persönlichkeit Ihrer App zu entsprechen. Das folgende Diagramm zeigt die Komponenten der TitleBar:

Wichtig

TitleBar ist nur unter Windows verfügbar. Die Mac Catalyst-Unterstützung wird in einer zukünftigen Version hinzugefügt.

TitleBar definiert die folgenden Eigenschaften:

• Content, vom Typ IView, der das Steuerelement für den Inhalt angibt, der in der Titelleiste zentriert ist und dem Abstand zwischen dem führenden und dem nachfolgenden Inhalt zugewiesen wird.
• DefaultTemplate, vom Typ ControlTemplate, der die Standardvorlage für die Titelleiste darstellt.
• ForegroundColor, vom Typ Color, der die Vordergrundfarbe der Titelleiste angibt und als Farbe für den Titel- und Untertiteltext verwendet wird.
• Icon, vom Typ ImageSource, der ein optionales Symbolbild von 16x16px für die Titelleiste darstellt.
• LeadingContent, vom Typ IView, der das Steuerelement für den Inhalt angibt, der auf das Symbol folgt.
• PassthroughElements, vom Typ IList<IView>, der eine Liste von Elementen darstellt, die das Ziehen im Titelleistenbereich verhindern und stattdessen die Eingabe direkt behandeln sollen.
• Subtitle, vom Typ string, der den Untertiteltext der Titelleiste angibt. Dies sind in der Regel sekundäre Informationen zur App oder zum Fenster.
• Title, vom Typ string, der den Titeltext der Titelleiste angibt. Dies ist in der Regel der Name der App oder gibt den Zweck des Fensters an.
• TrailingContent, vom Typ IView, der das Steuerelement angibt, das dem Content Steuerelement folgt.

Diese Eigenschaften, mit Ausnahme von DefaultTemplate und PassthroughElements, werden von BindableProperty Objekten unterstützt, was bedeutet, dass sie formatiert werden können und das Ziel von Datenbindungen sein können.

Wichtig

Ansichten, die als Wert des Bereichs LeadingContentder ContentTitelleiste festgelegt sind, und TrailingContent Eigenschaften blockieren alle Eingaben in den Titelleistenbereich und behandeln die Eingabe direkt.

Die Standardhöhe der Titelleiste beträgt 32 Px, kann jedoch auf einen größeren Wert festgelegt werden. Informationen zum Entwerfen der Titelleiste unter Windows finden Sie unter Titelleiste.

Erstellen einer Titelleiste

Wenn Sie einem Fenster eine Titelleiste hinzufügen möchten, legen Sie die Window.TitleBar Eigenschaft auf ein TitleBar Objekt fest.

Das folgende XAML-Beispiel zeigt, wie Sie einer 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>

A TitleBar kann auch in C# definiert und zu einem Windowhinzugefügt werden:

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

Eine TitleBar ist durch ihre Eigenschaften Content, LeadingContent und TrailingContent in hohem Maße anpassbar:

<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>

Der folgende Screenshot zeigt das Ergebnis :

Hinweis

Die Titelleiste kann durch Festlegen der IsVisible Eigenschaft ausgeblendet werden, wodurch der Fensterinhalt im Titelleistenbereich angezeigt wird.

Visuelle Zustände der Titelleiste

TitleBar definiert die folgenden visuellen Zustände, die verwendet werden können, um eine visuelle Änderung an der TitleBar:

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

Das folgende XAML-Beispiel zeigt, wie man einen visuellen Zustand für die Zustände TitleBarTitleActive und TitleBarTitleInactive definiert:

<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>

In diesem Beispiel legt der visuelle Zustand die und ForegroundColor die BackgroundColor Eigenschaften auf bestimmte Farben fest, je nachdem, ob die Titelleiste aktiv oder inaktiv ist.

Weitere Informationen zu visuellen Zuständen finden Sie unter Visuelle Zustände.