Megosztás a következőn keresztül:


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.

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

Ez a kép a fül vezérlőelem részeit jeleníti meg. A tabulátorcsík négy fület tartalmaz, valamint egy fejlécet és egy láblécet, amelyek 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.

Ez a kép a tabulátornézet elemvezérlőjének részeit jeleníti meg. Kijelöl egy egyéni lapot, amely ikonnal és címkével rendelkezik, és egy tartalomterület van a lap alatt.

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

Fókusz áthelyezése Tab billentyűvel

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

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.

fül 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.

Borravaló

További információért lásd a cikk későbbi részében található fejlesztőknek szóló billentyűzet útmutatót.

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

Jegyzet

Ez a példa egyetlen ablakkal (MainWindow) rendelkező alkalmazáshoz használható. Ha az alkalmazásnak több ablaka van, vagy engedélyezte a lapfelbontást, nyomon kell követnie az ablakokat, majd meg kell találnia a megfelelőt a bezáráshoz. Erre a következő szakaszban talál egy példát.

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.

Figyelem

A tabulátorbontás rendszergazdai jogosultságúként futó folyamatokban támogatott.

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.

Borravaló

A WinUI-katalógus alkalmazás tartalmaz egy WindowHelper osztályt, amely megkönnyíti az alkalmazások ablakainak kezelését. A GitHubról átmásolhatja a WinUI-katalógus adattárában: WindowHelper.cs. Ezt a segédosztályt javasoljuk a fül leválasztás implementálásához. Tekintse meg a TabViewWindowingSamplePage oldalt a GitHubon, hogy lássa, hogyan használják.

Ebben a cikkben a segédmetódusok a WindowHelper.cs-ból vannak másolva, de módosítva és sorközben megjelenítve az olvashatóság érdekében.

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.

Borravaló

Ebben a példában egy új MainPage osztályt hozunk létre, mivel csak üres TabView-t tartalmaz (közvetlenül az XAML-ben nem adunk hozzá lapokat). Ha MainPage olyan egyéb felhasználói felületi elemeket is tartalmaz, amelyek nem jelennek meg a kiszakadt ablakban, létrehozhat egy külön lapot, amely csak a szükséges elemeket tartalmazza (beleértve legalább egy TabView-t), és létrehozhatja a lap egy példányát.

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.

Jegyzet

Az eseménynévben szereplő Dropped nem felel meg közvetlenül az húzás művelet gondolatának a húzási API-kban. Itt a felhasználónak nem kell felengednie a lapot egy művelet végrehajtásához. Az esemény akkor jön létre, amikor a fület a tabulátorsáv fölött tartják, és a kódot végrehajtják, hogy a fület a TabView-be ejtjük.

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

Borravaló

Ha a Windows közösségi eszközkészletethasználja, az eszközkészlet FindAscendant segédmetódusát használhatja GetParentTabViewhelyett.

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

Tabulátorok a címsorban

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

Jegyzet

Az ablakra való hivatkozás módja az alkalmazás ablakainak nyomon követésétől függően változhat. További információ: Az ablak bezárása az utolsó lap bezárásakor és Új ablak létrehozása és nyomon követése ebben a cikkben.

Billentyűzetes útmutató fejlesztőknek

Borravaló

A beépített billentyűzettámogatásról további információt a jelen cikk korábbi részében, a Billentyűzet navigáció cím alatt talál.

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.

Figyelmeztetés

Ha TabView ad hozzá egy meglévő alkalmazáshoz, előfordulhat, hogy már létrehozott olyan billentyűparancsokat, amelyek megfeleltetik az ajánlott TabView-billentyűparancsok billentyűkombinációit. Ebben az esetben meg kell fontolnia, hogy megtartja-e a meglévő billentyűparancsokat, vagy intuitív lapfelületet kínál a felhasználó számára.

  • 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

Fontos

A cikkben szereplő információk és példák a Windows App SDK és a WinUI 3használó alkalmazásokra vannak optimalizálva, de általánosan alkalmazhatók a WinUI 2használó UWP-alkalmazásokra. A platformspecifikus információkért és példákért tekintse meg az UWP API-referenciát.

Ez a szakasz az UWP- vagy WinUI 2-alkalmazások vezérlőjének használatához szükséges információkat tartalmazza.

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