Anpassen der Titelleiste

Artikel
01/15/2024

Windows bietet eine Standardtitelleiste für jedes Fenster und ermöglicht es Ihnen, sie an die Persönlichkeit Ihrer App anzupassen. Die Standardtitelleiste enthält einige Standardkomponenten und Kernfunktionen wie das Ziehen und Ändern der Größe des Fensters.

Eine Windows-App mit der Titelleiste

Im Artikel zum Entwurf der Titelleiste finden Sie Anleitungen zum Anpassen der Titelleiste Ihrer App, des zulässigen Inhalts der Titelleiste und der empfohlenen Benutzeroberflächenmuster.

Siehe Windows 11 Fluent Design-Leitfaden für die Titelleiste

Hinweis

In diesem Artikel wird gezeigt, wie Sie die Titelleiste für Apps anpassen, die UWP und WinUI 2 verwenden. Apps, die das Windows App SDK und WinUI 3 verwenden, finden Sie unter Anpassen der Titelleiste für das Windows App SDK.

Wenn Sie die Migration Ihrer UWP-App zum Windows App SDK in Betracht ziehen, lesen Sie bitte unsere Anleitung zur Migration von Fensterfunktionen. Weitere Informationen finden Sie unter Migration von Fensterfunktionen.

Gilt für: UWP/WinUI 2
Wichtige APIs: Eigenschaft ApplicationView.TitleBar, Klasse ApplicationViewTitleBar, Klasse CoreApplicationViewTitleBar

Titelleistenkomponenten

In dieser Liste werden die Komponenten der Standardtitelleiste beschrieben.

Titelleistenrechteck
Titeltext
Systemmenü: Zugriff durch Klicken auf das App-Symbol oder Klicken mit der rechten Maustaste auf die Titelleiste
Beschriftungssteuerelemente
- Schaltfläche „Minimieren“
- Schaltfläche „Maximieren/Wiederherstellen“
- Schaltfläche „Schließen“

In UWP-Anwendungen können Sie die Titelleiste mithilfe von Mitgliedern der Klassen ApplicationView und CoreApplicationView anpassen. Es gibt mehrere APIs, um die Darstellung Ihrer Titelleiste anhand der erforderlichen Anpassung schrittweise zu ändern.

Hinweis

Die Klasse Windows.UI.WindowManagement.AppWindow, die für sekundäre Fenster in UWP-Apps verwendet wird, unterstützt keine Anpassung der Titelleiste. Um die Titelleiste einer UWP-App anzupassen, die sekundäre Fenster verwendet, verwenden Sie ApplicationView, wie unter Anzeigen mehrerer Ansichten mit ApplicationView beschrieben.

Anpassen der Titelleiste

Es gibt zwei Anpassungsebenen, die Sie auf die Titelleiste anwenden können: Wenden Sie geringfügige Änderungen auf die Standardtitelleiste an, oder erweitern Sie Ihren App-Zeichenbereich auf den Titelleistenbereich und stellen vollständig benutzerdefinierte Inhalte bereit.

Einfach

Für einfache Anpassungen, z. B. das Ändern der Farbe der Titelleiste, können Sie Eigenschaften für das Titelleistenobjekt Ihres App-Fensters festlegen, um die Farben anzugeben, die Sie für Titelleistenelemente verwenden möchten. In diesem Fall behält das System die Verantwortung für alle anderen Aspekte der Titelleiste, z. B. das Zeichnen des App-Titels und das Definieren von Ziehbereichen.

Vollständig

Ihre andere Option besteht darin, die Standardtitelleiste auszublenden und durch Ihren eigenen benutzerdefinierten Inhalt zu ersetzen. Sie können beispielsweise Text, ein Suchfeld oder benutzerdefinierte Menüs im Titelleistenbereich platzieren. Sie müssen diese Option auch verwenden, um einen Material-Hintergrund wie Mica in den Titelleistenbereich zu erweitern.

Wenn Sie sich für die vollständige Anpassung entscheiden, sind Sie für das Einfügen von Inhalten im Titelleistenbereich verantwortlich, und Sie können Ihren eigenen Ziehbereich definieren. Die Beschriftungssteuerelemente (Systemschaltflächen „Schließen“, „Minimieren“ und „Maximieren“) sind weiterhin verfügbar und werden vom System verarbeitet, Elemente wie der App-Titel jedoch nicht. Sie müssen diese Elemente selbst erstellen, wenn sie von Ihrer App benötigt werden.

Einfache Anpassung

Wenn Sie nur die Farben oder das Symbol der Titelleiste anpassen möchten, können Sie Eigenschaften für das Titelleistenobjekt für Ihr App-Fenster festlegen.

Titel

Standardmäßig zeigt die Titelleiste den Anzeigenamen der App als Fenstertitel an. Der Anzeigename wird in der Datei Package.appxmanifest festgelegt.

Wenn Sie dem Titel benutzerdefinierten Text hinzufügen möchten, legen Sie die Eigenschaft ApplicationView.Title auf einen Textwert fest, wie hier gezeigt.

public MainPage()
{
    this.InitializeComponent();

    ApplicationView.GetForCurrentView().Title = "Custom text";
}

Ihr Text wird dem Fenstertitel vorangestellt, der als „Benutzerdefinierter Text - App-Anzeigename“ angezeigt wird. Um einen benutzerdefinierten Titel ohne den Anzeigenamen der App anzuzeigen, müssen Sie die Standardtitelleiste ersetzen, wie im Abschnitt Vollständige Anpassung beschrieben.

Farben

In diesem Beispiel wird gezeigt, wie Sie eine Instanz von ApplicationViewTitleBar abrufen und die Farbeigenschaften festlegen.

Dieser Code kann nach dem Aufruf von Window.Activate oder auf der ersten Seite Ihrer App in die OnLaunched-Methode Ihre App eingefügt werden (App.xaml.cs).

// using Windows.UI;
// using Windows.UI.ViewManagement;

var titleBar = ApplicationView.GetForCurrentView().TitleBar;

// Set active window colors
titleBar.ForegroundColor = Colors.White;
titleBar.BackgroundColor = Colors.Green;
titleBar.ButtonForegroundColor = Colors.White;
titleBar.ButtonBackgroundColor = Colors.SeaGreen;
titleBar.ButtonHoverForegroundColor = Colors.White;
titleBar.ButtonHoverBackgroundColor = Colors.DarkSeaGreen;
titleBar.ButtonPressedForegroundColor = Colors.Gray;
titleBar.ButtonPressedBackgroundColor = Colors.LightGreen;

// Set inactive window colors
titleBar.InactiveForegroundColor = Colors.Gainsboro;
titleBar.InactiveBackgroundColor = Colors.SeaGreen;
titleBar.ButtonInactiveForegroundColor = Colors.Gainsboro;
titleBar.ButtonInactiveBackgroundColor = Colors.SeaGreen;

Beim Festlegen von Titelleistenfarben sind einige Punkte zu beachten:

Die Hintergrundfarbe der Schaltfläche wird nicht auf die Zustände darauf zeigen und gedrückt der Schließen-Schaltfläche angewendet. Die Schaltfläche zum Schließen verwendet für diese Zustände immer die systemdefinierte Farbe.
Wenn Sie eine Farbeigenschaft auf null festlegen, wird sie auf die Standardsystemfarbe zurückgesetzt.
Sie können keine transparenten Farben festlegen. Der Alphakanal der Farbe wird ignoriert.

Windows bietet einem Benutzer die Möglichkeit, die ausgewählte Akzentfarbe auf die Titelleiste anzuwenden. Wenn Sie eine Titelleistenfarbe festlegen, empfiehlt es sich, alle Farben explizit festzulegen. Dadurch wird sichergestellt, dass aufgrund benutzerdefinierter Farbeinstellungen keine unbeabsichtigten Farbkombinationen auftreten.

Vollständige Anpassung

Wenn Sie sich für die vollständige Anpassung der Titelleiste entscheiden, wird der Clientbereich Ihrer App erweitert, um das gesamte Fenster einschließlich des Titelleistenbereichs abzudecken. Sie sind für das Zeichnen und die Eingabeverarbeitung für das gesamte Fenster mit Ausnahme der Titelleistenschaltflächen verantwortlich, die weiterhin vom Fenster bereitgestellt werden.

Um die Standardtitelleiste auszublenden und den Inhalt in den Titelleistenbereich zu erweitern, legen Sie die Eigenschaft ExtendViewIntoTitleBar auf true fest. Sie können diese Eigenschaft in der OnLaunched-Methode Ihrer App (App.xaml.cs) oder auf der ersten Seite Ihrer App festlegen.

Tipp

Im Abschnitt Beispiel für vollständige Anpassung finden Sie den gesamten Code.

In diesem Beispiel wird gezeigt, wie Sie die CoreApplicationViewTitleBar abrufen und die Eigenschaft ExtendViewIntoTitleBar auf true festlegen.

using Windows.ApplicationModel.Core;

public MainPage()
{
    this.InitializeComponent();

    // Hide default title bar.
    var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
    coreTitleBar.ExtendViewIntoTitleBar = true;
}

Tipp

Diese Einstellung wird beibehalten, wenn Ihre App geschlossen und neu gestartet wird. Wenn Sie in Visual Studio ExtendViewIntoTitleBar auf true festlegen und dann zu den Standardeinstellungen zurückkehren möchten, sollten Sie die Eigenschaft explizit auf false festlegen und Ihre App ausführen, um die beibehaltene Einstellung zu überschreiben.

Inhalt der Titelleiste und Ziehbereiche

Wenn Ihre App in den Titelleistenbereich erweitert wird, sind Sie für das Definieren und Verwalten der Benutzeroberfläche für die Titelleiste verantwortlich. Dies umfasst in der Regel mindestens die Angabe des Titeltexts und des Ziehbereichs. Der Ziehbereich der Titelleiste definiert, wo der Benutzer klicken und ziehen kann, um das Fenster zu verschieben. Außerdem kann der Benutzer mit der rechten Maustaste darauf klicken, um das Systemmenü anzuzeigen.

Weitere Informationen zu akzeptablen Titelleisteninhalten und empfohlenen Benutzeroberflächenmustern finden Sie unter Titelleistendesign.

Sie geben den Ziehbereich an, indem Sie die Methode Window.SetTitleBar aufrufen und ein UIElement übergeben, das den Ziehbereich definiert. (Das UIElement ist in der Regel ein Bereich, der andere Elemente enthält.) Die Eigenschaft ExtendViewIntoTitleBar muss auf true festgelegt werden, damit der Aufruf an SetTitleBar funktioniert.

Hier erfahren Sie, wie Sie einen Grid mit Inhalt als ziehbaren Titelleistenbereich festlegen. Dieser Code wird im XAML-Code und im CodeBehind der ersten Seite Ihrer App verwendet.

<Grid x:Name="AppTitleBar" Background="Transparent">
    <!-- Width of the padding columns is set in LayoutMetricsChanged handler. -->
    <!-- Using padding columns instead of Margin ensures that the background
         paints the area under the caption control buttons (for transparent buttons). -->
    <Grid.ColumnDefinitions>
        <ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
        <ColumnDefinition/>
        <ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
    </Grid.ColumnDefinitions>
    <Image Source="Assets/WindowIcon.png" 
           Grid.Column="1"
           HorizontalAlignment="Left"
           Width="16" Height="16"
           Margin="8,0,0,0"/>
    <TextBlock x:Name="AppTitleTextBlock"
               Text="App title" 
               Style="{StaticResource CaptionTextBlockStyle}" 
               Grid.Column="1"
               VerticalAlignment="Center"
               Margin="28,0,0,0"/>
</Grid>

public MainPage()
{
    this.InitializeComponent();

    var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
    coreTitleBar.ExtendViewIntoTitleBar = true;

    // Set XAML element as a drag region.
    Window.Current.SetTitleBar(AppTitleBar);
}

Standardmäßig zeigt die Systemtitelleiste den Anzeigenamen der App als Fenstertitel an. Der Anzeigename wird in der Datei „Package.appxmanifest“ festgelegt. Sie können diesen Wert abrufen und in Ihrer benutzerdefinierten Titelleiste wie folgt verwenden.

AppTitleTextBlock.Text = AppInfo.Current.DisplayInfo.DisplayName;

Wichtig

Der von Ihnen angegebene Ziehbereich muss für Treffertests geeignet sein. Standardmäßig nehmen einige Benutzeroberflächenelemente wie Grid nicht an Treffertests teil, wenn für sie kein Hintergrund festgelegt ist. Dies bedeutet, dass Sie für einige Elemente möglicherweise einen transparenten Hintergrundpinsel festlegen müssen. Weitere Informationen finden Sie in den Hinweisen zu VisualTreeHelper.FindElementsInHostCoordinates.

Wenn Sie beispielsweise ein Raster als Ihren Ziehbereich definieren, legen Sie für Background="Transparent" fest, dass es gezogen werden kann.

Dieses Raster kann nicht gezogen werden (aber sichtbare Elemente darin können gezogen werden): <Grid x:Name="AppTitleBar">.

Dieses Raster sieht identisch aus, aber das gesamte Raster kann gezogen werden: <Grid x:Name="AppTitleBar" Background="Transparent">.

Interaktiver Inhalt

Sie können interaktive Steuerelemente wie Schaltflächen, Menüs oder ein Suchfeld im oberen Teil der App platzieren, sodass sie in der Titelleiste angezeigt werden. Es gibt jedoch einige Regeln, die Sie befolgen müssen, um sicherzustellen, dass Ihre interaktiven Elemente Benutzereingaben erhalten und Benutzern gleichzeitig das Verschieben des Fensters ermöglichen.

Sie müssen SetTitleBar aufrufen, um einen Bereich als ziehbaren Titelleistenbereich zu definieren. Andernfalls legt das System den Standardziehbereich oben auf der Seite fest. Das System verarbeitet dann alle Benutzereingaben in diesem Bereich und verhindert, dass die Eingaben ihre Steuerelemente erreichen.
Platzieren Sie Die interaktiven Steuerelemente über dem durch den Aufruf von SetTitleBar definierten Ziehbereich (mit einer höheren Z-Reihenfolge). Legen Sie ihre interaktiven Steuerelemente nicht als untergeordnete Elemente für das UIElement fest, dass an SetTitleBar übergeben wird. Nachdem Sie ein Element an SetTitleBar übergeben haben, behandelt es das System wie die Systemtitelleiste und verarbeitet alle Zeigereingaben für dieses Element.

Hier hat das AutoSuggestBox-Element eine übergeordnete Z-Reihenfolge als AppTitleBar, sodass es Benutzereingaben empfängt.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="48"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid x:Name="AppTitleBar" Background="Transparent">
        <!-- Width of the padding columns is set in LayoutMetricsChanged handler. -->
        <!-- Using padding columns instead of Margin ensures that the background
             paints the area under the caption control buttons (for transparent buttons). -->
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
            <ColumnDefinition/>
            <ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
        </Grid.ColumnDefinitions>
        <Image Source="Assets/WindowIcon.png" 
               Grid.Column="1"
               HorizontalAlignment="Left"
               Width="16" Height="16"
               Margin="8,0,0,0"/>
        <TextBlock x:Name="AppTitleTextBlock"
                   Text="App title" 
                   Style="{StaticResource CaptionTextBlockStyle}" 
                   Grid.Column="1"
                   VerticalAlignment="Center"
                   Margin="28,0,0,0"/>
    </Grid>

    <!-- This control has a higher z-order than AppTitleBar, 
         so it receives user input. -->
    <AutoSuggestBox QueryIcon="Find"
                    PlaceholderText="Search"
                    HorizontalAlignment="Center"
                    Width="260" Height="32"/>
</Grid>

Beschriftungsschaltflächen des Systems

Das System reserviert die obere linke oder obere rechte Ecke des App-Fensters für Beschriftungsschaltflächen des Systems (Minimieren, Maximieren/Wiederherstellen, Schließen). Das System behält die Kontrolle über den Bereich der Beschriftungsschaltfläche, um sicherzustellen, dass minimale Funktionen zum Ziehen, Minimieren, Maximieren und Schließen des Fensters bereitgestellt werden. Das System zeichnet die Schaltfläche „Schließen“ in der oberen rechten für Sprachen von links nach rechts und die obere linke für Sprachen von rechts nach links.

Sie können Inhalte unter dem Beschriftungssteuerbereich zeichnen, z. B. den App-Hintergrund, aber Sie sollten keine Benutzeroberfläche platzieren, mit der Benutzer*innen möglicherweise interagieren werden. Es werden keine Eingaben empfangen, da Eingaben für die Beschriftungssteuerelemente vom System verarbeitet werden.

Diese Zeilen aus dem vorherigen Beispiel zeigen die Auffüllungsspalten im XAML-Code, der die Titelleiste definiert. Die Verwendung von Abstandsspalten anstelle von Rändern stellt sicher, dass der Hintergrund den Bereich unter den Beschriftungssteuerelementen (für transparente Schaltflächen) zeichnet. Durch die Verwendung von Auffüllungsspalten rechts und links wird sichergestellt, dass sich die Titelleiste in den Layouts von rechts nach links und von links nach rechts ordnungsgemäß verhält.

<Grid.ColumnDefinitions>
    <ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
    <ColumnDefinition/>
    <ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
</Grid.ColumnDefinitions>

Die Dimensionen und die Position des Bereichs der Beschriftungssteuerelemente werden von der CoreApplicationViewTitleBar-Klasse mitgeteilt, sodass Sie sie im Layout Ihrer Titelleisten-Benutzeroberfläche berücksichtigen können. Die Breite des reservierten Bereichs auf jeder Seite wird durch die Eigenschaften SystemOverlayLeftInset oder SystemOverlayRightInset angegeben, und seine Höhe wird durch die Height-Eigenschaft angegeben.

Sie können das LayoutMetricsChanged-Ereignis verarbeiten, um auf Größenänderungen der Titelleistenschaltfläche zu reagieren. Dies kann beispielsweise vorkommen, wenn sich das App-Layout von links nach rechts zu rechts nach links ändert. Verarbeiten Sie dieses Ereignis, um die Positionierung von Benutzeroberflächenelementen zu bestätigen und zu aktualisieren, die von der Größe der Titelleiste abhängen.

In diesem Beispiel wird gezeigt, wie Sie das Layout Ihrer Titelleiste so anpassen, dass Änderungen an den Metriken der Titelleiste berücksichtigt werden. AppTitleBar, LeftPaddingColumn und RightPaddingColumn werden im zuvor gezeigten XAML-Code deklariert.

private void CoreTitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
    // Get the size of the caption controls and set padding.
    LeftPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayLeftInset);
    RightPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayRightInset);
}

Farbe und Transparenz in Beschriftungsschaltflächen

Wenn Sie Ihre App-Inhalte in den Titelleistenbereich erweitern, können Sie den Hintergrund der Beschriftungsschaltflächen transparent machen, damit der App-Hintergrund angezeigt wird. Für vollständige Transparenz legen Sie den Hintergrund in der Regel auf Colors.Transparent fest. Legen Sie für teilweise Transparenz den Alphakanal für die Farbe fest, auf die Sie die Eigenschaft festlegen.

Diese Titelleisteneigenschaften können transparent sein:

Alle anderen Farbeigenschaften ignorieren den Alphakanal weiterhin. Wenn ExtendViewIntoTitleBar auf false festgelegt ist, wird der Alphakanal für alle ApplicationViewTitleBar-Farbeigenschaften immer ignoriert.

Die Hintergrundfarbe der Schaltfläche wird nicht auf die Zustände darauf zeigen und gedrückt der Schließen-Schaltfläche angewendet. Die Schaltfläche zum Schließen verwendet für diese Zustände immer die systemdefinierte Farbe.

Tipp

Mica ist ein reizvolles Material, das hilft, das Fenster zu unterscheiden, das im Fokus steht. Es wird als Hintergrund für langlebige Fenster in Windows 11 empfohlen. Wenn Sie Mica im Clientbereich Ihres Fensters angewendet haben, können Sie es in den Titelleistenbereich erweitern und Ihre Beschriftungsschaltflächen für die Mica transparent machen, damit sie durchscheinen. Weitere Informationen finden Sie unter Mica-Material.

Dimmen der Titelleiste, wenn das Fenster inaktiv ist

Sie sollten deutlich machen, ob Ihr Fenster aktiv oder inaktiv ist. Sie sollten mindestens die Farbe des Texts, der Symbole und der Schaltflächen in der Titelleiste ändern.

Verarbeiten Sie das CoreWindow.Activated-Ereignis, um den Aktivierungsstatus des Fensters zu bestimmen, und aktualisieren Sie ggf. die Benutzeroberfläche der Titelleiste.

public MainPage()
{
    ...
    Window.Current.CoreWindow.Activated += CoreWindow_Activated;
}

private void CoreWindow_Activated(CoreWindow sender, WindowActivatedEventArgs args)
{
    UISettings settings = new UISettings();
    if (args.WindowActivationState == CoreWindowActivationState.Deactivated)
    {
        AppTitleTextBlock.Foreground = 
            new SolidColorBrush(settings.UIElementColor(UIElementType.GrayText));
    }
    else
    {
        AppTitleTextBlock.Foreground = 
            new SolidColorBrush(settings.UIElementColor(UIElementType.WindowText));
    }
}

Zurücksetzen der Titelleiste

Sie können SetTitleBar aufrufen, um zu einem neuen Titelleistenelement zu wechseln, während die App ausgeführt wird. Sie können auch null als Parameter an SetTitleBar übergeben und ExtendViewIntoTitleBar auf false festlegen, um zur Standardtitelleiste des Systems zurückzukehren.

Anzeigen und Ausblenden der Titelleiste

Wenn Sie Ihrer App Unterstützung für die Modi Vollbild oder kompakte Überlagerung hinzufügen, müssen Sie möglicherweise Änderungen an der Titelleiste vornehmen, wenn Ihre App zwischen diesen Modi wechselt.

Wenn Ihre App im Vollbildmodus oder im Tablet-Modus (nur Windows 10) ausgeführt wird, blendet das System die Titelleiste und Beschriftungssteuerelemente aus. Der Benutzer kann jedoch die Titelleiste aufrufen, damit sie als Überlagerung über der Benutzeroberfläche der App angezeigt wird.

Sie können das CoreApplicationViewTitleBar.IsVisibleChanged-Ereignis verarbeiten, um benachrichtigt zu werden, wenn die Titelleiste ausgeblendet oder aufgerufen wird, oder ihren benutzerdefinierten Titelleisteninhalt bei Bedarf ein- oder ausblenden.

In diesem Beispiel wird gezeigt, wie das IsVisibleChanged-Ereignis behandelt wird, um das AppTitleBar-Element aus früheren Beispielen anzuzeigen und auszublenden.

public MainPage()
{
    this.InitializeComponent();

    var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;

    // Register a handler for when the title bar visibility changes.
    // For example, when the title bar is invoked in full screen mode.
    coreTitleBar.IsVisibleChanged += CoreTitleBar_IsVisibleChanged;
}

private void CoreTitleBar_IsVisibleChanged(CoreApplicationViewTitleBar sender, object args)
{
    if (sender.IsVisible)
    {
        AppTitleBar.Visibility = Visibility.Visible;
    }
    else
    {
        AppTitleBar.Visibility = Visibility.Collapsed;
    }
}

Hinweis

Der Vollbildmodus kann nur eingegeben werden, wenn er von Ihrer App unterstützt werden. Weitere Informationen finden Sie unter ApplicationView.IsFullScreenMode. Der Tablet-Modus (nur Windows 10) ist eine Benutzeroption in Windows 10 auf unterstützter Hardware, sodass ein Benutzer eine beliebige App im Tablet-Modus ausführen kann.

Empfohlene und nicht empfohlene Vorgehensweisen

Machen Sie deutlich, ob Ihr Fenster aktiv oder inaktiv ist. Ändern Sie mindestens die Farbe des Texts, der Symbole und der Schaltflächen in der Titelleiste.
Definieren Sie einen Ziehbereich am oberen Rand des App-Zeichenbereichs. Das Abgleichen der Platzierung von Systemtitelleisten erleichtert Benutzer*innen das Auffinden.
Definieren Sie einen Ziehbereich, der der visuellen Titelleiste (falls vorhanden) im Zeichenbereich der App entspricht.

Beispiel für vollständige Anpassung

In diesem Beispiel wird der gesamte Code gezeigt, der im Abschnitt „Vollständige Anpassung“ beschrieben wird.

<Page
    x:Class="WinUI2_ExtendedTitleBar.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUI2_ExtendedTitleBar"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    muxc:BackdropMaterial.ApplyToRootOrPageBackground="True">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="48"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid x:Name="AppTitleBar" Background="Transparent">
            <!-- Width of the padding columns is set in LayoutMetricsChanged handler. -->
            <!-- Using padding columns instead of Margin ensures that the background
                 paints the area under the caption control buttons (for transparent buttons). -->
            <Grid.ColumnDefinitions>
                <ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
                <ColumnDefinition/>
                <ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
            </Grid.ColumnDefinitions>
            <Image Source="Assets/WindowIcon.png" 
                   Grid.Column="1"
                   HorizontalAlignment="Left"
                   Width="16" Height="16"
                   Margin="8,0,0,0"/>
            <TextBlock x:Name="AppTitleTextBlock"
                       Text="App title" 
                       Style="{StaticResource CaptionTextBlockStyle}" 
                       Grid.Column="1"
                       VerticalAlignment="Center"
                       Margin="28,0,0,0"/>
        </Grid>

        <!-- This control has a higher z-order than AppTitleBar, 
             so it receives user input. -->
        <AutoSuggestBox QueryIcon="Find"
                        PlaceholderText="Search"
                        HorizontalAlignment="Center"
                        Width="260" Height="32"/>

        <muxc:NavigationView Grid.Row="1"
                             IsBackButtonVisible="Collapsed"
                             IsSettingsVisible="False">
            <StackPanel>
                <TextBlock Text="Content" 
                           Style="{ThemeResource TitleTextBlockStyle}"
                           Margin="12,0,0,0"/>
            </StackPanel>
        </muxc:NavigationView>
    </Grid>
</Page>

public MainPage()
{
    this.InitializeComponent();

    // Hide default title bar.
    CoreApplicationViewTitleBar coreTitleBar = 
        CoreApplication.GetCurrentView().TitleBar;
    coreTitleBar.ExtendViewIntoTitleBar = true;

    // Set caption buttons background to transparent.
    ApplicationViewTitleBar titleBar = 
        ApplicationView.GetForCurrentView().TitleBar;
    titleBar.ButtonBackgroundColor = Colors.Transparent;

    // Set XAML element as a drag region.
    Window.Current.SetTitleBar(AppTitleBar);

    // Register a handler for when the size of the overlaid caption control changes.
    coreTitleBar.LayoutMetricsChanged += CoreTitleBar_LayoutMetricsChanged;

    // Register a handler for when the title bar visibility changes.
    // For example, when the title bar is invoked in full screen mode.
    coreTitleBar.IsVisibleChanged += CoreTitleBar_IsVisibleChanged;

    // Register a handler for when the window activation changes.
    Window.Current.CoreWindow.Activated += CoreWindow_Activated;
}

private void CoreTitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
    // Get the size of the caption controls and set padding.
    LeftPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayLeftInset);
    RightPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayRightInset);
}

private void CoreTitleBar_IsVisibleChanged(CoreApplicationViewTitleBar sender, object args)
{
    if (sender.IsVisible)
    {
        AppTitleBar.Visibility = Visibility.Visible;
    }
    else
    {
        AppTitleBar.Visibility = Visibility.Collapsed;
    }
}

 private void CoreWindow_Activated(CoreWindow sender, WindowActivatedEventArgs args)
 {
     UISettings settings = new UISettings();
     if (args.WindowActivationState == CoreWindowActivationState.Deactivated)
     {
         AppTitleTextBlock.Foreground = 
            new SolidColorBrush(settings.UIElementColor(UIElementType.GrayText));
     }
     else
     {
         AppTitleTextBlock.Foreground = 
            new SolidColorBrush(settings.UIElementColor(UIElementType.WindowText));
     }
 }

Freigeben über

Anpassen der Titelleiste

Titelleistenkomponenten

Anpassen der Titelleiste

Einfach

Vollständig

Einfache Anpassung

Titel

Farben

Vollständige Anpassung

Inhalt der Titelleiste und Ziehbereiche

Interaktiver Inhalt

Beschriftungsschaltflächen des Systems

Farbe und Transparenz in Beschriftungsschaltflächen

Dimmen der Titelleiste, wenn das Fenster inaktiv ist

Zurücksetzen der Titelleiste

Anzeigen und Ausblenden der Titelleiste

Empfohlene und nicht empfohlene Vorgehensweisen

Beispiel für vollständige Anpassung

Feedback

Zusätzliche Ressourcen

Freigeben über

Anpassen der Titelleiste

Titelleistenkomponenten

Anpassen der Titelleiste

Einfach

Vollständig

Einfache Anpassung

Titel

Farben

Vollständige Anpassung

Inhalt der Titelleiste und Ziehbereiche

Interaktiver Inhalt

Beschriftungsschaltflächen des Systems

Farbe und Transparenz in Beschriftungsschaltflächen

Dimmen der Titelleiste, wenn das Fenster inaktiv ist

Zurücksetzen der Titelleiste

Anzeigen und Ausblenden der Titelleiste

Empfohlene und nicht empfohlene Vorgehensweisen

Beispiel für vollständige Anpassung

Verwandte Artikel

Feedback

Zusätzliche Ressourcen