Tab nézet

A TabView vezérlővel lapokat és azok tartalmát jeleníthet meg. A TabView-vezérlők hasznosak a tartalom több oldalának (vagy dokumentumának) megjelenítéséhez, miközben lehetővé teszi a felhasználók számára az új lapok átrendezését, bezárását vagy megnyitását.

példája

Ez a megfelelő vezérlő?

A lapozott UI-k általában két különböző stílus egyikében jelennek meg, amelyek funkciójukban és megjelenésükben különböznek:

• Statikus lapok a beállítások ablakaiban gyakran megtalálható lapok. Rögzített sorrendben megadott számú oldalt tartalmaznak, amelyek általában előre definiált tartalmat tartalmaznak.
• dokumentumfülek a böngészőben található lapok, például a Microsoft Edge. A felhasználók lapokat hozhatnak létre, távolíthatnak el és rendezhetnek át; lapok áthelyezése az ablakok között; és módosíthatja a lapok tartalmát.

Alapértelmezés szerint TabView úgy van konfigurálva, hogy dokumentumfüleket adjon meg. A TabView használatát akkor javasoljuk, ha a felhasználók az alábbiakra lesznek képesek:

• Lapfülek dinamikus megnyitása, bezárása vagy átrendezése.
• Nyisson meg dokumentumokat vagy weblapokat közvetlenül fülekbe.
• Húzza a lapfüleket egyik ablakból a másikba.

A TabView API lehetővé teszi a vezérlő konfigurálását statikus lapokhoz. Ha azonban követni szeretné a Windows tervezési útmutatóját, és ha több statikus navigációs elem is van, fontolja meg a NavigationView vezérlő használatát.

Anatómia

A lapozott felhasználói felület TabView-vezérlővel és egy vagy több TabViewItem-vezérlővel jön létre. A TabView a TabViewItem példányait tartalmazza, amelyek egyetlen lapot és annak tartalmát jelölik.

TabView részei

A képen a TabView vezérlő részei láthatók. A lapsáv élőfejjel és élőlábbal rendelkezik, de a dokumentumoktól eltérően a lapsáv élőfeje és élőlába a sáv bal és jobb szélén találhatók.

TabViewItem-részek

Ez a kép a TabViewItem vezérlőelem részeit mutatja. Bár a tartalom a TabView vezérlőn belül jelenik meg, a tartalom valójában a TabViewItem része.

Ajánlások

Tabulátor kijelölése

A felhasználók többsége egyszerűen webböngésző használatával használja a dokumentumfüleket. Amikor dokumentumfüleket használnak az alkalmazásban, a felhasználói élményük tájékoztatja az elvárásaikat a lapok viselkedéséről.

Függetlenül attól, hogy a felhasználó hogyan használja a dokumentumfüleket, mindig legyen aktív lap. Ha a felhasználó bezárja a kijelölt lapot, vagy a kijelölt lapot egy másik ablakba töri, egy másik lap lesz az aktív lap. TabView megpróbálja ezt automatikusan kijelölni a következő fülre. Ha jó oka van arra, hogy az alkalmazásnak engedélyeznie kell egy nem kijelölt fület tartalmazó TabView-nézetet, a TabView tartalomterülete egyszerűen üres lesz.

Billentyűzet-navigáció

TabView alapértelmezés szerint számos gyakori navigációs forgatókönyvet támogat. Ez a szakasz ismerteti a beépített funkciókat, és javaslatokat nyújt az egyes alkalmazások számára hasznos további funkciókkal kapcsolatban.

A tabulátor és a kurzorbillentyű viselkedése

Amikor a fókusz a TabStrip területre kerül, a kijelölt TabViewItem kap fókuszt. A felhasználó ezután a Balra és a Jobbra nyílbillentyűvel áthelyezheti a fókuszt (nem a kijelölést) a tabulátorsáv más lapjaira. A nyílbillentyű fókusz a tabulátorsávon és az Új lap (+) gombon belül van beszorulva, ha jelen van. Ha a felhasználó ki szeretné helyezni a fókuszt a tabulátorsáv területéről, nyomja le a Tab billentyűt, amely a fókuszt a következő fókuszálható elemre helyezi át.

Fókusz áthelyezése a Tab billentyűvel

nyílbillentyűk nem váltják a fókuszt

Lap kiválasztása

Ha egy TabViewItem fókuszban van, nyomja le a Szóköz vagy a Enter billentyűt a TabViewItem kiválasztásához.

A fókusz áthelyezéséhez használja a nyílbillentyűket, majd nyomja le a Szóköz billentyűt a lap kiválasztásához.

Billentyűparancsok a szomszédos lapok kiválasztásához

Nyomja le a Ctrl+Tab billentyűkombinációt a következő TabViewItemkiválasztásához. Az előző TabViewItem kiválasztásához nyomja le a Ctrl+Shift+Tab billentyűkombinációt. E célból a tabulátorlista "hurkolt", ezért a következő lap kijelölése az utolsó lap kijelölésekor az első lap kijelölését eredményezi.

Lap bezárása

Nyomja le a Ctrl + F4 billentyűkombinációt a TabCloseRequested esemény létrehozásához. Kezelje az eseményt, és szükség esetén zárja be a lapot.

Tabulátor nézet létrehozása

A WinUI 3 Gallery alkalmazás interaktív példákat tartalmaz a legtöbb WinUI 3 vezérlőre, funkcióra és tulajdonságra. Szerezze be az alkalmazást a Microsoft Store áruházból vagy a forráskódot a GitHub -ról.

Az ebben a szakaszban szereplő példák különféle módszereket mutatnak be a TabView vezérlőelem konfigurálására.

Fülnézeti elemek

A TabView minden lapját egy TabViewItem vezérlőelem jelöli, amely magában foglalja a tabulátorsávban megjelenő lapot és a lapsáv alatt látható tartalmat is.

Lap konfigurálása

Minden TabViewItemhez beállíthat egy fejlécet és egy ikont, és megadhatja, hogy a felhasználó bezárhatja-e a lapot.

• A Fejléc tulajdonság általában egy sztringértékre van állítva, amely leíró címkét biztosít a laphoz. A Header tulajdonság azonban bármilyen objektum lehet. A HeaderTemplate tulajdonság segítségével megadhat egy DataTemplate-t, amely a fejlécadatok kötött megjelenítését határozza meg.
• Állítsa be a IconSource tulajdonságot a lap ikonjának megadásához.
• Alapértelmezés szerint a lapon megjelenik egy bezárás gomb (X). A IsClosable tulajdonságot úgy állíthatja be, hogy false elrejtse a bezárás gombot, és így biztosítsa, hogy a felhasználó ne tudja bezárni a lapot. (Ha az alkalmazáskódjában egy bezárási kérelem eseményen kívül zárja be a lapot, először ellenőrizze, hogy IsClosabletrue-e.)

A TabView esetében számos olyan beállítást konfigurálhat, amelyek az összes lapra vonatkoznak.

• Alapértelmezés szerint a bezárás gomb mindig megjelenik a bezárható lapoknál. A CloseButtonOverlayMode tulajdonságot beállíthatja úgy, hogy OnPointerOver módosítsa ezt a viselkedést. Ebben az esetben a kijelölt lap mindig a bezárás gombot jeleníti meg, ha az closable, de a nem kijelölt lapok csak akkor jelenítik meg a bezárás gombot, ha a lap closable, és a felhasználó mutatója rá van állítva.
• A tabulátorok méretének módosításához beállíthatja a TabWidthMode tulajdonságot. (A Width tulajdonságot figyelmen kívül hagyják a TabViewItem-en.) Ezek a TabViewWidthMode létrehozásának lehetőségei:
  • Equal – Minden lap szélessége azonos. Ez az alapértelmezett érték.
  • SizeToContent – Minden lap szélessége a lapon lévő tartalomhoz igazodik.
  • Compact – A nem kijelölt lapok összecsukódnak, hogy csak az ikont mutassák. A kijelölt lap úgy módosul, hogy a lapon belül megjelenjen a tartalom.

Tartalom

A kijelölt lapon megjelenő elemek hozzáadódnak a TabViewItemContent tulajdonságához. A TabViewItem egy ContentControl, így bármilyen típusú objektumot hozzáadhat tartalomként. Alkalmazhat egy DataTemplate--t is a ContentTemplate tulajdonságra. További információt a ContentControl osztályban talál.

A cikkben szereplő példák egy egyszerű esetet mutatnak be, amikor szöveget ad hozzá közvetlenül az XAML Content eleméhez. A valódi felhasználói felület azonban általában összetettebb. A fülnél tartalomként egy összetett felhasználói felület hozzáadásának gyakori módja, ha azt egy UserControl vagy Oldalkeretbe foglalja, és ezt adja hozzá a TabViewItem tartalmaként. Ez a példa feltételezi, hogy az alkalmazásnak van egy XAML UserControl PictureSettingsControlnevű vezérlője.

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

Statikus lapok

Ez a példa egy egyszerű TabView két statikus füllel. Mindkét tabulátorelem bekerül az XAML-be a TabView tartalmaként.

A TabView statikussá alakításához használja az alábbi beállításokat:

• Állítsa az IsAddTabButtonVisible tulajdonságot false értékre, hogy elrejtse az lap hozzáadása gombot, és megakadályozza az AddTabButtonClick esemény aktiválódását.
• Állítsa a CanReorderTabs tulajdonságot false, hogy a felhasználó ne húzza a lapokat egy másik sorrendbe.
• Minden egyes TabViewItemesetében állítsa a IsClosable tulajdonságot hamis értékre, hogy elrejtse a fül bezárása gombot, és megakadályozza, hogy a felhasználó kiváltsa a TabCloseRequested eseményt.

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

Dokumentumfülek

Alapértelmezés szerint a TabView dokumentumfülekhez van konfigurálva. A felhasználó új lapokat adhat hozzá, átrendezheti a lapokat, és bezárhatja a lapokat. Ebben a konfigurációban a AddTabButtonClick és TabCloseRequested eseményeket kell kezelnie a funkció engedélyezéséhez.

Amikor tabulátorokat ad hozzá a TabView-hoz, előfordulhat, hogy túl sok lap jelenik meg a tabulátorsávban. Ebben az esetben görgető lökhárítók jelennek meg, amelyek segítségével a felhasználó balra és jobbra görgetheti a lapsávot a rejtett lapok eléréséhez.

Ez a példa egy egyszerű TabView hoz létre az eseménykezelőkkel együtt a lapok megnyitásának és bezárásának támogatásához. Az TabView_AddTabButtonClick eseménykezelő bemutatja, hogyan vehet fel TabViewItem-et a kódba.

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

Az utolsó lap bezárásakor zárja be az ablakot

Ha az alkalmazás összes lapja bezárható, és az alkalmazásablaknak be kell zárnia az utolsó lap bezárásakor, akkor az TabCloseRequested eseménykezelőben is be kell zárnia az ablakot.

Először a App.xaml.cs fájlban adjon hozzá egy public static tulajdonságot, amely lehetővé teszi a TabView-t üzemeltető PageWindow-példány elérését. (Lásd a felhasználói felület migrációja.)

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

Ezután módosítsa a TabCloseRequested eseménykezelőt a Window.Close hívásához, ha az összes lap el lett távolítva a TabView nézetből.

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

Tabulátorfelbontás

Fül kiszakítás leírja, mi történik, ha egy felhasználó kihúz egy lapot a TabView fülsávról, és áthelyezi egy másik TabView-kontrollerbe, ami általában egy új ablakban történik meg.

A Windows App SDK 1.6-os verziótól kezdődően a TabView CanTearOutTabs tulajdonságot is kínál, amellyel továbbfejlesztett felületet biztosíthat a lapok új ablakba húzásához. Ha egy felhasználó a tabulátorsávból húz ki egy lapot, és ezzel a beállítással engedélyezve van, a húzás során azonnal létrejön egy új ablak, amely lehetővé teszi a felhasználó számára, hogy a képernyő szélére húzza a teljes méret érdekében, vagy egyetlen mozdulattal az ablakot. Ez az implementáció nem használ húzással használható API-kat, így az adott API-k korlátozásai nem érintik.

Ha a CanTearOutTabs tulajdonságot trueértékre állítja, ez okozza, hogy a lap kitépési események történnek meg a húzási és ejtési események helyett. A tabulátorlebontás implementálásához az alábbi eseményeket kell kezelnie:

• TabTearOutWindowRequested

  Ez az esemény akkor fordul elő, ha egy lapot először húznak ki a lapsávból. Kezelje azt egy új Ablak és TabView létrehozásához, amelybe a lap át lesz helyezve.

• FülKitépésKérése

  Ez az esemény egy új ablak megadása után következik be. Az áthelyezéshez mozgassa a kiszakadt fület az eredeti TabView-ból az új ablak TabView-jába.

• KülsőFülKitépésEltávolítása

  Ez az esemény akkor fordul elő, amikor egy kiszakadt lapot egy meglévő TabView fölé húznak. A TabView-ban, amely a kiszakadt lapot fogadja, kezelje úgy, hogy jelezze, el kell-e fogadni a lapot.

• ExternalTornOutTabsDropped

  Ez az esemény akkor fordul elő, ha egy kiszakadt lap egy meglévő TabView fölé húzódik, és a ExternalTornOutTabsDropping esemény azt jelzi, hogy az esés engedélyezett. A fogadó TabView-ban kezelje a kiszakadt lapot úgy, hogy eltávolítja azt az eredeti TabView-ból, majd a megadott pozícióban illeszti be a fogadó TabView-ba.

Ezek az események nem aktiválódnak, ha a fül leválasztása engedélyezve van: TabDragStarting, TabStripDragOver, TabStripDrop, TabDragCompleted, TabDroppedOutside.

Az alábbi példák bemutatják, hogyan implementálhatja az eseménykezelőket a laplebontás támogatásához.

A TabView beállítása

Ez az XAML beállítja a CanTearOutTabs tulajdonságot true, és beállítja a tabulátorlebontási eseménykezelőket.

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

Új ablak létrehozása és nyomon követése

A tabulátorbontáshoz új ablakokat kell létrehoznia és kezelnie az alkalmazásban.

Itt az összes aktív ablak nyomon követésére szolgáló lista jön létre App.xaml.cs. A OnLaunched metódus frissül, hogy nyomon kövesse az ablakot a létrehozása után. (Ez nem szükséges, ha a WindowHelper osztályt használja.)

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

Amikor megkezdődik a tabulátorbontás, a rendszer új ablakot kér. Itt a tabTearOutWindow változó hozzáférést biztosít az új ablakhoz a létrehozás után. A CreateWindow és TrackWindow segítő metódusok létrehoznak egy új ablakot, és hozzáadják az aktív ablakkövetési listához.

Az új ablak létrehozása után létre kell hoznia egy új lapot, és be kell állítania az ablak tartalmaként. Az új Lap tartalmaznia kell egy TabView-vezérlőt, amelybe a kiszakadt lapot áthelyezi az TabTearOutRequested eseménykezelőben.

Végül rendelje hozzá az új ablak AppWindow.Id értékét a args.NewWindowId tulajdonsághoz. Ezt a TabViewTabTearOutRequestedEventArgs.NewWindowId tulajdonságban fogja használni, így az adott eseménykezelőből érheti el az ablakot.

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

Ablak bezárása az utolsó lap bezárásakor

Ahogy korábban említettük, érdemes lehet bezárni az ablakot, amikor a TabView utolsó lapja be van zárva. Ha az alkalmazás több ablakkal rendelkezik, meg kell találnia a megfelelő ablakot a követett ablakok listájában való bezárásához. Ez a példa bemutatja, hogyan teheti ezt meg.

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

A lap áthelyezése az új ablakba

Az új ablak megadása után el kell távolítania a kiszakadt lapot a sender TabView nézetből, és hozzá kell adnia azt az új ablak TabView nézetéhez. Ebben a példában a public AddTabToTabs segédmetódus segítségével az új MainPage példány TabView eleméhez férhet hozzá az eredeti lappéldányból, hogy hozzáadhassa a kiszakadt lapot.

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

Húzzon át egy leszakított fület egy másik TabView-ra

Ha egy lap ki lett bontva, és egy új ablakba lett helyezve, ahogy az előző lépésekben látható, két dolog egyike történhet:

• A felhasználó áthúzhatja a lapot, és az az új ablakban marad. A kiszakadási folyamat itt véget ér, és nincs több esemény generálva.
• A felhasználó továbbra is visszahúzhatja a kiszakadt lapot egy meglévő TabView-vezérlőre. Ebben az esetben a folyamat folytatódik, és több esemény is létrejön, hogy eltávolíthassa a lapot az eredeti TabView nézetből, és beszúrhassa a külső lapot egy meglévő TabView-ba.

Ha a tabulátort a meglévő TabView fölé húzza, a ExternalTornOutTabsDropping esemény emelkedik fel. Az eseménykezelőben meghatározhatja, hogy a fül hozzáadása engedélyezett-e ebbe a TabView-ba. A legtöbb esetben csak az args.AllowDrop tulajdonságot kell beállítania true. Ha azonban a tulajdonság beállítása előtt bármilyen ellenőrzést végre kell hajtania, ezt itt teheti meg. Ha AllowDropfalseértékre van állítva, a tabulátor húzási művelete folytatódik, és a ExternalTornOutTabsDropped esemény nem kerül generálásra.

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

Ha AllowDroptrue van beállítva az ExternalTornOutTabsDropping eseménykezelőben, a ExternalTornOutTabsDropped esemény azonnal létrejön.

Az ExternalTornOutTabsDropped eseménykezelő ugyanazt a mintázatot követi, mint a TabTearOutRequested esemény, de fordítva, ezért el kell távolítania a fület az eredeti TabView-ból, és be kell illesztenie a sender TabView-ba.

A sender TabView az a vezérlő, amelybe a fül be van szúrva, ezért a GetParentTabView segédmetódust használjuk, hogy megtaláljuk a kiinduló fület. A kiszakadt TabViewItem-tel kezdődik, és a VisualTreeHelper segítségével felfelé lépked a vizuális fában, hogy megtalálja azt a TabView-t, amelyhez az elem tartozik. A TabView megtalálása után a TabViewItemet eltávolítják a TabItems gyűjteményéből, és beszúrják a sender TabView TabItems gyűjteményébe a args.DropIndexáltal meghatározott indexre.

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

TabView-lapok megjelenítése az ablak címsorában

Ahelyett, hogy a tabulátorok az ablak címsora alatti saját sorukat foglalják el, egyesítheti őket ugyanabba a területbe. Ezzel függőleges helyet takaríthat meg a tartalom számára, és modern érzetet kölcsönöz az alkalmazásnak.

Mivel a felhasználó áthúzhat egy ablakot a címsorával az ablak áthelyezéséhez, fontos, hogy a címsor ne legyen teljesen tele lapokkal. Ezért ha tabulátorokat jelenít meg egy címsorban, meg kell adnia a címsor egy részét, hogy húzható területként legyen lefoglalva. Ha nem határoz meg húzható régiót, a teljes címsor húzható lesz, ami megakadályozza, hogy a lapok bemeneti eseményeket fogadjanak. Ha a TabView az ablak címsorában jelenik meg, akkor mindig tartalmaznia kell egy TabStripFooter-et a TabView-on belül, és jelölje meg húzható régióként.

További információ: Címsor testreszabása

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

Billentyűzetes útmutató fejlesztőknek

Egyes alkalmazásokhoz speciálisabb billentyűzetvezérlésre lehet szükség. Fontolja meg az alábbi billentyűparancsok implementálását, ha azok megfelelnek az alkalmazásnak.

• Ctrl + T új lapot kell megnyitnia. Ez a lap általában előre definiált dokumentummal van feltöltve, vagy üresen jön létre, és egyszerűen kiválaszthatja a tartalmát. Ha a felhasználónak tartalmat kell választania egy új laphoz, fontolja meg a beviteli fókuszt a tartalomkijelölési vezérlőnek.
• Ctrl +W billentyűkombinációval zárja be a kijelölt lapot. Ne feledje, hogy a TabView automatikusan kijelöli a következő lapot.
• Ctrl + Shift + T a legutóbb bezárt lapokat kell megnyitnia (pontosabban az új lapokat, ugyanazzal a tartalommal, mint a legutóbb bezárt lapok). Kezdje a legutóbb bezárt lapfülkel, és haladjon vissza az időben minden további alkalommal, amikor a parancsikont meghívja. Vegye figyelembe, hogy ehhez fenn kell tartani a legutóbb bezárt lapok listáját.
• Ctrl + 1 a tabulátorlista első lapját kell kiválasztania. Hasonlóképpen, a Ctrl +2 billentyűkombinációval válassza a második lapot, a Ctrl +3 billentyűkombinációval pedig a harmadikat, és így tovább a Ctrl + 8 billentyűkombinációval.
• Ctrl +9 a tabulátorlista utolsó lapját kell kijelölnie, függetlenül attól, hogy hány lap van a listában.
• Ha a tabulátorok nem csupán a bezárási parancsot (például lap duplikálását vagy rögzítését) kínálják, a helyi menüben megjelenítheti a lapon elvégezhető összes műveletet.

Böngészőstílusú billentyűzetezési viselkedés implementálása

Ez a példa számos fenti javaslatot implementál egy TabView. Például, ez a példa megvalósítja a Ctrl + T, Ctrl + W, Ctrl + 1-8és Ctrl + 9billentyűkombinációkat.

<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 és WinUI 2

Az UWP-alkalmazások TabView vezérlője a WinUI 2 részeként érhető el. További információ, beleértve a telepítési utasításokat, lásd WinUI 2. A vezérlő API-k a Microsoft.UI.Xaml.Controls névtérben találhatók.

A WinUI 2 TabView verziója nem tartalmazza a füllecsatolási API-kat.

Javasoljuk a legújabb WinUI 2 használatát, hogy megszerezze a legújabb stílusokat, sablonokat és funkciókat az összes vezérlőhöz. A WinUI 2.2 vagy újabb verziója egy új sablont tartalmaz ehhez a vezérlőhöz, amely lekerekített sarkokat használ. További információ: Sarok rádiusz.

Ha a jelen cikkben szereplő kódot a WinUI 2-vel szeretné használni, használjon egy aliast az XAML-ben (muxc) a projektben szereplő Windows felhasználói felületi kódtár API-k megjelenítéséhez. További információt A WinUI 2 használatának első lépéseit ismertető cikkben talál.

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

<muxc:TabView />

Kapcsolódó cikkek

• Lista/Részletek
• NavigációsNézet