Sdílet prostřednictvím

Čep

Ovládací prvek Pivot umožňuje potáhnutí prstem mezi malou sadou oddílů obsahu.

Výchozí zaměření podtrhuje vybrané záhlaví.

Je to správná kontrola?

Výstraha

Ovládací prvek Pivot se nedoporučuje pro vzory návrhu Windows 11. Důrazně doporučujeme místo toho použít jednu z těchto alternativ:

Pokud chcete vytvořit uživatelské rozhraní podobné Pivotu s WinUI 3 a Windows App SDK, použijte ovládací prvek SelectorBar.

Chcete-li vytvořit záložkové rozhraní, použijte ovládací prvek TabView.

Pokud chcete dosáhnout běžných vzorů navigace nahoře, doporučujeme použít NavigationView, který se automaticky přizpůsobí různým velikostem obrazovky a umožňuje větší přizpůsobení.

Tady jsou uvedeny některé klíčové rozdíly mezi navigationview a pivotem:

  • Pivot podporuje přepínání mezi položkami potažením prstem.
  • Položky v pivotovém karuselu mohou přeplývat, zatímco NavigationView používá rozevírací nabídku, aby uživatelé viděli všechny položky.
  • Pivot zpracovává navigaci mezi oddíly obsahu, zatímco NavigationView umožňuje větší kontrolu nad chováním navigace.

Použít NavigationView místo pivotu

Pokud uživatelské rozhraní aplikace používá ovládací prvek Pivot, můžete převést Pivot na NavigationView podle tohoto příkladu.

Tento XAML vytvoří NavigationView se třemi sekcemi obsahu podobně jako příklad Pivot v části Vytvoření kontingenčního ovládacího prvku.

<NavigationView x:Name="rootNavigationView" Header="Category Title"
 ItemInvoked="NavView_ItemInvoked">
    <NavigationView.MenuItems>
        <NavigationViewItem Content="Section 1" x:Name="Section1Content" />
        <NavigationViewItem Content="Section 2" x:Name="Section2Content" />
        <NavigationViewItem Content="Section 3" x:Name="Section3Content" />
    </NavigationView.MenuItems>
    
    <Frame x:Name="ContentFrame" />
</NavigationView>

<Page x:Class="AppName.Section1Page">
    <TextBlock Text="Content of section 1."/>
</Page>

<Page x:Class="AppName.Section2Page">
    <TextBlock Text="Content of section 2."/>
</Page>

<Page x:Class="AppName.Section3Page">
    <TextBlock Text="Content of section 3."/>
</Page>

NavigationView poskytuje větší kontrolu nad přizpůsobením navigace a vyžaduje odpovídající kód za sebou. Pokud chcete doplnit výše uvedené XAML, použijte následující kód v zákulisí:

private void NavView_ItemInvoked(NavigationView sender, NavigationViewItemInvokedEventArgs args)
{
   var navOptions = new FrameNavigationOptions
   {
      TransitionInfoOverride = args.RecommendedNavigationTransitionInfo,
      IsNavigationStackEnabled = false,
   };

   switch (args.InvokedItemContainer.Name)
   {
      case nameof(Section1Content):
         ContentFrame.NavigateToType(typeof(Section1Page), null, navOptions);
         break;

      case nameof(Section2Content):
         ContentFrame.NavigateToType(typeof(Section2Page), null, navOptions);
         break;

      case nameof(Section3Content):
         ContentFrame.NavigateToType(typeof(Section3Page), null, navOptions);
         break;
   }  
}

Tento kód napodobuje integrovaný navigační zážitek ovládacího prvku Pivot bez zážitku dotykového posouvání mezi obsahovými sekcemi. Jak ale vidíte, můžete také přizpůsobit několik bodů, včetně animovaného přechodu, parametrů navigace a možností zásobníku.

Vytvořit otočný ovládací prvek

Výstraha

Ovládací prvek Pivot se nedoporučuje pro vzory návrhu Windows 11. Důrazně doporučujeme místo toho použít jednu z těchto alternativ:

Tento XAML vytvoří základní ovládací prvek Pivot se 3 oddíly obsahu.

<Pivot x:Name="rootPivot" Title="Category Title">
    <PivotItem Header="Section 1">
        <!--Pivot content goes here-->
        <TextBlock Text="Content of section 1."/>
    </PivotItem>
    <PivotItem Header="Section 2">
        <!--Pivot content goes here-->
        <TextBlock Text="Content of section 2."/>
    </PivotItem>
    <PivotItem Header="Section 3">
        <!--Pivot content goes here-->
        <TextBlock Text="Content of section 3."/>
    </PivotItem>
</Pivot>

Kontingenční položky

Pivot je ItemsControl, takže může obsahovat kolekci položek libovolného typu. Jakákoliv položka, kterou přidáte do pivota, která není explicitně položkou PivotItem, je implicitně zabalená do PivotItem. Protože pivot se často používá k navigaci mezi stránkami obsahu, je běžné naplnit kolekci Items přímo elementy uživatelského rozhraní XAML. Nebo můžete vlastnost ItemsSource nastavit na zdroj dat. Položky vázané na ItemsSource mohou být libovolného typu, ale pokud nejsou explicitně PivotItems, musíte definovat ItemTemplate a HeaderTemplate, abyste určili, jak se položky zobrazují.

K získání nebo nastavení aktivního prvku Pivotu můžete použít vlastnost SelectedItem. Pomocí SelectedIndex vlastnost získat nebo nastavit index aktivní položky.

Kontingenční záhlaví

K přidání dalších ovládacích prvků do záhlaví kontingenčního zobrazení můžete použít vlastnosti LeftHeader a RightHeader.

Například můžete do pravého záhlaví kontingenční tabulky přidat CommandBar.

<Pivot>
    <Pivot.RightHeader>
        <CommandBar>
                <AppBarButton Icon="Add"/>
                <AppBarSeparator/>
                <AppBarButton Icon="Edit"/>
                <AppBarButton Icon="Delete"/>
                <AppBarSeparator/>
                <AppBarButton Icon="Save"/>
        </CommandBar>
    </Pivot.RightHeader>
</Pivot>

Interakce pivotů

Ovládací prvek nabízí tyto interakce dotykových gest:

  • Klepnutím na záhlaví položky kontingenční tabulky přejdete na obsah oddílu daného záhlaví.
  • Potáhnutím prstem doleva nebo doprava v záhlaví kontingenční položky přejdete do sousedního oddílu.
  • Potáhnutím prstem doleva nebo doprava v obsahu oddílu přejdete do sousedního oddílu.

Ovládací prvek se dodává ve dvou režimech:

statické

  • Pivoty jsou statické, když se všechna záhlaví vejdou do dostupného prostoru.
  • Klepnutím na popisek pivotu přejdete na odpovídající stránku, i když se samotný pivot nepřesune. Aktivní pivot je zvýrazněn.

Kolotoč

  • Otočí se karusel přepínačů, když se všechna záhlaví nevejdou do povoleného prostoru.
  • Klepnutím na záložku přejdete na odpovídající stránku a aktivní záložka se posune do první pozice.
  • Položky pivotu v rámci karuselu jsou posunuty od poslední části k první.

Návod

  • Vyhněte se použití více než 5 hlaviček v karuselovém režimu, protože opakování více než 5 může být matoucí.
  • Záhlaví pivotu by se neměly používat jako karusel v 10ftovém prostředí. Nastavte vlastnost IsHeaderItemsCarouselEnabled na false to, jestli se vaše aplikace spustí na Xboxu.

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.

Rozhraní API pro tento ovládací prvek existují v jmenném prostoru Windows.UI.Xaml.Controls.

K získání nejaktuálnějších stylů a šablon pro všechny ovládací prvky doporučujeme použít nejnovější WinUI 2 .

  • Last updated on