Pasek tytułowy

Kontrolka TitleBar zapewnia uproszczony sposób tworzenia niestandardowego paska tytułu dla aplikacji. Pasek tytułu jest podstawowym składnikiem interfejsu użytkownika aplikacji systemu Windows, który identyfikuje aplikację za pomocą jej ikony i tytułu, zawiera przyciski napisów systemowych, które pozwalają użytkownikowi zamknąć, zmaksymalizować, zminimalizować i przywrócić okno, a także pozwoli użytkownikowi przeciągnąć okno wokół ekranu.

Możesz użyć niestandardowego paska tytułu, aby lepiej zintegrować obszar paska tytułu z interfejsem użytkownika aplikacji. Pasek tytułu można dostosować tak, aby pasował do stylu wizualizacji aplikacji przy użyciu motywów Mica. Może zawierać inne istotne informacje, takie jak tytuł dokumentu lub bieżący stan (np. "Edytowanie", "Wyświetlanie" itp.). Może również hostować inne kontrolki WinUI, takie jak AutoSuggestBox i PersonPicture, zapewniając spójną obsługę użytkownika dla aplikacji.

Czy jest to właściwa kontrola?

Użyj kontrolki TitleBar, jeśli chcesz zintegrować obszar paska tytułu z interfejsem użytkownika aplikacji przy użyciu dostosowań, takich jak napisy, motywy mica i integracje z kontrolkami WinUI.

Anatomia

Domyślnie na pasku tytułu są wyświetlane tylko przyciski sterujące systemu. Inne części paska tytułu są wyświetlane lub ukryte w zależności od skojarzonych ustawień właściwości.

Pasek tytułu jest podzielony na następujące obszary:

• Przycisk Wstecz:IsBackButtonEnabled, IsBackButtonVisible, BackRequested — wbudowany przycisk wstecz umożliwiający nawigację.
• Przycisk przełączania okienka:IsPaneToggleButtonVisible, PaneToggleRequested — ten przycisk ma być używany w połączeniu z kontrolką NavigationView.
• Lewy nagłówek:LeftHeader
• Ikona:IconSource
• Tytuł:Tytuł
• Podtytuł:Podtytuł
• Zawartość:Zawartość
• Prawy nagłówek:RightHeader
• Minimalny region przeciągania: Ten obszar jest zarezerwowany obok przycisków napisów systemowych, dzięki czemu użytkownik zawsze ma miejsce, aby chwycić okno do przeciągania.
• Przyciski podpisów systemowych: Te przyciski nie są częścią kontrolki TitleBar — po prostu przydziela miejsce, w którym są wyświetlane przyciski podpisu, w zależności od ustawień RTL lub LTR. Przyciski do podpisów i opcje dostosowania są obsługiwane przez AppWindowTitleBar.

Układ jest odwracany, gdy FlowDirection jest RightToLeft.

Tworzenie paska tytułu

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

W tym przykładzie tworzony jest prosty pasek tytułu, który zastępuje systemowy pasek tytułu. Ma tytuł, ikonę i motyw Mica.

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

Integracja z NavigationView

Widok nawigacji ma wbudowany przycisk wstecz i przycisk przełącznika okienka. Wytyczne dotyczące Fluent Design zalecają umieszczanie tych kontrolek na pasku tytułu, gdy używany jest niestandardowy pasek tytułu.

W tym przykładzie pokazano, jak zintegrować kontrolkę TitleBar z kontrolką NavigationView, ukrywając przycisk wstecz i przycisk przełączania okienka w widoku nawigacji i używając odpowiednich przycisków na pasku tytułu.

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

Kontrolka TitleBar nie jest dostępna dla platformy UWP i winUI 2. Zamiast tego zobacz Dostosowywanie paska tytułu (aplikacje platformy UWP)..

Powiązane artykuły

• Pasek tytułu (projekt)
• Dostosowywanie paska tytułu
• Klasa TitleBar