Freigeben über

Titelleiste

Das TitleBar-Steuerelement bietet eine vereinfachte Möglichkeit zum Erstellen einer benutzerdefinierten Titelleiste für Ihre App. Die Titelleiste ist eine grundlegende Komponente der Benutzeroberfläche einer Windows-App, die die App über das Symbol und den Titel identifiziert, die Systembeschriftungsschaltflächen enthält, mit denen ein Benutzer das Fenster schließen, maximieren, minimieren und wiederherstellen kann und ein Benutzer das Fenster über den Bildschirm ziehen kann.

Sie können eine benutzerdefinierte Titelleiste verwenden, um den Titelleistenbereich besser in die App-UI zu integrieren. Die Titelleiste kann so angepasst werden, dass sie dem visuellen Stil der App mit dem Mica-Design entspricht. Sie kann andere relevante Informationen enthalten, z. B. einen Dokumenttitel oder den aktuellen Status (z. B. "Bearbeiten", "Anzeigen" usw.). Sie kann auch andere WinUI-Steuerelemente hosten, z. B. AutoSuggestBox und PersonPicture, die eine einheitliche Benutzeroberfläche für Ihre App bieten.

Screenshot eines App-Fensters mit einer benutzerdefinierten Titelleiste

Ist dies das richtige Steuerelement?

Verwenden Sie das TitleBar-Steuerelement, wenn Sie den Titelleistenbereich mithilfe von Anpassungen wie Untertiteln, Mica-Design und Integrationen mit WinUI-Steuerelementen in die App-Benutzeroberfläche integrieren möchten.

Anatomie

Standardmäßig zeigt die Titelleiste nur die Beschriftungsschaltflächen des Systems an. Andere Teile der Titelleiste werden je nach den zugehörigen Eigenschafteneinstellungen angezeigt oder ausgeblendet.

Die Titelleiste ist in diese Bereiche unterteilt:

Screenshot der Teile eines Titelleisten-Steuerelements.

  • Zurück-Schaltfläche:IsBackButtonEnabled, IsBackButtonVisible, BackRequested – Eine integrierte Zurück-Schaltfläche für die Navigation.
  • Bereich-Umschaltfläche:IsPaneToggleButtonVisible, PaneToggleRequested – Diese Schaltfläche ist zur Verwendung in Verbindung mit dem NavigationView-Control gedacht.
  • Linke Kopfzeile:LeftHeader
  • Icon:IconSource
  • Titel:Titel
  • Untertitel:Untertitel
  • Inhalt:Inhalt
  • Rechte Kopfzeile:RightHeader
  • Min drag region: Dieser Bereich ist neben den Beschriftungsschaltflächen des Systems reserviert, sodass der Benutzer immer einen Ort zum Ziehen des Fensters hat.
  • Schaltflächen für Systembeschriftung: Diese Schaltflächen sind nicht Teil des Steuerelements der Titelleiste – es weist einfach Platz dafür zu, wo die Beschriftungs-Schaltflächen angezeigt werden, je nach RTL- oder LTR-Einstellungen. Beschriftungsschaltflächen und Anpassungen werden von der AppWindowTitleBar behandelt.

Das Layout wird invertiert, wenn die FlowDirectionRightToLeftist.

Erstellen einer Titelleiste

Öffnen Sie die WinUI 3 Gallery-App, und sehen Sie die Titelleiste in Aktion.

Die WinUI 3 Gallery-App enthält interaktive Beispiele für die meisten WinUI 3-Steuerelemente, -Features und -Funktionen. Laden Sie die App aus dem Microsoft Store herunter, oder rufen Sie den Quellcode auf GitHub ab

In diesem Beispiel wird eine einfache Titelleiste erstellt, die die Systemtitelleiste ersetzt. Es hat einen Titel, ein Symbol und ein Mica-Design.

<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); 
}

Integration in NavigationView

Die Navigationsansicht verfügt über einen integrierten Zurück-Button und einen Umschalt-Button für das Fenster. Fluent Designleitfaden empfiehlt, dass diese Steuerelemente in der Titelleiste platziert werden, wenn eine benutzerdefinierte Titelleiste verwendet wird.

In diesem Beispiel wird veranschaulicht, wie Sie das TitleBar-Steuerelement mit dem NavigationView-Steuerelement integrieren, indem Sie die Zurück-Schaltfläche und die Bereichsumschaltfläche in der Navigationsansicht ausblenden und stattdessen die entsprechenden Schaltflächen in der Titelleiste verwenden.

<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 und WinUI 2

Das TitleBar-Steuerelement ist für UWP und WinUI 2 nicht verfügbar. Lesen Sie stattdessen die Anpassung der Titelleiste (UWP-Apps).