Delen via

Tabweergave

  • Artikel

Het besturingselement TabView is een manier om een set tabbladen en hun respectieve inhoud weer te geven. TabView-besturingselementen zijn handig voor het weergeven van verschillende pagina's (of documenten) met inhoud, terwijl een gebruiker nieuwe tabbladen opnieuw kan rangschikken, sluiten of openen.

voorbeeld van een TabView-

Is dit de juiste controle?

In het algemeen zijn tabbed-UIS's beschikbaar in een van de twee verschillende stijlen die verschillen in functie en uiterlijk:

  • statische tabbladen zijn de soorten tabbladen die vaak worden gevonden in instellingenvensters. Ze bevatten een vast aantal pagina's in een vaste volgorde die meestal vooraf gedefinieerde inhoud bevatten.
  • documenttabbladen zijn het soort tabbladen in een browser, zoals Microsoft Edge. Gebruikers kunnen tabbladen maken, verwijderen en opnieuw rangschikken; tabs verplaatsen tussen vensters; en wijzig de inhoud van tabbladen.

Standaard is TabView- geconfigureerd om documenttabbladen op te geven. We raden TabView aan wanneer gebruikers het volgende kunnen doen:

  • Tabbladen dynamisch openen, sluiten of opnieuw rangschikken.
  • Open documenten of webpagina's rechtstreeks in tabbladen.
  • Sleep en zet tabbladen tussen de vensters.

De TabView-API staat het configureren van het besturingselement voor statische tabbladen toe. Als u echter de richtlijnen voor het ontwerpen van Windows wilt volgen en wanneer er meer dan een paar statische navigatie-items zijn, overweeg dan een Navigatieweergave besturingselement te gebruiken.

Anatomie

De gebruikersinterface met tabbladen wordt gemaakt met een TabView-besturingselement en een of meer TabViewItem-besturingselementen. TabView host exemplaren van TabViewItem, die één tabblad vertegenwoordigen en inhoud.

TabView-onderdelen

Deze afbeelding toont de onderdelen van het TabView besturingselement. De tabstrook een kop- en voettekst heeft, maar in tegenstelling tot een document, bevinden de kop- en voettekst van de tabstrook zich uiterst links en uiterst rechts van de strip.

In deze afbeelding ziet u de onderdelen van het tabweergavebesturingselement. De tabstrip bevat vier tabbladen en heeft een kop- en voettekst die zich aan de uiterste linker- en rechterkant van de strip bevinden.

TabViewItem-onderdelen

In de afbeelding ziet u de onderdelen van het controlemiddel TabViewItem. Hoewel de inhoud wordt weergegeven in het besturingselement TabView, maakt de inhoud eigenlijk deel uit van de TabViewItem.

In deze afbeelding ziet u de onderdelen van het besturingselement voor tabbladweergaveitems. Er is een afzonderlijk tabblad geselecteerd, met een pictogram en label, met een inhoudsgebied onder het tabblad.

Aanbevelingen

Selectie van tabbladen

De meeste gebruikers hebben ervaring met het gebruik van documenttabbladen met behulp van een webbrowser. Wanneer ze documenttabbladen in uw app gebruiken, informeert hun ervaring hun verwachtingen over hoe uw tabbladen zich moeten gedragen.

Ongeacht hoe de gebruiker communiceert met een set documenttabbladen, moet er altijd een actief tabblad zijn. Als de gebruiker het geselecteerde tabblad sluit of het geselecteerde tabblad in een ander venster opbreekt, wordt een ander tabblad het actieve tabblad. TabView probeert dit automatisch te selecteren op het volgende tabblad. Als u een goede reden hebt dat uw app een TabView met een niet-geselecteerd tabblad toestaat, is het inhoudsgebied van TabView gewoon leeg.

Toetsenbordnavigatie

TabView- ondersteunt standaard veel algemene toetsenbordnavigatiescenario's. In deze sectie wordt de ingebouwde functionaliteit uitgelegd en worden aanbevelingen gegeven voor aanvullende functionaliteit die nuttig kan zijn voor sommige apps.

Gedrag van tab- en cursortoetsen

Wanneer de focus naar het TabStrip gebied wordt verplaatst, krijgt het geselecteerde TabViewItem focus. De gebruiker kan vervolgens de pijl-links en pijl-rechts gebruiken om de focus (niet selectie) naar andere tabbladen in de tabstrook te verplaatsen. De toetsenbordfocus is opgesloten binnen de tabstrook en de knop Tab toevoegen (+), als deze aanwezig is. Als u de focus buiten het gebied van de tabstrook wilt verplaatsen, kan de gebruiker op de Tab-toets drukken, waardoor de focus naar het volgende focusbare element wordt verplaatst.

Focus verplaatsen via Tab

Focus verplaatsen via tabblad

pijltoetsen schakelen niet tussen focus

Pijltoetsen verplaatsen de focus niet

Een tabblad selecteren

Wanneer een TabViewItem de focus heeft, druk op spatie of Enter om het TabViewItem te selecteren.

Pijltoetsen gebruiken om de focus te verplaatsen en druk vervolgens op spatiebalk om het tabblad te selecteren.

Ruimte om tab- te selecteren

Sneltoetsen voor het selecteren van aangrenzende tabbladen

Druk op Ctrl+Tab- om de volgende TabViewItem-te selecteren. Druk op Ctrl+Shift+Tab om de vorige TabViewItem te selecteren. Voor deze doeleinden 'loopt' de lijst met tabbladen, waardoor als u bij het laatste tabblad het volgende tabblad selecteert, het eerste tabblad wordt geselecteerd.

Een tabblad sluiten

Druk op Ctrl+F4 om het event TabCloseRequested op te roepen. De gebeurtenis afhandelen en het tabblad sluiten, indien van toepassing.

Tip

Zie Toetsenbordrichtlijnen voor ontwikkelaars verderop in dit artikel voor meer informatie.

Een tabbladweergave maken

Open de App WinUI 3 Gallery en bekijk de TabView in actie

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

In de voorbeelden in deze sectie laten we zien hoe u op verschillende manieren een TabView- besturing kunt configureren.

Tabbladweergave-items

Elk tabblad in een TabView- wordt vertegenwoordigd door een besturingselement TabViewItem, waaronder zowel het tabblad dat wordt weergegeven in de tabstrook als de inhoud die onder de tabstrook wordt weergegeven.

Een tabblad configureren

Voor elke TabViewItem kunt u een koptekst en een pictogram instellen en opgeven of de gebruiker het tabblad kan sluiten.

  • De eigenschap Header wordt meestal ingesteld op een tekenreekswaarde die een beschrijvend label voor het tabblad biedt. De eigenschap Header kan echter elk object zijn. U kunt ook de eigenschap HeaderTemplate gebruiken om een DataTemplate- op te geven waarmee wordt gedefinieerd hoe afhankelijke headergegevens moeten worden weergegeven.
  • Stel de eigenschap IconSource in om een pictogram voor het tabblad op te geven.
  • Standaard wordt op het tabblad een sluitknop (X) weergegeven. U kunt de eigenschap IsClosable instellen op false om de knop Sluiten te verbergen en ervoor te zorgen dat een gebruiker het tabblad niet kan sluiten. (Als u tabs in de app-code sluit buiten een aangevraagde gebeurtenis sluit, moet u eerst controleren of IsClosable is true.)

Voor tabweergave kunt u verschillende opties configureren die van toepassing zijn op alle tabbladen.

  • Standaard wordt de knop Sluiten altijd weergegeven voor sluitbare tabbladen. U kunt de eigenschap CloseButtonOverlayMode instellen op OnPointerOver om dit gedrag te wijzigen. In dit geval wordt op het geselecteerde tabblad altijd de knop Sluiten weergegeven als het kan worden gesloten, maar op niet-geselecteerde tabbladen wordt de knop Sluiten alleen weergegeven wanneer het tabblad kan worden gesloten en de gebruiker de muisaanwijzer erop heeft.
  • U kunt de eigenschap TabWidthMode instellen om de grootte van tabbladen te wijzigen. (De eigenschap Width wordt genegeerd op TabViewItem.) Dit zijn de opties in de opsomming TabViewWidthMode:
    • Equal - Elk tabblad heeft dezelfde breedte. Dit is de standaardwaarde.
    • SizeToContent : elk tabblad past de breedte aan van de inhoud op het tabblad.
    • Compact : niet-geselecteerde tabbladen worden samengevouwen om alleen hun pictogram weer te geven. Het geselecteerde tabblad wordt aangepast om de inhoud op het tabblad weer te geven.

Inhoud

De elementen die op het geselecteerde tabblad worden weergegeven, worden toegevoegd aan de eigenschap Inhoud van de TabViewItem-. TabViewItem is een ContentControl-, zodat u elk type object als inhoud kunt toevoegen. U kunt ook een DataTemplate- toepassen op de eigenschap ContentTemplate. Zie de klasse ContentControl voor meer informatie.

In de voorbeelden in dit artikel ziet u een eenvoudig geval van het rechtstreeks toevoegen van tekst aan het Content-element in XAML. Echte gebruikersinterface is echter doorgaans complexer. Een veelgebruikte manier om een complexe gebruikersinterface toe te voegen als de inhoud van een tabblad, is door deze te encapsuleren in een UserControl of een Page, en dat toe te voegen als de inhoud van de TabViewItem. In dit voorbeeld wordt ervan uitgegaan dat uw app een XAML UserControl heeft met de naam PictureSettingsControl.

<TabViewItem>
    <TabViewItem.Content>
        <local:PictureSettingsControl/>
    </TabViewItem.Content>
</TabViewItem>

Statische tabbladen

In dit voorbeeld ziet u een eenvoudige TabView- met twee statische tabbladen. Beide tabbladitems worden in XAML toegevoegd als inhoud van de TabView.

Als u een TabView statisch wilt maken, gebruikt u deze instellingen:

  • Stel de eigenschap IsAddTabButtonVisible in op false om de knop tabblad toevoegen te verbergen en te voorkomen dat de gebeurtenis AddTabButtonClick wordt gegenereerd.
  • Stel de eigenschap CanReorderTabs in op false om te voorkomen dat de gebruiker tabs naar een andere volgorde sleept.
  • Stel op elke TabViewItem-de eigenschap IsClosable in op false om het tabblad sluiten knop te verbergen, zodat de gebruiker de gebeurtenis TabCloseRequested niet kan verhogen.
<TabView VerticalAlignment="Stretch"
         IsAddTabButtonVisible="False"
         CanReorderTabs="False">
    <TabViewItem Header="Picture" IsClosable="False">
        <TabViewItem.IconSource>
            <SymbolIconSource Symbol="Pictures"/>
        </TabViewItem.IconSource>
        <TabViewItem.Content>
            <StackPanel Padding="12">
                <TextBlock Text="Picture settings" 
                    Style="{ThemeResource TitleTextBlockStyle}"/>
            </StackPanel>
        </TabViewItem.Content>
    </TabViewItem>
    <TabViewItem Header="Sound" IsClosable="False">
        <TabViewItem.IconSource>
            <SymbolIconSource Symbol="Audio"/>
        </TabViewItem.IconSource>
        <TabViewItem.Content>
            <StackPanel Padding="12">
                <TextBlock Text="Sound settings" 
                    Style="{ThemeResource TitleTextBlockStyle}"/>
            </StackPanel>
        </TabViewItem.Content>
    </TabViewItem>
</TabView>

Documenttabbladen

De TabView is standaard geconfigureerd voor documenttabbladen. De gebruiker kan nieuwe tabbladen toevoegen, tabbladen opnieuw rangschikken en tabbladen sluiten. In deze configuratie moet u de AddTabButtonClick- en TabCloseRequested-gebeurtenissen afhandelen om de functionaliteit in te schakelen.

Wanneer tabbladen worden toegevoegd aan een TabView, kunnen er uiteindelijk te veel tabbladen zijn om weer te geven in de tabstrook. In dit geval worden scrollbumpers weergegeven waarmee de gebruiker de tabstrook naar links en rechts kan schuiven om toegang te krijgen tot verborgen tabbladen.

In dit voorbeeld wordt een eenvoudige TabView gemaakt, samen met eventhandlers om het openen en sluiten van tabbladen te ondersteunen. De TabView_AddTabButtonClick gebeurtenis-handler laat zien hoe u een TabViewItem toevoegt in code.

<TabView VerticalAlignment="Stretch"
         AddTabButtonClick="TabView_AddTabButtonClick"
         TabCloseRequested="TabView_TabCloseRequested">
    <TabViewItem Header="Home" IsClosable="False">
        <TabViewItem.IconSource>
            <SymbolIconSource Symbol="Home" />
        </TabViewItem.IconSource>
        <TabViewItem.Content>
            <StackPanel Padding="12">
                <TextBlock Text="TabView content" 
                           Style="{ThemeResource TitleTextBlockStyle}"/>
            </StackPanel>
        </TabViewItem.Content>
    </TabViewItem>
</TabView>

// Add a new tab to the TabView.
private void TabView_AddTabButtonClick(TabView sender, object args)
{
    var newTab = new TabViewItem();
    newTab.Header = $"New Document {sender.TabItems.Count}";
    newTab.IconSource = new SymbolIconSource() { Symbol = Symbol.Document };
    newTab.Content = new TextBlock() { Text = $"Content for new tab {sender.TabItems.Count}.",
                                       Padding = new Thickness(12) };
    sender.TabItems.Add(newTab);
    sender.SelectedItem = newTab;
}

// Remove the requested tab from the TabView.
private void TabView_TabCloseRequested(TabView sender, 
                                       TabViewTabCloseRequestedEventArgs args)
{
    sender.TabItems.Remove(args.Tab);
}

Sluit het venster wanneer het laatste tabblad is gesloten

Als alle tabbladen in uw app kunnen worden gesloten en het app-venster moet worden gesloten wanneer het laatste tabblad is gesloten, moet u ook het venster in de TabCloseRequested gebeurtenis-handler sluiten.

Voeg eerst in het App.xaml.cs bestand een public static eigenschap toe waarmee u toegang krijgt tot het Window exemplaar vanuit de Page die als host fungeert voor de TabView. (Zie migratie van de gebruikersinterface.)

public partial class App : Application
{
    // ... code removed.

    // Add this.
    public static Window Window { get { return m_window; } }
    // Update this to make it static.
    private static Window m_window;
}

Wijzig vervolgens de TabCloseRequested gebeurtenishandler om Window.Close aan te roepen als alle tabbladen uit de TabView zijn verwijderd.

// Remove the requested tab from the TabView.
// If all tabs have been removed, close the Window.
private void TabView_TabCloseRequested(TabView sender, 
                                       TabViewTabCloseRequestedEventArgs args)
{
    sender.TabItems.Remove(args.Tab);

    if (sender.TabItems.Count == 0)
    {
        App.Window.Close();
    }
}

Notitie

Dit voorbeeld werkt voor een app met één venster (MainWindow). Als uw app meerdere vensters heeft of als u tabverloop hebt ingeschakeld, moet u de vensters bijhouden en vervolgens de juiste vinden om te sluiten. Zie de volgende sectie voor een voorbeeld hiervan.

Tabblad loskoppelen

Tab-uitslepen beschrijft wat er gebeurt wanneer een gebruiker een tabblad uit de tabstrook van tabweergave sleept en naar een ander TabView-besturingselement verplaatst, meestal in een nieuw venster.

Vanaf Windows App SDK 1.6 heeft TabView een eigenschap CanTearOutTabs die u kunt instellen om een verbeterde ervaring te bieden voor het slepen van tabbladen naar een nieuw venster. Wanneer een gebruiker een tabblad uit de tabblad strip sleept terwijl deze optie is ingeschakeld, wordt er onmiddellijk een nieuw venster gemaakt tijdens het slepen, zodat de gebruiker het naar de rand van het scherm kan slepen om het venster te maximaliseren of uit te lijnen in één vloeiende beweging. Deze implementatie maakt ook geen gebruik van API's voor slepen en neerzetten, dus deze worden niet beïnvloed door beperkingen in deze API's.

Wanneer u de eigenschap CanTearOutTabs instelt op true, worden de tabgebeurtenissen uitgetrokken in plaats van gebeurtenissen voor slepen en neerzetten. Om tabblad losmaken te implementeren, moet u deze gebeurtenissen afhandelen:

  • TabTearOutWindowRequested

    Deze gebeurtenis treedt op wanneer een tabblad voor het eerst uit de tabstrook wordt gesleept. Hiermee kunt u een nieuw venster en tabweergave maken waarnaar het tabblad wordt verplaatst.

  • TabTearOutRequested-

    Deze gebeurtenis treedt op nadat er een nieuw venster is opgegeven. U kunt dit afhandelen om het uit gescheurde tabblad van de oorspronkelijke TabView naar een TabView in het nieuwe venster te verplaatsen.

  • ExternalTornOutTabsDropping

    Deze gebeurtenis treedt op wanneer een uitgetrokken tabblad over een bestaande TabView wordt getrokken. Afhandelen in de TabView die het uitgescheurde tabblad ontvangt om aan te geven of het tabblad geaccepteerd moet worden of niet.

  • ExternalTornOutTabsDropped

    Deze gebeurtenis treedt op wanneer een uitgesleept tabblad over een bestaande TabView wordt gesleept en de ExternalTornOutTabsDropping gebeurtenis heeft aangegeven dat het neerzetten is toegestaan. Behandel het in de TabView die het uitgescheurde tabblad ontvangt, om het tabblad te verwijderen uit de oorspronkelijke TabView en het in te voegen in de ontvangende TabView op de opgegeven index.

Deze gebeurtenissen worden niet gegenereerd wanneer tab loskoppelen is ingeschakeld: TabDragStarting, TabStripDragOver, TabStripDrop, TabDragCompleted, TabDroppedOutside.

Voorzichtigheid

Ondersteuning voor het scheuren van tabbladen is aanwezig in processen die met verhoogde bevoegdheden worden uitgevoerd als beheerder.

In de volgende voorbeelden ziet u hoe u de event handlers implementeert om tabbladen los te koppelen.

TabView instellen

Met deze XAML stelt u de eigenschap CanTearOutTabs in op true en configureert u de gebeurtenishandlers voor het uitscheuren van tabbladen.

<TabView x:Name="tabView"
     CanTearOutTabs="True"
     TabTearOutWindowRequested="TabView_TabTearOutWindowRequested"
     TabTearOutRequested="TabView_TabTearOutRequested"
     ExternalTornOutTabsDropping="TabView_ExternalTornOutTabsDropping"
     ExternalTornOutTabsDropped="TabView_ExternalTornOutTabsDropped">
    <!-- TabView content -->
</TabView>

Een nieuw venster maken en bijhouden

Tabs loskoppelen vereist dat u nieuwe vensters in uw app maakt en beheert.

Tip

De WinUI Gallery-app bevat een WindowHelper-klasse waarmee u vensters in uw app eenvoudiger kunt beheren. U kunt deze kopiëren vanuit GitHub in de winUI Gallery-opslagplaats: WindowHelper.cs. We raden deze helperklasse aan om het losmaken van tabbladen te implementeren. Zie de TabViewWindowingSamplePage op GitHub om te zien hoe deze wordt gebruikt.

In dit artikel worden helpermethoden gekopieerd uit WindowHelper.cs, maar worden gewijzigd en inline weergegeven voor leesbaarheid.

Hier wordt een lijst gemaakt voor het bijhouden van alle actieve vensters in App.xaml.cs. De methode OnLaunched wordt bijgewerkt om het venster bij te houden nadat het is gemaakt. (Dit is niet nodig als u de WindowHelper-klasse gebruikt.)

static public List<Window> ActiveWindows = new List<Window>();

protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs args)
{
    m_window = new MainWindow();
    // Track this window.
    ActiveWindows.Add(m_window);
    m_window.Activate();
}

Wanneer de tab-uitloop begint, wordt een nieuw venster aangevraagd. Hier biedt de variabele tabTearOutWindow toegang tot het nieuwe venster nadat het is gemaakt. Met de helpermethoden CreateWindow en TrackWindow wordt een nieuw venster gemaakt en toegevoegd aan de lijst met actieve venstertraceringen.

Nadat u het nieuwe venster hebt gemaakt, moet u een nieuwe pagina maken en instellen als de inhoud van het venster. De nieuwe pagina moet een TabView-besturingselement bevatten waarin u het uitgerukte tabblad verplaatst in de TabTearOutRequested gebeurtenis-handler.

Fooi

In dit voorbeeld maken we een nieuwe MainPage-klasse, omdat deze alleen een lege TabView bevat (er worden geen tabbladen rechtstreeks toegevoegd in XAML). Als MainPage andere UI-elementen bevat die niet moeten worden weergegeven in het uitgebroken venster, kunt u een afzonderlijke pagina maken die alleen elementen bevat die u nodig hebt (inclusief ten minste een TabView) en een exemplaar van die pagina maken.

Wijs ten slotte de AppWindow.Id van het nieuwe venster toe aan de eigenschap args.NewWindowId. Dit wordt gebruikt in de eigenschap TabViewTabTearOutRequestedEventArgs.NewWindowId, zodat u toegang hebt tot het venster vanuit die gebeurtenis-handler.

private Window? tabTearOutWindow = null;

private void TabView_TabTearOutWindowRequested(TabView sender, TabViewTabTearOutWindowRequestedEventArgs args)
{
    tabTearOutWindow = CreateWindow();
    tabTearOutWindow.Content = new MainPage();
    // Optional window setup, such as setting the icon or
    // extending content into the title bar happens here.
    args.NewWindowId = tabTearOutWindow.AppWindow.Id;
}

private Window CreateWindow()
{
    Window newWindow = new Window
    {
        SystemBackdrop = new MicaBackdrop()
    };
    newWindow.Title = "Torn Out Window";
    TrackWindow(newWindow);
    return newWindow;
}

private void TrackWindow(Window window)
{
    window.Closed += (sender, args) => {
        App.ActiveWindows.Remove(window);
    };
    App.ActiveWindows.Add(window);
}

Een venster sluiten wanneer het laatste tabblad is gesloten

Zoals eerder vermeld, wilt u mogelijk het venster sluiten wanneer het laatste tabblad in een TabView is gesloten. Als uw app meerdere vensters heeft, moet u het juiste venster vinden om in uw lijst met bijgehouden vensters te sluiten. In dit voorbeeld ziet u hoe u dit doet.

// Remove the requested tab from the TabView.
// If all tabs have been removed, close the Window.
private void TabView_TabCloseRequested(TabView sender, TabViewTabCloseRequestedEventArgs args)
{
    sender.TabItems.Remove(args.Tab);

    if (sender.TabItems.Count == 0)
    {
        GetWindowForElement(this)?.Close();
    }
}

public Window? GetWindowForElement(UIElement element)
{
    if (element.XamlRoot != null)
    {
        foreach (Window window in App.ActiveWindows)
        {
            if (element.XamlRoot == window.Content.XamlRoot)
            {
                return window;
            }
        }
    }
    return null;
}

Het tabblad naar het nieuwe venster verplaatsen

Nadat het nieuwe venster beschikbaar is, moet u het tabblad uit de sender TabView verwijderen en het vervolgens toevoegen aan de TabView in het nieuwe venster. In dit voorbeeld kunt u met behulp van de public AddTabToTabs helpermethode de TabView openen in het nieuwe MainPage exemplaar van het oorspronkelijke pagina-exemplaar om het uitgesleede tabblad eraan toe te voegen.

private void TabView_TabTearOutRequested(TabView sender, TabViewTabTearOutRequestedEventArgs args)
{
    if (tabTearOutWindow?.Content is MainPage newPage
        && args.Tabs.FirstOrDefault() is TabViewItem tab)
    {
        sender.TabItems.Remove(tab);
        newPage.AddTabToTabs(tab);
    }
}

// This method provides access to the TabView from
// another page instance so you can add the torn-out tab.
public void AddTabToTabs(TabViewItem tab)
{
    tabView.TabItems.Add(tab);
}

Een uit gescheurd tabblad naar een andere TabWeergave slepen

Wanneer een tabblad is gescheurd en in een nieuw venster is geplaatst, zoals wordt weergegeven in de vorige stappen, kan een van de volgende twee dingen gebeuren:

  • De gebruiker kan het tabblad neerzetten en blijft in het nieuwe venster. Het scheurproces eindigt hier en er worden geen gebeurtenissen meer opgeroepen.
  • De gebruiker kan het uitgescheurde tabblad weer naar een bestaand TabView-besturingselement slepen. In dit geval wordt het proces voortgezet en worden er nog enkele gebeurtenissen gegenereerd, zodat u het tabblad uit de oorspronkelijke TabView kunt verwijderen en het externe tabblad in een bestaande TabView kunt invoegen.

Wanneer het tabblad over de bestaande TabView wordt gesleept, wordt de ExternalTornOutTabsDropping gebeurtenis getriggerd. In de gebeurtenis-handler kunt u bepalen of het toegestaan is om het tabblad in deze TabView in te voegen. In de meeste gevallen hoeft u alleen de eigenschap args.AllowDrop in te stellen op true. Als u echter controles moet uitvoeren voordat u die eigenschap instelt, kunt u dat hier doen. Als AllowDrop is ingesteld op false, wordt het slepen van tabbladen voortgezet en wordt de ExternalTornOutTabsDropped gebeurtenis niet gegenereerd.

private void TabView_ExternalTornOutTabsDropping(TabView sender, 
                        TabViewExternalTornOutTabsDroppingEventArgs args)
{
    args.AllowDrop = true;
}

Als AllowDrop is ingesteld op true in de ExternalTornOutTabsDropping event handler, wordt de ExternalTornOutTabsDropped gebeurtenis onmiddellijk gegenereerd.

Notitie

De Dropped in de gebeurtenisnaam komt niet rechtstreeks overeen met het idee van een neerzetten actie in de API's voor slepen en neerzetten. Hier hoeft de gebruiker het tabblad niet vrij te geven om een actie uit te voeren. De gebeurtenis wordt gegenereerd terwijl het tabblad over de tabstrook wordt gehouden en de code wordt uitgevoerd om neer te zetten het tabblad in tabweergave.

De ExternalTornOutTabsDropped gebeurtenishandler volgt hetzelfde patroon als de TabTearOutRequested gebeurtenis, maar omgekeerd; u moet het tabblad verwijderen uit de oorspronkelijke TabView en dit invoegen in de sender TabView.

De sender TabView is het besturingselement waarmee het tabblad wordt ingevoegd. Daarom gebruiken we de GetParentTabView helpermethode om het oorspronkelijke tabblad te vinden. Het begint met de uitgerukte TabViewItem en gebruikt VisualTreeHelper om de visuele structuur te doorlopen en de TabView te vinden waartoe het item behoort. Nadat de TabView is gevonden, wordt de TabViewItem verwijderd uit het TabItems verzameling en ingevoegd in de TabItems verzameling van sender TabView op de index die is opgegeven door args.DropIndex.

private void TabView_ExternalTornOutTabsDropped(TabView sender, 
                             TabViewExternalTornOutTabsDroppedEventArgs args)
{
    if (args.Tabs.FirstOrDefault() is TabViewItem tab)
    {
        GetParentTabView(tab)?.TabItems.Remove(tab);
        sender.TabItems.Insert(args.DropIndex, tab);
    }
}

// Starting with the TabViewItem, walk up the
// visual tree until you get to the TabView.
private TabView? GetParentTabView(TabViewItem tab)
{
    DependencyObject current = tab;
    while (current != null)
    {
        if (current is TabView tabView)
        {
            return tabView;
        }
        current = VisualTreeHelper.GetParent(current);
    }
    return null;
}

Tip

Als u de Windows Community Toolkitgebruikt, kunt u de FindAscendant helpermethode gebruiken in de DependencyObjectExtensions van de toolkit in plaats van GetParentTabView.

TabView-tabbladen weergeven op de titelbalk van een venster

In plaats van dat tabbladen hun eigen rij onder de titelbalk van een venster bezetten, kunt u ze samenvoegen tot één gebied. Hierdoor bespaart u verticale ruimte voor uw inhoud en krijgt uw app een modern gevoel.

Omdat een gebruiker een venster met de titelbalk kan slepen om het venster te verplaatsen, is het belangrijk dat de titelbalk niet volledig is gevuld met tabbladen. Daarom moet u bij het weergeven van tabbladen op een titelbalk een gedeelte van de titelbalk opgeven dat moet worden gereserveerd als een sleepbaar gebied. Als u geen sleepbaar gebied opgeeft, kan de hele titelbalk worden gesleept, waardoor uw tabbladen geen invoergebeurtenissen ontvangen. Als uw TabView wordt weergegeven in de titelbalk van een venster, moet u altijd een TabStripFooter- opnemen in uw TabView- en deze markeren als een sleepbaar gebied.

Zie Titelbalk aanpassen voor meer informatie

tabs in de titelbalk 

<TabView VerticalAlignment="Stretch">
    <TabViewItem Header="Home" IsClosable="False">
        <TabViewItem.IconSource>
            <SymbolIconSource Symbol="Home" />
        </TabViewItem.IconSource>
    </TabViewItem>

    <TabView.TabStripFooter>
        <Grid x:Name="CustomDragRegion" Background="Transparent" />
    </TabView.TabStripFooter>
</TabView>

private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    App.Window.ExtendsContentIntoTitleBar = true;
    App.Window.SetTitleBar(CustomDragRegion);
    CustomDragRegion.MinWidth = 188;
}

Notitie

Hoe u een verwijzing naar het venster krijgt, kan variëren, afhankelijk van hoe u vensters in uw app bijhoudt. Zie Het venster sluiten wanneer het laatste tabblad is gesloten en Een nieuw venster maken en bijhouden in dit artikel voor meer informatie.

Toetsenbordrichtlijnen voor ontwikkelaars

Fooi

Zie toetsenbordnavigatie eerder in dit artikel voor meer informatie over ingebouwde toetsenbordondersteuning.

Voor sommige toepassingen is mogelijk meer geavanceerde toetsenbordbesturing vereist. Overweeg de volgende sneltoetsen te implementeren als deze geschikt zijn voor uw app.

Waarschuwing

Als u een TabView- toevoegt aan een bestaande app, hebt u mogelijk al sneltoetsen gemaakt die zijn toegewezen aan de toetsencombinaties van de aanbevolen TabView-sneltoetsen. In dit geval moet u overwegen of u uw bestaande sneltoetsen wilt behouden of een intuïtieve tabervaring voor de gebruiker wilt bieden.

  • Ctrl +T- een nieuw tabblad moet openen. Over het algemeen wordt dit tabblad gevuld met een vooraf gedefinieerd document of wordt leeg gemaakt met een eenvoudige manier om de inhoud ervan te kiezen. Als de gebruiker inhoud voor een nieuw tabblad moet kiezen, kunt u overwegen om invoerfocus te geven aan het besturingselement voor inhoudsselectie.
  • Ctrl + W het geselecteerde tabblad moet sluiten. Houd er rekening mee dat tabweergave automatisch het volgende tabblad selecteert.
  • Ctrl + Shift + T onlangs gesloten tabbladen moet openen (of nauwkeuriger, nieuwe tabbladen openen met dezelfde inhoud als onlangs gesloten tabbladen). Begin met het meest recent gesloten tabblad en ga terug in de tijd voor elke volgende keer dat de snelkoppeling wordt aangeroepen. Houd er rekening mee dat hiervoor een lijst met onlangs gesloten tabbladen moet worden onderhouden.
  • Ctrl+1 moet het eerste tabblad in de lijst met tabbladen selecteren. Ctrl+2 moet ook het tweede tabblad selecteren, Ctrl +3 moet het derde selecteren, enzovoort via Ctrl + 8.
  • Ctrl+9 moet het laatste tabblad in de lijst met tabbladen selecteren, ongeacht het aantal tabbladen in de lijst.
  • Als tabbladen meer bieden dan alleen de opdracht Sluiten (zoals dupliceren of vastmaken van een tabblad), gebruikt u een contextmenu om alle beschikbare acties weer te geven die op een tabblad kunnen worden uitgevoerd.

Toetsenbordgedrag in browserstijl implementeren

In dit voorbeeld worden een aantal van de bovenstaande aanbevelingen geïmplementeerd op een TabView-. In dit voorbeeld worden met name Ctrl + T-geïmplementeerd, Ctrl + W, Ctrl + 1-8en Ctrl + 9.

<TabView>
    <!-- ... some tabs ... -->
    <TabView.KeyboardAccelerators>
        <KeyboardAccelerator Key="T" Modifiers="Control"
                             Invoked="NewTabKeyboardAccelerator_Invoked" />
        <KeyboardAccelerator Key="W" Modifiers="Control"
                             Invoked="CloseSelectedTabKeyboardAccelerator_Invoked" />
        <KeyboardAccelerator Key="Number1" Modifiers="Control"
                             Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
        <KeyboardAccelerator Key="Number2" Modifiers="Control"
                             Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
        <KeyboardAccelerator Key="Number3" Modifiers="Control"
                             Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
        <KeyboardAccelerator Key="Number4" Modifiers="Control"
                             Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
        <KeyboardAccelerator Key="Number5" Modifiers="Control"
                             Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
        <KeyboardAccelerator Key="Number6" Modifiers="Control"
                             Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
        <KeyboardAccelerator Key="Number7" Modifiers="Control"
                             Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
        <KeyboardAccelerator Key="Number8" Modifiers="Control"
                             Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
        <KeyboardAccelerator Key="Number9" Modifiers="Control"
                             Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
    </TabView.KeyboardAccelerators>
</TabView>


private void NewTabKeyboardAccelerator_Invoked(KeyboardAccelerator sender,
                                      KeyboardAcceleratorInvokedEventArgs args)
{
    // Create new tab.
    TabView senderTabView = (TabView)args.Element;
    if (senderTabView is not null)
    {
        // (Click handler defined in previous example.)
        TabView_AddTabButtonClick(senderTabView, new EventArgs());
    }
    args.Handled = true;
}

private void CloseSelectedTabKeyboardAccelerator_Invoked(KeyboardAccelerator sender,
                                                KeyboardAcceleratorInvokedEventArgs args)
{
    TabView tabView = (TabView)args.Element;
    TabViewItem tab = (TabViewItem)tabView.SelectedItem;
    if (tab is not null)
    {
        CloseSelectedTab(tabView, tab);
    }
    args.Handled = true;
}

private void TabView_TabCloseRequested(TabView sender, TabViewTabCloseRequestedEventArgs args)
{
    CloseSelectedTab(sender, args.Tab);
}

private void CloseSelectedTab(TabView tabView, TabViewItem tab)
{
    // Only remove the selected tab if it can be closed.
    if (tab.IsClosable == true)
    {
        tabView.TabItems.Remove(tab);
    }
}


private void NavigateToNumberedTabKeyboardAccelerator_Invoked(KeyboardAccelerator sender,
                                                     KeyboardAcceleratorInvokedEventArgs args)
{
    TabView tabView = (TabView)args.Element;
    int tabToSelect = 0;

    switch (sender.Key)
    {
        case Windows.System.VirtualKey.Number1:
            tabToSelect = 0;
            break;
        case Windows.System.VirtualKey.Number2:
            tabToSelect = 1;
            break;
        case Windows.System.VirtualKey.Number3:
            tabToSelect = 2;
            break;
        case Windows.System.VirtualKey.Number4:
            tabToSelect = 3;
            break;
        case Windows.System.VirtualKey.Number5:
            tabToSelect = 4;
            break;
        case Windows.System.VirtualKey.Number6:
            tabToSelect = 5;
            break;
        case Windows.System.VirtualKey.Number7:
            tabToSelect = 6;
            break;
        case Windows.System.VirtualKey.Number8:
            tabToSelect = 7;
            break;
        case Windows.System.VirtualKey.Number9:
            // Select the last tab
            tabToSelect = tabView.TabItems.Count - 1;
            break;
    }

    // Only select the tab if it is in the list.
    if (tabToSelect < tabView.TabItems.Count)
    {
        tabView.SelectedIndex = tabToSelect;
    }
}

UWP en WinUI 2

Belangrijk

De informatie en voorbeelden in dit artikel zijn geoptimaliseerd voor apps die gebruikmaken van de Windows App SDK en WinUI 3, maar zijn algemeen van toepassing op UWP-apps die gebruikmaken van WinUI 2. Zie de UWP API-referentie voor platformspecifieke informatie en voorbeelden.

Deze sectie bevat informatie die u nodig hebt om het besturingselement te gebruiken in een UWP- of WinUI 2-app.

Het TabView-besturingselement voor UWP-apps is opgenomen als onderdeel van WinUI 2. Zie WinUI 2voor meer informatie, inclusief installatie-instructies. API's voor dit besturingselement bevinden zich in de Microsoft.UI.Xaml.Controls naamruimte.

Tab-tear-out-API's zijn niet opgenomen in de WinUI 2-versie van TabView.

U wordt aangeraden de nieuwste WinUI 2 te gebruiken om de meest recente stijlen, sjablonen en functies voor alle besturingselementen te verkrijgen. WinUI 2.2 of hoger bevat een nieuwe sjabloon voor dit besturingselement dat gebruikmaakt van afgeronde hoeken. Zie hoekstraalvoor meer informatie.

Als u de code in dit artikel wilt gebruiken met WinUI 2, gebruikt u een alias in XAML (we gebruiken muxc) om de API's van de Windows UI-bibliotheek weer te geven die zijn opgenomen in uw project. Zie Aan de slag met WinUI 2 voor meer informatie.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:TabView />