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 Windows, który identyfikuje aplikację za pośrednictwem jej ikony i tytułu, zawiera przyciski napisów systemowych, które pozwalają użytkownikowi zamknąć, zmaksymalizować, zminimalizować i przywrócić okno, a następnie umożliwić użytkownikowi przeciągnięcie okna 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 3, 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 kontrolek i funkcji WinUI. Pobierz aplikację z Microsoft Store lub przejrzyj kod źródłowy 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;
}

Dostosuj obszary przeciągania

Użytkownicy przenoszą okno, przeciągając jego pasek tytułu. Kontrolka TitleBar określa, które części obszaru zawartości użytkownicy mogą przeciągać, a które części odbierają dane wejściowe wskaźnika, takie jak kliknięcia.

Począwszy od Zestaw SDK do aplikacji systemu Windows 2.1.3, kontrolka TitleBar sprawdza elementy w zawartości i wyklucza tylko kontrolki interakcyjne, takie jak przyciski, pola tekstowe i pola kombi, z regionu przeciągania. Puste miejsce i elementy nieinterakcyjne, takie jak TextBlock, domyślnie można przeciągać, więc nie trzeba zmieniać kodu znaczników. We wcześniejszych wersjach puste miejsce w obszarze zawartości mogło blokować przeciąganie okna. To domyślne zachowanie jest zmianą zgodności środowiska uruchomieniowego TitleBar_ContentDragRegions. Aby uzyskać więcej informacji, zobacz RuntimeCompatibilityOptions.DisabledChanges.

Poniższy przykład jest oparty na przykładzie z galerii WinUI 3. Zawartość paska tytułu to Grid zawierający pole AutoSuggestBox i przycisk. Obie kontrolki można klikać, a puste miejsce obok nich można przeciągać.

<TitleBar x:Name="AppTitleBar" Title="My App">
    <TitleBar.Resources>
        <!-- Stretch the content across the available width of the title bar. -->
        <HorizontalAlignment x:Key="TitleBarContentHorizontalAlignment">Stretch</HorizontalAlignment>
    </TitleBar.Resources>
    <TitleBar.Content>
        <Grid ColumnSpacing="8">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <AutoSuggestBox MaxWidth="580"
                            VerticalAlignment="Center"
                            PlaceholderText="Search..."
                            QueryIcon="Find" />

            <StackPanel x:Name="RightPanel"
                        Grid.Column="1"
                        Orientation="Horizontal"
                        Spacing="8"
                        VerticalAlignment="Center">
                <Button x:Name="StatusButton"
                        Content="Status"
                        Click="StatusButton_Click" />
            </StackPanel>
        </Grid>
    </TitleBar.Content>
</TitleBar>

Zastąp zachowanie przeciągania elementu

Aby nadpisać domyślne działanie elementu w zawartości paska tytułu, ustaw właściwość dołączoną TitleBar.IsDragRegion. Właściwość jest wartością logiczną dopuszczaną do wartości null.

Właściwość można ustawić dla panelu, na przykład StackPanel:

• Jeśli ustawisz go na False, cały obszar panelu będzie możliwy do kliknięcia, w tym odstęp między jego elementami podrzędnymi.
• Jeśli ustawisz go na True, panel i jego elementy podrzędne można przeciągać, z wyjątkiem elementów podrzędnych, dla których ustawisz właściwość na False.

Ustaw właściwość na najmniejszym elemencie, który go potrzebuje, aby nie utworzyć dużego obszaru paska tytułu, który można przeciągać lub klikać przypadkowo.

W tym przykładzie grupę kontrolek formatowania można klikać jako całość, dzięki czemu użytkownicy nie przeciągają okna po kliknięciu obszaru między kontrolkami.

<StackPanel Orientation="Horizontal" Spacing="8" TitleBar.IsDragRegion="False">
    <ComboBox PlaceholderText="Font" />
    <ComboBox PlaceholderText="Size" />
    <ToggleButton Content="Bold" />
</StackPanel>

W kodzie wywołaj metodę SetIsDragRegion, aby ustawić wartość, i wywołaj ClearValue z parametrem IsDragRegionProperty, aby powrócić do zachowania domyślnego. Aby odczytać wartość, wywołaj metodę GetIsDragRegion. Zwraca wartość null , jeśli właściwość nie jest ustawiona. Gdy wartość zmieni się, kontrolka TitleBar aktualizuje swoje obszary przeciągania.

// Make the button draggable. Users can't click it.
TitleBar.SetIsDragRegion(StatusButton, true);

// Make the button clickable.
TitleBar.SetIsDragRegion(StatusButton, false);

// Clear the value so that the TitleBar control decides.
StatusButton.ClearValue(TitleBar.IsDragRegionProperty);

Aktualizowanie regionów przeciągania po zmianie zawartości

Kontrolka TitleBar aktualizuje regiony przeciągania po ustawieniu lub zastąpieniu jego zawartości, załadowaniu zawartości, zmianie rozmiaru paska tytułu i gdy na elemencie zmieni się wartość TitleBar.IsDragRegion.

W przypadku dodawania, usuwania lub zmieniania rozmiaru elementów w zawartości paska tytułu w czasie wykonywania wywołaj polecenie RecomputeDragRegions po wprowadzeniu zmiany.

private void AddButton_Click(object sender, RoutedEventArgs e)
{
    RightPanel.Children.Insert(0, new Button { Content = "Extra" });

    // Update the drag regions so that the new button is clickable.
    AppTitleBar.RecomputeDragRegions();
}

Jeśli zawartość paska tytułu często się zmienia, możesz zamiast tego ustawić AutoRefreshDragRegions na True. Kontrolka TitleBar aktualizuje następnie regiony przeciągania po każdym przebiegu układu. Ta opcja może mieć wpływ na wydajność, więc jest domyślnie False wyłączona.

<TitleBar x:Name="AppTitleBar" Title="My App" AutoRefreshDragRegions="True">
    <!-- Title bar content that changes at run time. -->
</TitleBar>

Jeśli aplikacja nie używa kontrolki TitleBar, użyj klasy InputNonClientPointerSource , aby ustawić interaktywne regiony niestandardowego paska tytułu. Aby uzyskać więcej informacji, zobacz Treści interaktywne.

Powiązane artykuły

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