Delen via

Titelbalk

Het besturingselement TitleBar biedt een vereenvoudigde manier om een aangepaste titelbalk voor uw app te maken. De titelbalk is een fundamenteel onderdeel van de gebruikersinterface van een Windows-app die de app identificeert via het pictogram en de titel, bevat de knoppen voor het systeembijschrift waarmee een gebruiker het venster kan sluiten, maximaliseren, minimaliseren en herstellen, en waarmee een gebruiker het venster over het scherm kan slepen.

U kunt een aangepaste titelbalk gebruiken om het titelbalkgebied beter te integreren met de gebruikersinterface van uw app. De titelbalk kan worden aangepast aan de visuele stijl van de app met behulp van Mica-thema's. Het kan andere relevante informatie bevatten, zoals een documenttitel of de huidige status (bijvoorbeeld 'Bewerken', 'Weergeven', enzovoort). Het kan ook andere WinUI-besturingselementen hosten, zoals AutoSuggestBox en PersonPicture, wat een samenhangende gebruikerservaring biedt voor uw app.

Schermopname van een app-venster met een aangepaste titelbalk

Is dit de juiste controle?

Gebruik de TitleBar-control wanneer u het titelbalkgebied wilt integreren in de gebruikersinterface van uw app met aanpassingen zoals ondertitels, Mica-thema's en integraties met WinUI-controls.

Anatomie

Op de titelbalk worden standaard alleen de knoppen voor systeembijschriften weergegeven. Andere onderdelen van de titelbalk worden weergegeven of verborgen, afhankelijk van de bijbehorende eigenschapsinstellingen.

De titelbalk is onderverdeeld in deze gebieden:

Schermopname van de onderdelen van een titelbalk.

  • Terugknop:IsBackButtonEnabled, IsBackButtonVisible, BackRequested - Een geïntegreerde terugknop voor navigatie.
  • Wisselknop Deelvenster:IsPaneToggleButtonVisible, PaneToggleRequested - Deze knop is bedoeld om te worden gebruikt in combinatie met de NavigationView-control.
  • Linkerkoptekst:LeftHeader
  • Pictogram:IconSource
  • Titel:Titel
  • Ondertitel:Ondertitel
  • Inhoud:Inhoud
  • Rechterkoptekst:RightHeader
  • Minimale sleepregio: Dit gebied is gereserveerd naast de systeemknoppen, zodat de gebruiker altijd een plek heeft om het venster vast te houden voor slepen.
  • Knoppen voor systeembijschrift: Deze knoppen maken geen deel uit van het besturingselement Titelbalk. Er wordt gewoon ruimte toegewezen waar de bijschriftknoppen worden weergegeven, afhankelijk van de instellingen voor RTL of LTR. Bijschriftknoppen en aanpassingen worden verwerkt door de AppWindowTitleBar.

De indeling wordt omgekeerd wanneer de FlowDirectionRightToLeftis.

Een titelbalk maken

Open de WinUI 3 Gallery-app en zie de titelbalk in actie

De WinUI 3 Gallery-app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 3. Haal de app op uit de Microsoft Store of haal de broncode op GitHub op

In dit voorbeeld wordt een eenvoudige titelbalk gemaakt die de systeemtitelbalk vervangt. Het heeft een titel, pictogram en Mica thema.

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

Integratie met NavigationView

De navigatieweergave heeft een ingebouwde knop Terug en wisselknop voor deelvensters. Fluent Design-richtlijnen raden aan dat deze besturingselementen in de titelbalk worden geplaatst wanneer een aangepaste titelbalk wordt gebruikt.

In dit voorbeeld ziet u hoe u de titelbalk kunt integreren met een navigatieweergave-besturingselement door de terug-knop en de paneelwisselknop in de navigatieweergave te verbergen en door in plaats daarvan de bijbehorende knoppen op de titelbalk te gebruiken.

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

Het bedieningselement TitleBar is niet beschikbaar voor UWP en WinUI 2. Zie in plaats daarvan de titelbalkaanpassing (UWP-apps).