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

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:

A 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.
Dokumentum lapok a böngészőben található lapok, például 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 a 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é Windows tervezési útmutatót, és ha több statikus navigációs elem is van, érdemes lehet NavigationView vezérlőelemet használni.

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 tabulátorsáv élőfejet és élőlábat is rendelkezik, de a dokumentumtól eltérően a tabulátor élőfeje és élőlába a sáv bal és jobb szélén található.

Ez a kép a tabulátor nézetvezérlő részeit mutatja. A tabulátorcsík négy lapot tartalmaz, és egy élőfejet és élőlábat tartalmaz, amelyek a sáv bal és jobb szélén találhatók.

TabViewItem-részek

A képen a TabViewItem vezérlő részei láthatók. 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 mutatja. Egy egyéni lap van kijelölve, amely ikonnal és címkével rendelkezik, és a lap alatt egy tartalomterület található.

Recommendations

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 egy aktív lap. Ha a felhasználó bezárja a kijelölt lapot, vagy a kijelölt lapot egy másik ablakba viszi át, egy másik lapnak kell aktívvá válnia. A TabView megpróbálja ezt automatikusan elérni azzal, hogy kijelöli a következő lapot. Ha jó oka van arra, hogy az alkalmazásának engedélyeznie kell egy nem kijelölt fület tartalmazó TabView-nézetet, akkor a TabView tartalomterülete egyszerűen üres lesz.

A TabView alapértelmezés szerint számos gyakori billentyűzet-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 fókuszba kerül. 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 ki szeretné helyezni a fókuszt a tabulátorsáv területéről, a felhasználó lenyomhatja a Tab billentyűt, amely a fókuszt a következő fókuszba helyezi.

Fókusz áthelyezése a Tab billentyűkombinációval

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

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

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

Lap kiválasztása

Ha egy TabViewItem fókuszba kerül, nyomja le a Szóköz vagy az Enter billentyűkombinációt a TabViewItem kiválasztásához.

A nyílbillentyűkkel helyezze át a fókuszt, majd nyomja le a Szóköz billentyűt a tabulátor kiválasztásához.

Tab kiválasztása szóköz billentyűvel

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

A Következő TabViewItem kiválasztásához nyomja le a Ctrl+Tab billentyűkombinációt. Az előző TabViewItem kijelöléséhez nyomja le a Ctrl+Shift+Tab billentyűkombinációt. E célból a fülsor "körbe járó", ezért a következő lap választása az utolsó lap választásakor az első lap választását eredményezi.

Lap bezárása

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

Jótanács

További információkért tekintse meg a jelen cikk későbbi, fejlesztőknek szánt billentyűzettel kapcsolatos útmutatóját .

Tabulátor nézet létrehozása

Fontos API-k: TabView osztály, TabViewItem osztály

Nyissa meg a WinUI 3 Katalógus alkalmazást, és tekintse meg működés közben a TabView-t

A WinUI 3 Katalógus alkalmazás interaktív példákat tartalmaz a WinUI vezérlőire és funkcióira. Kérje le az alkalmazást a Microsoft Áruházból vagy keresse meg a forráskódot a GitHub webhelyen.

Az ebben a szakaszban szereplő példák számos módszert mutatnak be a TabView-vezérlők konfigurálására.

Fülnézeti elemek

A TabView minden lapját egy TabViewItem vezérlőelem képviseli, 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ággal olyan DataTemplate-adatkészletet is megadhat, amely meghatározza a kötött fejlécadatok megjelenítését.
Az IconSource tulajdonság beállításával adjon meg egy ikont a laphoz.
Alapértelmezés szerint a lapon egy bezárás gomb (X) látható. Az IsClosable tulajdonságot úgy állíthatja be false, hogy elrejtse a bezárás gombot, és biztosítsa, hogy a felhasználó ne tudja bezárni a lapot. (Ha az alkalmazás kódjában zárja be a lapokat egy bezárási kérés eseményen kívül, először ellenőrizze, hogy IsClosable az. true)

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ág OnPointerOver beállításával módosíthatja 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 TabWidthMode tulajdonságot beállíthatja a lapok méretének módosításához. (A Width tulajdonságot a TabViewItem esetében figyelmen kívül hagyják.) A TabViewWidthMode enumeráció 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.

Content

A kijelölt lapon megjelenő elemek hozzáadódnak a TabViewItem Tartalom tulajdonságához. A TabViewItem egy ContentControl, így bármilyen típusú objektumot hozzáadhat tartalomként. DataTemplate-et is alkalmazhat 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. Egy gyakori módszer az összetett felhasználói felület lap tartalmaként való hozzáadására, ha azt egy UserControl-ba vagy Lap-ba foglalja, majd a TabViewItem tartalmaként adja hozzá. 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-t mutat be két statikus fülkel. 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:

Az IsAddTabButtonVisible tulajdonság false beállításával elrejtheti a Hozzáadás lap gombot, és megakadályozhatja az AddTabButtonClick esemény létrehozását.
Állítsa be a CanReorderTabs tulajdonságot, hogy megakadályozza, hogy false a felhasználó más sorrendbe húzza a lapokat.
Minden TabViewItem esetében állítsa az IsClosable tulajdonságot hamisra, hogy elrejtse a tabulátorbezárás gombot, hogy a felhasználó ne emelje fel 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 az AddTabButtonClick és a 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ő indikátorok jelennek meg, amelyek lehetővé teszik, hogy a felhasználó balra és jobbra görgetni tudja a lapsávot a rejtett lapok eléréséhez.

Ez a példa egy egyszerű TabView-t és eseménykezelőket hoz létre 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 a 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ő WindowPage-példány elérését. (Lásd : Az aktuális ablak nyomon követése azAblakozás áttekintésében.)

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

Megjegyzés:

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

A tabulátorfelbontás azt ismerteti, hogy mi történik, ha egy felhasználó egy lapot húz ki a TabView tabulátorsávból, és áthelyezi egy másik TabView-vezérlőbe, általában egy új ablakban.

Az Windows App SDK 1.6-os verziótól kezdve a TabView rendelkezik egy CanTearOutTabs tulajdonságtal, amellyel továbbfejlesztett felületet biztosíthat a tabulátorok új ablakba húzásához. Ha egy felhasználó egy lapot húz ki a tabulátorsávból, miközben ez a beállítás engedélyezve van, a húzás során azonnal létrejön egy új ablak, amely lehetővé teszi, hogy a felhasználó a képernyő szélére húzza a teljes méret eléréséhez, vagy egyetlen mozdulattal illessze 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.

Amikor a CanTearOutTabs tulajdonságot true beállítja, a húzás és ejtés események helyett a tabulátorkibontási események keletkeznek. 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.
TabTearOutRequested

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

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.
KülsőTépettFülekLerakva

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 jelennek meg, ha a tabulátorkibontás engedélyezve van: TabDragStarting, TabStripDragOver, TabStripDrop, TabDragCompleted, TabDroppedOutside.

Caution

A fül leválasztás támogatott a rendszergazdaként futó folyamatokban.

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

Az alkalmazásban történő fül kitépéséhez új ablakokat kell létrehoznia és kezelnie.

Jótanács

A WinUI 3 Katalógus alkalmazás tartalmaz egy osztályt WindowHelper , amely megkönnyíti a windows kezelését az alkalmazásban. A GitHub WinUI 3 Gallery adattárából másolhatja: WindowHelper.cs. Ezt a segédosztályt javasoljuk a tab fül leválasztásának implementálásához. Tekintse meg a GitHub TabViewWindowingSamplePage-ot a használatához.

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 lapnak tartalmaznia kell egy TabView-vezérlőt, amelybe az eseménykezelőben áthelyezi a TabTearOutRequested kiszakadt lapot.

Jótanács

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 a args.NewWindowId tulajdonsághoz. Ez a TabViewTabTearOutRequestedEventArgs.NewWindowId tulajdonságban lesz használatos, így az adott eseménykezelő ablakához férhet hozzá.

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 kell ezt megtenni.

// 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 lapot a meglévő TabView fölé húzza, az ExternalTornOutTabsDropping esemény bekövetkezik. 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 AllowDrop úgy van beállítva, hogy false, a tabulátor húzási művelete folytatódik, és a ExternalTornOutTabsDropped esemény nem kiváltódik.

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.

Megjegyzés:

Az Dropped esemény neve nem felel meg közvetlenül a húzd-és-ejtsd API-kban a 'drop' művelet fogalmának. Itt a felhasználónak nem kell felengednie a lapot egy drop művelet végrehajtásához. Az esemény akkor jön elő, amikor a lap a tabulátorsávon van, és a kód végrehajtásakor a tabulátor a TabView-ba kerül .

Az ExternalTornOutTabsDropped eseménykezelő ugyanazt a mintát követi, mint a TabTearOutRequested esemény, de fordított; el kell távolítania a lapot az eredeti TabView-ból, és be kell szúrnia a sender TabView-ba.

A sender TabView az a vezérlő, amelybe a lap be van szúrva, ezért a GetParentTabView segédmetódussal keressük meg az eredeti lapot. A kiszakított TabViewItem-el kezdődik, és a VisualTreeHelper használatával lépked a vizuális fán, és megkeresi azt a TabView-t, amelyhez az elem tartozik. A TabView megtalálása után a TabViewItem eltávolításra kerül a TabItems gyűjteményből, és a sender-ben megadott indexnél bekerül a TabItems TabView args. gyűjteményébe.

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

Jótanács

Ha a Windows Közösségi eszközkészletet használja, az eszközkészlet FindAscendant helyett használhatja a GetParentTabView segédmetódust.

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, amikor tabulátorokat jelenít meg a címsorban, meg kell adnia, hogy a címsor egy része 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 egy ablak címsorában jelenik meg, akkor mindig tartalmaznia kell egy TabStripFootert a TabView-ban , és jelöljön 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;
}

Megjegyzés:

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 , valamint új ablak létrehozása és nyomon követése ebben a cikkben.

Billentyűzetes útmutató fejlesztőknek

Jótanács

A beépített billentyűzettámogatással kapcsolatos további információkért tekintse meg a jelen cikk korábbi, billentyűzetalapú navigációt ismertető szakaszát.

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

A Ctrl +T billentyűkombinációval új lapot nyit meg. 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.
A 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.
A Ctrl + Shift +T billentyűkombinációval megnyithatja a legutóbb bezárt lapokat (pontosabban a legutóbb bezárt lapokkal megegyező tartalommal rendelkező új lapokat). 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 választja ki a tabulátorlista első lapját. 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.
A Ctrl +9 billentyűkombinációval jelölje ki a tabulátorlista utolsó lapját, 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-on. Ez a példa a Ctrl + T, a Ctrl + W, a Ctrl + 1-8 és a Ctrl +9 billentyűkombinációt implementálja.

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

Visszajelzés

Hasznosnak találta ezt az oldalt?

Last updated on 2026-02-25

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

Tab nézet

Ez a megfelelő vezérlő?

Anatómia

TabView részei

TabViewItem-részek

Recommendations

Tabulátor kijelölése

Billentyűzet-navigáció

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

Lap kiválasztása

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

Lap bezárása

Tabulátor nézet létrehozása

Fülnézeti elemek

Lap konfigurálása

Content

Statikus lapok

Dokumentumfülek

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

Tabulátorfelbontás

A TabView beállítása

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

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

A lap áthelyezése az új ablakba

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

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

Billentyűzetes útmutató fejlesztőknek

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

Kapcsolódó cikkek

Visszajelzés

További források