Sdílet prostřednictvím

Zobrazení záložek

Ovládací prvek TabView je způsob, jak zobrazit sadu karet a jejich odpovídající obsah. Ovládací prvky TabView jsou užitečné pro zobrazení několika stránek (nebo dokumentů) obsahu a zároveň umožňují uživateli změnit uspořádání, zavřít nebo otevřít nové karty.

Příklad TabView

Je to správná kontrola?

Obecně platí, že uživatelská rozhraní na záložkách mají jeden ze dvou různých stylů, které se liší ve funkci a vzhledu:

  • Statické karty jsou takové karty, které se často nacházejí v oknech nastavení. Obsahují nastavený počet stránek v pevném pořadí, které obvykle obsahují předdefinovaný obsah.
  • Záložky dokumentu představují typ záložek nalezených v prohlížeči, jako je Microsoft Edge. Uživatelé mohou vytvářet, odebírat a měnit uspořádání karet, přesouvat karty mezi okny a měnit obsah karet.

Ve výchozím nastavení je TabView nakonfigurovaný tak, aby poskytoval karty dokumentů. TabView doporučujeme, když uživatelé budou moct:

  • Dynamicky otevírejte, zavírejte nebo přeuspořádejte karty.
  • Dokumenty nebo webové stránky můžete otevírat přímo na kartách.
  • Přetáhněte karty mezi okny.

Rozhraní API TabView umožňuje konfiguraci ovládacího prvku pro statické karty. Pokud ale chcete postupovat podle pokynů k návrhu Windows, a pokud existuje více než několik statických navigačních položek, zvažte použití navigationView ovládacího prvku.

Anatomie

Uživatelské rozhraní tabbed se vytvoří pomocí ovládacího prvku TabView a jednoho nebo více ovládacích prvků TabViewItem. TabView obsahuje instance TabViewItem, což představuje jednu kartu a její obsah.

Části TabView

Tento obrázek ukazuje části ovládacího prvku TabView. Pruh tabulátoru má záhlaví a zápatí, ale na rozdíl od dokumentu jsou u pruhu tabulátoru záhlaví úplně vlevo a zápatí úplně vpravo.

Tento obrázek zobrazuje části ovládacího prvku pro zobrazení karet. Lišta tabulátoru obsahuje čtyři tabulátory a má záhlaví a zápatí, která jsou zcela vlevo a zcela vpravo na liště.

Části TabViewItem

Tento obrázek ukazuje části ovládacího prvku TabViewItem. I když se obsah zobrazuje uvnitř ovládacího prvku TabView, obsah je ve skutečnosti součástí TabViewItem.

Tento obrázek ukazuje části ovládacího prvku zobrazení karty. Je vybrána jedna karta, která má ikonu a popisek, a pod kartou je umístěna oblast obsahu.

Recommendations

Výběr záložky

Většina uživatelů má zkušenosti s používáním karet dokumentů jednoduše pomocí webového prohlížeče. Když ve vaší aplikaci používají záložky dokumentů, jejich zkušenost ovlivňuje očekávání ohledně toho, jak by se vaše záložky měly chovat.

Bez ohledu na to, jak uživatel pracuje se sadou karet dokumentu, by měla být vždy aktivní karta. Pokud uživatel zavře vybranou kartu nebo přetáhne vybranou kartu do jiného okna, měla by se stát aktivní kartou jiná karta. TabView se pokusí automaticky vybrat další kartu. Pokud máte dobrý důvod, proč by vaše aplikace měla povolit TabView s nevybranou kartou, oblast obsahu TabView bude jednoduše prázdná.

Navigace pomocí klávesnice

TabView ve výchozím nastavení podporuje řadu běžných scénářů navigace pomocí klávesnice. Tato část vysvětluje předdefinované funkce a poskytuje doporučení k dalším funkcím, které můžou být užitečné pro některé aplikace.

Chování klávesy Tab a kurzorových kláves

Když se fokus přesune do oblasti tabStrip, vybraný TabViewItem získá fokus. Uživatel pak může použít šipky vlevo a vpravo k přesunutí fokusu (nikoli výběru) na jiné záložky na panelu tabulek. Fokus šipky je zachycen uvnitř pruhu tabulátoru a tlačítka pro přidání (+), pokud je přítomen. Pokud chcete přesunout fokus mimo oblast pásu karet, může uživatel stisknout klávesu Tab, která přesune fokus na další fokuselný prvek.

Přesuňte fokus pomocí tabulátoru

Přesun fokusu pomocí tabulátoru

klávesy se šipkami nezaměřují fokus

Klávesy šipky nemění fokus

Výběr karty

Když má TabViewItem fokus, stiskněte mezerník nebo Enter pro výběr tohoto TabViewItem.

Stisknutím kláves se šipkami přesuňte fokus a stisknutím klávesy Mezerník vyberte kartu.

Mezerníkem vyberte záložku

Klávesové zkratky pro výběr sousedních karet

Stisknutím Ctrl+Tab vyberte další TabViewItem. Stisknutím Ctrl+Shift+Tab vyberte předchozí TabViewItem. Pro tyto účely je seznam karet navržen tak, aby se opakoval, takže výběr další karty při výběru poslední karty způsobí, že se vybere první karta.

Zavření záložky

Stisknutím kláves Ctrl+ F4 vyvoláte událost TabCloseRequested. Zpracujte událost a kartu zavřete, pokud je to vhodné.

Návod

Další informace najdete v tématu Pokyny k klávesnici pro vývojáře dále v tomto článku.

Vytvořte zobrazení karet

Otevřete aplikaci Galerie WinUI 3 a podívejte se na kartu TabView v akci

Aplikace WinUI 3 Gallery obsahuje interaktivní příklady většiny ovládacích prvků, vlastností a funkcionality WinUI 3. Získání aplikace z Microsoft Storu nebo získání zdrojového kódu na GitHubu

Příklady v této části ukazují různé způsoby konfigurace ovládacího prvku TabView.

Položky záložek

Každá karta v TabView je reprezentována ovládacím prvkem TabViewItem, který obsahuje jak kartu zobrazenou na liště karet, tak i obsah zobrazený pod lištou karet.

Nakonfigurujte kartu

Pro každý TabViewItem můžete nastavit záhlaví a ikonu a určit, zda uživatel může zavřít kartu.

  • Vlastnost Header je obvykle nastavena na řetězcovou hodnotu, která poskytuje popisný štítek pro kartu. Vlastnost Header však může být libovolným objektem. Můžete také použít vlastnost HeaderTemplate k určení DataTemplate definující způsob zobrazení vázaných dat záhlaví.
  • Nastavte vlastnost IconSource pro určení ikony záložky.
  • Ve výchozím nastavení se na kartě zobrazuje tlačítko pro zavření (X). Vlastnost IsClosable můžete nastavit na false, aby se skrylo tlačítko Zavřít a zajistilo se, že uživatel nemůže zavřít kartu. (Pokud zavíráte karty v kódu aplikace mimo událost požadování zavření , měli byste nejprve zkontrolovat, zda IsClosable je true.)

Pro TabView můžete nakonfigurovat několik možností, které platí pro všechny záložky.

  • Ve výchozím nastavení se tlačítko Zavřít vždy zobrazuje pro zavíratelné karty. Pokud chcete toto chování změnit, můžete nastavit vlastnost CloseButtonOverlayMode na OnPointerOver. V tomto případě vybraná karta vždy zobrazuje tlačítko zavřít, pokud je možné ji zavřít, ale nevybrané karty zobrazují toto tlačítko zavřít pouze v případě, že je možné kartu zavřít a uživatel má nad ní ukazatel myši.
  • Můžete nastavit vlastnost TabWidthMode, aby se změnil způsob, jakým jsou záložky velké. (Vlastnost Width je při TabViewItemignorována.) Toto jsou možnosti v TabViewWidthMode výčtu:
    • Equal – každá karta má stejnou šířku. Toto je výchozí hodnota.
    • SizeToContent – Každá karta upraví svoji šířku podle obsahu uvnitř karty.
    • Compact – nevybrané karty se sbalí, aby se zobrazila jenom jejich ikona. Vybraná karta se upraví tak, aby zobrazovala obsah na kartě.

Content

Prvky zobrazené na vybrané kartě jsou přidány do vlastnosti Content objektu TabViewItem. TabViewItem je ContentControl, takže můžete přidat libovolný typ objektu jako obsah. Můžete také použít DataTemplate na vlastnost ContentTemplate. Další informace najdete ve třídě ContentControl.

Příklady v tomto článku ukazují jednoduchý případ přidání textu přímo do Content elementu XAML. Skutečné uživatelské rozhraní je ale obvykle složitější. Běžným způsobem, jak přidat složité uživatelské rozhraní jako obsah karty, je zapouzdřit ho do UserControl nebo Pagea přidat ho jako obsah TabViewItem. Tento příklad předpokládá, že vaše aplikace má Xaml UserControl s názvem PictureSettingsControl.

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

Statické karty

Tento příklad ukazuje jednoduchý TabView se dvěma statickými záložkami. Obě záložky jsou v XAML přidány jako obsah TabView.

Pokud chcete nastavit, aby byl TabView statický, použijte tato nastavení:

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

Karty dokumentů

Ve výchozím nastavení je TabView nakonfigurován pro karty dokumentů. Uživatel může přidat nové panely, změnit uspořádání panelů a zavřít panely. V této konfiguraci je třeba zpracovat události AddTabButtonClick a TabCloseRequested, aby byla funkce povolena.

Když se karty přidají do objektu TabView, může se stát, že v pruhu karet se může zobrazit příliš mnoho karet. V tomto případě se zobrazí posuvníky, které uživateli umožní posunout pás karet vlevo a vpravo, aby získal přístup ke skrytým kartám.

Tento příklad vytvoří jednoduchou TabView spolu s obslužnými rutinami, které podporují otevírání a zavírání záložek. Obslužná rutina události TabView_AddTabButtonClick ukazuje, jak přidat TabViewItem v kódu.

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

Zavřete okno při zavření poslední záložky

Pokud jsou všechny karty v aplikaci uzavíratelné a okno aplikace může zavřít při zavření poslední karty, měli byste také okno zavřít v obslužné rutině události TabCloseRequested.

Nejprve do souboru App.xaml.cs přidejte vlastnost public static, která vám umožní přístup k instanci Window z Page, která hostuje TabView. (cs: (Viz Sledování aktuálního okna v Přehled okenního systému.)

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

Poté upravte obslužnou rutinu události TabCloseRequested tak, aby zavolala metodu Window.Close, pokud byly všechny karty odstraněny z TabView.

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

Poznámka:

Tento příklad funguje pro aplikaci s jedním oknem (MainWindow). Pokud má vaše aplikace více oken nebo jste povolili odtrhání tabulátoru, musíte sledovat okna a pak najít tu správnou pro zavření. Příklad najdete v další části.

Odtrhání tabulátoru

Odtržení karty popisuje, co se stane, když uživatel přetáhne kartu z lišty karet TabView a přesune ji do jiného ovládacího prvku TabView, obvykle v novém okně.

Od sady Windows App SDK 1.6 má TabView vlastnost CanTearOutTabs, kterou můžete nastavit tak, aby poskytovalo vylepšené prostředí pro přetahování karet do nového okna. Když uživatel přetáhne kartu mimo pruh karet s touto možností, vytvoří se během přetažení nové okno, které uživateli umožní přetáhnout ho na okraj obrazovky, aby se maximalizovalo nebo přichycení okna jedním hladkým pohybem. Tato implementace také nepoužívá rozhraní API pro přetahování myší, takže to nemá vliv na žádná omezení v těchto rozhraních API.

Když nastavíte CanTearOutTabs vlastnost true, způsobí, že tabulátoru události vyvolány místo přetažení událostí. Pokud chcete implementovat odtržení panelu, musíte zpracovat tyto události:

  • TabTearOutOknoPožadováno

    K této události dochází, když je karta poprvé přetažena z panelu karet. Zpracujte to a vytvořte nové okno a TabView, do kterého se karta přesune.

  • Požadováno Vydělení Karty

    Tato událost nastane poté, co bylo poskytnuto nové okno. Zpracujte ji a přesuňte kartu odtrženou z původního objektu TabView do objektu TabView v novém okně.

  • ExternalTornOutTabsDropping

    K této události dochází, když je vytržená karta přetažena přes existující TabView. Zpracujte to v objektu TabView, který přijímá odtrženou kartu, aby se určilo, zda má být karta přijata nebo ne.

  • ExternalTornOutTabsDrop

    K této události dochází, když je odtržená karta přetažena přes existující TabView a událost ExternalTornOutTabsDropping ukázala, že je přetažení povoleno. Zpracujte ji v objektu TabView, který přijímá odtrženou kartu, aby se odebrala karta z původního objektu TabView a vložte ji do přijímajícího objektu TabView v zadaném indexu.

Tyto události nejsou vyvolány, pokud je povoleno odtržení tabulátoru: TabDragStarting, TabStripDragOver, TabStripDrop, TabDragCompleted, TabDroppedOutside.

Upozornění

V procesech se zvýšenými oprávněními správce se podporuje odtržení tabulátoru.

Následující příklady ukazují, jak implementovat obslužné rutiny událostí pro podporu odtržení tabulátoru.

Nastavení zobrazení TabView

Tento XAML nastaví vlastnost CanTearOutTabs na true a nastaví obslužné rutiny pro události odtrhnutí tabulátoru.

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

Vytvoření a sledování nového okna

Odtržení tabulátoru vyžaduje, abyste ve své aplikaci vytvořili a spravlili nová okna.

Návod

Aplikace Galerie WinUI obsahuje třídu WindowHelper, která usnadňuje správu oken v aplikaci. Můžete ho zkopírovat z GitHubu v úložišti Galerie WinUI: WindowHelper.cs. Tuto pomocnou třídu doporučujeme k implementaci odtržení záložek. Podívejte se na TabViewWindowingSamplePage na GitHubu, abyste viděli, jak se používá.

V tomto článku jsou pomocné metody zkopírovány z WindowHelper.cs, ale jsou upraveny a zobrazeny v textu pro čitelnost.

Tady je seznam pro sledování všech aktivních oken vytvořen v App.xaml.cs. Metoda OnLaunched se aktualizuje, aby po vytvoření sledovala okno. (To není potřeba, pokud používáte třídu WindowHelper.)

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

Když začne odtržení tabulátoru, bude požadováno nové okno. Tady proměnná tabTearOutWindow poskytuje přístup k novému okně po jeho vytvoření. Pomocné metody CreateWindow a TrackWindow vytvoří nové okno a přidá ho do aktivního seznamu sledování oken.

Po vytvoření nového okna musíte vytvořit novou stránku a nastavit ji jako obsah okna. Nový Page musí obsahovat ovládací prvek TabView, do kterého přesunete vytrženou kartu v obslužné rutině události TabTearOutRequested.

Návod

V tomto příkladu vytvoříme novou třídu MainPage, protože obsahuje pouze prázdnou tabView (žádné karty nejsou přidány přímo v XAML). Pokud MainPage obsahuje další prvky uživatelského rozhraní, které by se neměly zobrazovat v okně roztrhané části, můžete vytvořit samostatnou stránku, která obsahuje jenom požadované prvky (včetně alespoň TabView) a vytvořit instanci této stránky.

Nakonec přiřaďte AppWindow.Id nového okna k vlastnosti args.NewWindowId. Toto se použije ve vlastnosti TabViewTabTearOutRequestedEventArgs.NewWindowId, abyste měli přístup k oknu z této obslužné rutiny události.

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

Zavření okna při zavření poslední karty

Jak už jsme zmínili dříve, můžete chtít okno zavřít, když se zavře poslední karta v ovládacím prvku TabView. Pokud má vaše aplikace více oken, musíte najít správné okno, abyste zavřeli seznam sledovaných oken. Tento příklad ukazuje, jak to udělat.

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

Přesuňte kartu do nového okna

Po poskytnutí nového okna je nutné odebrat vytaženou kartu z sender TabView a přidat ji do TabView v novém okně. V tomto příkladu vám pomocná metoda public AddTabToTabs umožňuje přistupovat k TabView v nové instanci MainPage z původní instance stránky, abyste do ní přidali odtrženou kartu.

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

Přetáhněte oddělenou kartu do jiného TabView

Když je karta odtržena a umístěna do nového okna, jak bylo uvedeno v předchozích krocích, může dojít k jedné ze dvou věcí:

  • Uživatel může kartu přetáhnout a ta zůstane otevřená v novém okně. Proces vytržení zde končí a nejsou vyvolány žádné další události.
  • Uživatel může pokračovat v přetahování vytrženého panelu a vrátit ho na existující ovládací prvek TabView. V tomto případě proces pokračuje a je vyvoláno několik dalších událostí, které vám umožní odebrat kartu z původního TabView a vložit externí kartu do existujícího TabView.

Když je karta přetažena přes existující TabView, je vyvolána událost ExternalTornOutTabsDropping. V obslužné rutině události můžete určit, zda je vložení záložky do tohoto objektu TabView povolené. Ve většině případů stačí nastavit vlastnost args.AllowDrop na true. Pokud ale potřebujete před nastavením této vlastnosti provést nějaké kontroly, můžete to udělat tady. Pokud je AllowDrop nastaveno na false, akce přetažení tabulátoru pokračuje a událost ExternalTornOutTabsDropped není vyvolána.

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

Pokud je AllowDrop v obslužné rutině události true nastavena na ExternalTornOutTabsDropping, je událost ExternalTornOutTabsDropped okamžitě vyvolána.

Poznámka:

Dropped v názvu události přímo neodpovídá myšlence akce spouštění v rozhraních API pro táhni-a-pusť. V tomto případě uživatel nemusí uvolnit tabulátor, aby provedl akci. Událost se vyvolá, když se karta přetahuje přes pás karet a kód se spustí, aby upustila kartu do TabView.

ExternalTornOutTabsDropped obslužná rutina události se řídí stejným vzorem jako TabTearOutRequested událost, ale v opačném případě; potřebujete tedy odebrat kartu z původního TabView a vložit ji do sender TabView.

sender TabView je ovládací prvek, do kterého se karta vkládá, takže k vyhledání původní karty používáme pomocnou metodu GetParentTabView. Začíná to roztrhaným objektem TabViewItem a používá VisualTreeHelper k procházení vizuálního stromu a vyhledání TabView položky, do které položka patří. Jakmile je TabView nalezena, TabViewItem se odebere z kolekce TabItems a vloží do kolekce sender TabView TabItems na index určený args.DropIndex.

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

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

Návod

Pokud používáte sadyWindows Community Toolkit, můžete místo FindAscendantpoužít metodu pomocné rutiny v sadě nástrojů GetParentTabView DependencyObjectExtensions .

Zobrazení karet TabView v záhlaví okna

Místo toho, aby karty zabíraly svůj vlastní řádek pod záhlavím okna, můžete je sloučit do jednoho prostoru. Tím ušetříte svislý prostor pro obsah a získáte tak moderní chování aplikace.

Vzhledem k tomu, že uživatel může okno přetáhnout pod záhlavím a přemístit okno, je důležité, aby záhlaví nebylo zcela vyplněno kartami. Proto při zobrazení karet v záhlaví musíte zadat část záhlaví, která má být vyhrazena jako přetahovatelná oblast. Pokud nezadáte přetahovatelnou oblast, bude celé záhlaví přetahovatelné, což zabrání tomu, aby karty přijímaly vstupní události. Pokud se TabView bude zobrazovat v title baru okna, měli byste vždy zahrnout TabStripFooter do vašeho TabView a označit ho jako oblast pro přetahování.

Další informace najdete v tématu přizpůsobení záhlaví

tabulátory v záhlaví 

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

Poznámka:

Způsob získání odkazu na okno se může lišit v závislosti na způsobu sledování oken v aplikaci. Další informace najdete v tématu Zavření okna při zavření poslední karty a Vytvoření a sledování nového okna v tomto článku.

Pokyny pro klávesnice pro vývojáře

Návod

Další informace o integrované podpoře klávesnice najdete v tématu Navigace pomocí klávesnice dříve v tomto článku.

Některé aplikace můžou vyžadovat pokročilejší ovládání klávesnice. Pokud jsou vhodné pro vaši aplikaci, zvažte implementaci následujících klávesových zkratek.

Výstraha

Pokud do stávající aplikace přidáváte TabView, možná jste už vytvořili klávesové zkratky, které se mapují na kombinace kláves doporučených klávesových zkratek pro TabView. V takovém případě budete muset zvážit, jestli chcete zachovat stávající zkratky nebo nabídnout uživateli intuitivní záložkové prostředí.

  • Ctrl+T by se měla otevřít nová karta. Obecně se tato karta naplní předdefinovaným dokumentem nebo se vytvoří prázdný jednoduchým způsobem, jak zvolit jeho obsah. Pokud uživatel musí zvolit obsah pro novou kartu, zvažte zadání fokusu pro ovládací prvek pro výběr obsahu.
  • Ctrl+W by se měla vybraná karta zavřít. Nezapomeňte, že TabView vybere další kartu automaticky.
  • Ctrl + Shift + T by se měly otevřít nedávno zavřené karty (nebo přesněji otevřít nové karty se stejným obsahem jako nedávno zavřené karty). Začněte s naposledy zavřenou kartou a postupně se posunujte zpět při každém následném vyvolání klávesové zkratky. Mějte na paměti, že to bude vyžadovat vedení seznamu nedávno uzavřených karet.
  • Ctrl + 1 by měl vybrat první záložku v seznamu záložek. Stejně tak by Ctrl + 2 měl vybrat druhou kartu, Ctrl + 3 třetí a tak dále až po Ctrl + 8.
  • ctrl + 9 by měl vybrat poslední kartu v seznamu karet bez ohledu na to, kolik karet je v seznamu.
  • Pokud karty nabízejí více než jen příkaz zavřít (například duplikování nebo připnutí karty), použijte místní nabídku k zobrazení všech dostupných akcí, které lze provést na kartě.

Implementace chování klávesnice ve stylu prohlížeče

Tento příklad implementuje řadu výše uvedených doporučení na TabView. Konkrétně tento příklad implementuje Ctrl + T, Ctrl + W, Ctrl + 1 až 8a Ctrl + 9.

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


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

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

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

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


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

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

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

Univerzální platforma Windows a WinUI 2

Důležité

Informace a příklady v tomto článku jsou optimalizované pro aplikace, které používají Windows App SDK a WinUI 3, ale obecně platí pro aplikace pro UPW, které používají WinUI 2. Informace o konkrétních platformách a příklady najdete v referenčních informacích k rozhraní API pro UPW.

Tato část obsahuje informace potřebné pro použití ovládacího prvku v aplikacích UWP nebo WinUI 2.

Ovládací prvek TabView pro aplikace pro UPW je součástí WinUI 2. Další informace, včetně pokynů k instalaci, najdete v tématu WinUI 2. Rozhraní API pro tento ovládací prvek se nacházejí v oboru názvů Microsoft.UI.Xaml.Controls.

Rozhraní API pro odtrhávání tabů nejsou součástí verze TabView ve WinUI 2.

K získání nejnovějších stylů, šablon a funkcí pro všechny ovládací prvky doporučujeme použít nejnovější winUI 2 . WinUI 2.2 nebo novější obsahuje novou šablonu pro tento ovládací prvek, který používá zaoblené rohy. Další informace najdete v tématu Poloměr rohu.

Pokud chcete použít kód v tomto článku s WinUI 2, použijte alias v JAZYCE XAML (používáme muxc) k reprezentaci rozhraní API knihovny uživatelského rozhraní Systému Windows, která jsou součástí vašeho projektu. Další informace najdete v tématu Začínáme s WinUI 2 .

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

<muxc:TabView />
  • Last updated on