Sdílet prostřednictvím

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

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

Ikona galerie WinUI 3 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;
}
  • Last updated on