Záhlaví

Ovládací prvek TitleBar poskytuje zjednodušený způsob vytvoření vlastního záhlaví aplikace. Záhlaví je základní součástí uživatelského rozhraní aplikace Windows, která aplikaci identifikuje pomocí ikony a názvu, obsahuje tlačítka titulků systému, která uživateli umožňují zavřít, maximalizovat, minimalizovat a obnovit okno a umožní uživateli přetáhnout okno po obrazovce.

Pomocí vlastního titulku můžete efektivněji integrovat oblast záhlaví s uživatelským rozhraním aplikace. Záhlaví můžete přizpůsobit tak, aby odpovídalo vizuálnímu stylu aplikace pomocí motivů Mica. Může obsahovat další relevantní informace, například název dokumentu nebo aktuální stav (např. "Úpravy", "Zobrazení", atd.). Může také hostovat další ovládací prvky WinUI 3, jako je AutoSuggestBox a PersonPicture, které poskytují pro vaši aplikaci soudržné uživatelské prostředí.

Snímek obrazovky okna aplikace s vlastním záhlavím

Je to správná kontrola?

Ovládací prvek TitleBar použijte, pokud chcete integrovat oblast záhlaví s uživatelským rozhraním aplikace pomocí přizpůsobení, jako jsou titulky, motivy Mica a integrace s ovládacími prvky WinUI.

Anatomie

Ve výchozím nastavení se v záhlaví zobrazují jenom tlačítka titulků systému. V závislosti na přidružených nastaveních vlastností se zobrazí nebo skryjí další části záhlaví.

Záhlaví je rozděleno do těchto oblastí:

Snímek obrazovky znázorňující části ovládacího prvku záhlaví

Tlačítko Zpět:IsBackButtonEnabled, IsBackButtonVisible, BackRequested – integrované tlačítko zpět pro navigaci.
Přepínací tlačítko podokna:IsPaneToggleButtonVisible a PaneToggleRequested - Toto tlačítko je určeno k použití ve spojení s ovládacím prvkem NavigationView.
Levé záhlaví:LeftHeader
Icon:IconSource
Název:Název
Podnadpis:Podnadpis
Content:Content
Pravé záhlaví:RightHeader
Minimální oblast přetažení: Tato oblast je vyhrazena vedle tlačítek titulků systému, aby uživatel vždy získal místo pro přetažení okna.
Tlačítka titulků systému: Tato tlačítka nejsou součástí ovládacího prvku TitleBar – jednoduše přiděluje místo, kde se zobrazují tlačítka titulků v závislosti na nastavení RTL nebo LTR. Tlačítka titulků a vlastní nastavení se zpracovávají pomocí AppWindowTitleBar.

Rozložení je obrácené, pokud je FlowDirectionRightToLeft.

Vytvořit titulkový pruh

Důležitá rozhraní API:TitleBar – třída, vlastnost Title

Otevřete aplikaci Galerie WinUI 3 a podívejte se na záhlaví v akci.

Aplikace Galerie WinUI 3 obsahuje interaktivní příklady ovládacích prvků a funkcí WinUI. Získejte aplikaci z Microsoft Store nebo vyhledejte zdrojový kód na GitHub.

Tento příklad vytvoří jednoduchý titulkový pruh, který nahradí systémový titulkový pruh. Má název, ikonu a motiv 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); 
}

Integrace s NavigationView

Navigační zobrazení obsahuje integrované tlačítko zpět a přepínací tlačítko podokna. Pokyny pro Fluent Design doporučují umístit tyto ovládací prvky do titulního pruhu, pokud se používá vlastní titulní pruh.

Tento příklad ukazuje, jak integrovat Ovládací prvek TitleBar s ovládacím prvku NavigationView skrytím tlačítka zpět a přepínacího tlačítka podokna v navigačním zobrazení a použitím odpovídajících tlačítek na záhlaví.

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

Přizpůsobit oblasti přetahování

Uživatelé přesouvají okno přetažením jeho záhlaví. Ovládací prvek TitleBar určuje, které části oblasti Content mohou uživatelé přetahovat a které části přijímají vstup ukazatele, například kliknutí.

Počínaje Windows App SDK 2.1.3 ovládací prvek TitleBar zkoumá prvky v obsahu a vyloučí pouze interaktivní ovládací prvky, jako jsou tlačítka, textová pole a pole se seznamem, z oblasti přetažení. Prázdné místo a neinteraktivní prvky, jako je například TextBlock, se ve výchozím nastavení dají přetáhnout, takže značky nemusíte měnit. V dřívějších verzích by prázdné místo v oblasti obsahu mohlo blokovat přetahování okna. Toto výchozí chování je změna kompatibility za běhu TitleBar_ContentDragRegions. Další informace naleznete v tématu RuntimeCompatibilityOptions.DisabledChanges.

Důležitá rozhraní API:TitleBar.IsDragRegion připojená vlastnost, AutoRefreshDragRegions vlastnost, Metoda RecomputeDragRegions

Následující příklad vychází z ukázky galerie WinUI 3. Obsah záhlaví je Grid, který obsahuje AutoSuggestBox a tlačítko. Oba ovládací prvky jsou klikatelné a prázdné místo vedle nich lze táhnout.

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

Potlačit chování přetažení prvku

Chcete-li přebít výchozí chování prvku v obsahu záhlaví okna, nastavte připojenou vlastnost TitleBar.IsDragRegion. Vlastnost je logická hodnota s možnou hodnotou null.

Value	Behavior
Není nastaveno (`null`)	O výsledku rozhoduje ovládací prvek TitleBar. Interaktivní ovládací prvky se dají kliknout a ostatní prvky se dají přetáhnout.
`True`	Prvek lze přetáhnout, i když jde o interaktivní ovládací prvek. Vstup ukazatele na elementu přesune okno, takže uživatelé nemohou kliknout na prvek.
`False`	Na prvek lze kliknout, i když není interaktivním ovládacím prvkem.

Vlastnost můžete nastavit u panelu, například StackPanel:

Pokud ho nastavíte na False, bude možné kliknout na celou oblast panelu, včetně mezery mezi podřízenými položkami.
Pokud ho nastavíte na True, panel a jeho podřízené položky jsou přetahovatelné, s výjimkou podřízených položek, u nichž nastavíte vlastnost na False.

Nastavte vlastnost u nejmenšího prvku, který ji potřebuje, aby se velká oblast záhlaví omylem nestala přetahovatelnou nebo kliknutelnou.

V tomto příkladu je skupina ovládacích prvků formátování, na které lze kliknout jako na celek, aby uživatelé nepřetahovali okno, když kliknou do mezery mezi ovládacími prvky.

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

V kódu zavolejte SetIsDragRegion a nastavte hodnotu a zavolejte ClearValue s IsDragRegionProperty, aby se vrátilo výchozí chování. Pokud chcete přečíst hodnotu, zavolejte GetIsDragRegion. Vrátí null, pokud vlastnost není nastavena. Když se hodnota změní, ovládací prvek TitleBar aktualizuje oblasti pro tažení.

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

Aktualizujte oblasti přetažení při změně obsahu

Ovládací prvek TitleBar aktualizuje oblasti přetažení při nastavení nebo nahrazení jeho obsahu, když se obsah načte, když záhlaví změní velikost a když se na prvku změní hodnota TitleBar.IsDragRegion.

Pokud přidáte, odeberete nebo změníte velikost prvků v obsahu záhlaví v době běhu, zavolejte po provedení změny funkci RecomputeDragRegions .

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

Pokud se obsah záhlaví často mění, můžete místo toho nastavit AutoRefreshDragRegions na True. Ovládací prvek TitleBar pak aktualizuje oblasti přetažení po každém průchodu rozložení. Tato možnost může ovlivnit výkon, takže je ve výchozím nastavení vypnutá False.

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

Note

Oblasti pro přetažení ovlivňují pouze vstup ukazatele. Nemění fokus klávesnice ani to, jak model UI Automation klienti, jako jsou čtečky obrazovky, pracují s prvky v záhlaví. Ujistěte se, že interaktivní ovládací prvky v záhlaví okna jsou stále dostupné pomocí klávesnice.

Pokud vaše aplikace nepoužívá ovládací prvek TitleBar, použijte třídu InputNonClientPointerSource k nastavení interaktivních oblastí vlastního záhlaví okna. Další informace najdete v tématu Interaktivní obsah.

Váš názor

Byla tato stránka užitečná?

Poslední aktualizace v 2026-10-15