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.
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
- Fontos API-k: TabView osztály, TabViewItem osztály
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, hogyIsClosable
true
-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 aTabViewItem
-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 PictureSettingsControl
nevű 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ő Page
Window
-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:
-
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.
-
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.
-
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.
-
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 AllowDrop
false
é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 AllowDrop
true
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 GetParentTabView
helyett.
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;
}
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
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.
- WinUI 2 Apis:TabView osztály, TabViewItem osztály
-
Nyissa meg a WinUI 2 Katalógus alkalmazást, és tekintse meg a TabView-t működés közben. A WinUI 2 Gallery alkalmazás interaktív példákat tartalmaz a WinUI 2 vezérlők, funkciók és funkciók többségére. Szerezze be az alkalmazást a Microsoft Store
, vagy kérje le a forráskódot GitHub .
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
Windows developer