Udostępnij przez

Oś

Kontrolka Pivot umożliwia przesuwanie dotykowe między niewielką liczbą sekcji treści.

domyślne podkreślenie fokusu na wybranym nagłówku

Czy jest to właściwa kontrola?

Ostrzeżenie

Controlka Pivot nie jest zalecana w przypadku wzorców projektowych systemu Windows 11 . Zdecydowanie zalecamy użycie jednej z następujących alternatyw:

Aby utworzyć interfejs użytkownika przypominający element Pivot podczas korzystania z WinUI 3 i Windows App SDK, użyj kontrolki SelectorBar.

Aby utworzyć interfejs z zakładkami, użyj kontrolki TabView.

Aby uzyskać typowe wzorce nawigacji, zalecamy użycie NavigationView, który automatycznie dostosowuje się do różnych rozmiarów ekranu i umożliwia większe dostosowanie.

Poniżej wymieniono niektóre kluczowe różnice między NavigationView a Pivot:

  • Pivot obsługuje przesuwanie dotykowe do przełączania między elementami.
  • Elementy nadmiarowe w karuzeli przestawnej, podczas gdy NavigationView używa przepełnienia w postaci rozwijanego menu, aby użytkownicy mogli zobaczyć wszystkie elementy.
  • Pivot obsługuje nawigację między sekcjami zawartości, a NavigationView umożliwia większą kontrolę nad zachowaniem nawigacji.

Użyj NavigationView zamiast Pivot

Jeśli interfejs użytkownika aplikacji korzysta z kontrolki Pivot, możesz przekonwertować ją na element NavigationView, postępując zgodnie z tym przykładem.

Ten kod XAML tworzy kontrolkę NavigationView z 3 sekcjami zawartości, podobnymi do przykładowej kontrolki przestawnej w Tworzenie kontrolki przestawnej.

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

Element NavigationView zapewnia większą kontrolę nad dostosowywaniem nawigacji i wymaga odpowiedniego kodu w tle. Aby towarzyszyć powyższemu kodowi XAML, użyj następującego kodu:

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

Ten kod naśladuje wbudowaną funkcję nawigacji kontrolki przestawnej, z pominięciem obsługi przesuwania dotykowego między sekcjami zawartości. Jednak, jak widać, można również dostosować kilka elementów, w tym animowane przejście, parametry nawigacji i funkcje stosu.

Tworzenie kontrolki przestawnej

Ostrzeżenie

Controlka Pivot nie jest zalecana w przypadku wzorców projektowych systemu Windows 11 . Zdecydowanie zalecamy użycie jednej z następujących alternatyw:

Ten kod XAML tworzy podstawową kontrolkę przestawną z 3 sekcjami zawartości.

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

Elementy przestawne

Pivot to ItemsControl, dzięki czemu może zawierać kolekcję elementów dowolnego typu. Każdy element dodany do elementu przestawnego, który nie jest jawnie przestawnym, jest niejawnie opakowany w element przestawny. Ponieważ Pivot jest często używany do nawigowania między stronami zawartości, często wypełnia się kolekcję Items bezpośrednio za pomocą elementów interfejsu użytkownika XAML. Możesz też ustawić właściwość ItemsSource na źródło danych. Elementy powiązane w elemencie ItemsSource mogą być dowolnego typu, ale jeśli nie są wyraźnie PivotItems, należy zdefiniować ItemTemplate i HeaderTemplate, aby określić sposób wyświetlania elementów.

Możesz użyć właściwości SelectedItem, żeby pobrać lub ustawić aktywny element Pivot. Użyj właściwości SelectedIndex, aby pobrać lub ustawić indeks aktywnego elementu.

Nagłówki przestawne

Aby dodać inne kontrolki do nagłówka przestawnego, możesz użyć właściwości LeftHeader i RightHeader.

Na przykład możesz dodać CommandBar w prawym nagłówku tabeli przestawnej.

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

Interakcja z tabelą przestawną

Kontrolka zawiera te interakcje gestów dotykowych:

  • Naciśnięcie nagłówka elementu przestawnego powoduje przejście do zawartości sekcji tego nagłówka.
  • Przesuwanie w lewo lub w prawo w nagłówku elementu przestawnego przechodzi do sąsiedniej sekcji.
  • Przesuwanie w lewo lub po prawej stronie zawartości sekcji powoduje przejście do sąsiedniej sekcji.

Kontrolka jest w dwóch trybach:

stacjonarne

  • Pivots są stałe, gdy wszystkie nagłówki przestawne mieszczą się w dozwolonej przestrzeni.
  • Naciśnięcie etykiety przestawnej powoduje przejście do odpowiedniej strony, ale sama kontrolka przestawna nie zostanie przeniesiona. Aktywny pivot został wyróżniony.

Karuzela

  • Karuzela przesuwa się, gdy wszystkie nagłówki zakładek nie mieszczą się w dostępnym miejscu.
  • Naciśnięcie etykiety przestawnej powoduje przejście do odpowiedniej strony, a aktywna etykieta przestawna zostanie przesunięta na pierwszą pozycję.
  • Przestaw elementy w pętli karuzeli z sekcji ostatniej do pierwszej sekcji przestawnej.

Wskazówka

  • Unikaj używania więcej niż 5 nagłówków podczas korzystania z trybu karuzeli, ponieważ pętlowanie więcej niż 5 razy może prowadzić do zamieszania.
  • Nagłówki przestawne nie powinny przełączać się w środowisku 10ft. Ustaw właściwość IsHeaderItemsCarouselEnabled na false wartość , jeśli aplikacja zostanie uruchomiona na konsoli Xbox.

UwP i WinUI 2

Ważne

Informacje i przykłady w tym artykule są zoptymalizowane dla aplikacji korzystających z Windows App SDK oraz WinUI 3, ale generalnie mają zastosowanie także w aplikacjach UWP używających WinUI 2. Zobacz dokumentację interfejsu API platformy UWP, aby uzyskać informacje i przykłady dotyczące platformy.

Ta sekcja zawiera informacje potrzebne do używania kontrolki w aplikacji platformy UWP lub WinUI 2.

API dla tej kontrolki istnieją w ramach przestrzeni nazw Windows.UI.Xaml.Controls.

Zalecamy użycie najnowszej wersji WinUI 2 , aby uzyskać najbardziej aktualne style i szablony dla wszystkich kontrolek.

  • Last updated on