Aracılığıyla paylaş


dönüm noktası

Pivot denetimi, küçük bir içerik bölümü kümesi arasında dokunma çekmeyi etkinleştirir.

Standart odak, seçili başlığın altını çizer

Doğru kontrol bu mu?

Uyarı

Windows 11 tasarım desenleri için Pivot denetimi önerilmez. Bunun yerine aşağıdaki alternatiflerden birini kullanmanızı kesinlikle öneririz:

WinUI 3 ve Windows Uygulama SDK'sını kullanırken Pivot benzeri bir kullanıcı arabirimi oluşturmak için SelectorBar denetimini kullanın.

Sekmeli kullanıcı arabirimi oluşturmak için TabView denetimi kullanın.

Yaygın üst gezinti desenlerini elde etmek için, farklı ekran boyutlarına otomatik olarak uyum sağlayan ve daha fazla özelleştirmeye olanak tanıyan NavigationView kullanmanızı öneririz.

NavigationView ile Pivot arasındaki bazı önemli farklar burada listelenmiştir:

  • Pivot, öğeler arasında geçiş yapmak için dokunma çekmeyi destekler.
  • Pivot karuseldeki öğelerin taşması durumunda, NavigationView, kullanıcıların tüm öğeleri görebilmesi için bir menü açılır liste taşması kullanır.
  • Pivot, içerik bölümleri arasındaki gezintiyi işlerken NavigationView, gezinti davranışı üzerinde daha fazla denetim sağlar.

Pivot yerine NavigationView kullanma

Uygulamanızın kullanıcı arabirimi Pivot denetimini kullanıyorsa, bu örneği izleyerek Pivot'ı NavigationView'a dönüştürebilirsiniz.

Bu XAML, Pivot denetimi oluşturmaörneği gibi 3 bölüm içerik içeren bir NavigationView oluşturur.

<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, gezinti özelleştirmesi üzerinde daha fazla denetim sağlar ve karşılık gelen arka planda kod gerektirir. Yukarıdaki XAML'ye eşlik etmek için aşağıdaki arka planda kodu kullanın:

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

Bu kod, içerik bölümleri arasında dokunmatik kaydırma deneyimi olmadan, Pivot denetiminin yerleşik gezinti deneyimini taklit eder. Ancak, gördüğünüz gibi animasyonlu geçiş, gezinti parametreleri ve yığın özellikleri de dahil olmak üzere çeşitli noktaları özelleştirebilirsiniz.

Pivot denetimi oluşturma

Uyarı

Windows 11 tasarım desenleri için Pivot denetimi önerilmez. Bunun yerine aşağıdaki alternatiflerden birini kullanmanızı kesinlikle öneririz:

Bu XAML, üç içeriği bölümden oluşan temel bir Pivot denetimi oluşturur.

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

Özet Tablo Öğeleri

Pivot bir ItemsControl olduğundan herhangi bir türde öğe koleksiyonu içerebilir. Pivot'a eklediğiniz ve açıkça PivotItem olmayan tüm öğeler örtük olarak bir PivotItem içine sarmalanır. Pivot genellikle içerik sayfaları arasında gezinme için kullanıldığından, Öğeleri koleksiyonu doğrudan XAML kullanıcı arabirimi öğeleriyle doldurmak yaygındır. Veya ItemsSource özelliğini bir veri kaynağına ayarlayabilirsiniz. ItemsSource'ta bağlı öğeler herhangi bir türde olabilir, ancak bunlar açıkça PivotItems değilse, öğelerin nasıl görüntüleneceğini belirtmek için bir ItemTemplate ve HeaderTemplate tanımlamanız gerekir.

Pivot'un etkin öğesini almak veya ayarlamak için SelectedItem özelliğini kullanabilirsiniz. Etkin öğenin dizinini almak veya ayarlamak için SelectedIndex özelliğini kullanın.

Pivot başlıkları

Pivot üst bilgisine başka denetimler eklemek için LeftHeader ve RightHeader özelliklerini kullanabilirsiniz.

Örneğin, Pivot'un Sağ Başlığına Bir CommandBar ekleyebilirsiniz.

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

Dönüm noktası etkileşimi

Denetimde şu dokunma hareketi etkileşimleri bulunur:

  • Bir pivot öğe başlığına dokunulduğunda, o başlığın bölüm içeriğine geçer.
  • Pivot öğesi başlığında sola veya sağa kaydırma, bitişik bölüme gider.
  • Bölüm içeriğinde sola veya sağa çekme, bitişik bölüme gider.

Denetim iki modda sunulur:

Sabit

  • Tüm pivot başlıkları izin verilen alana sığdığında pivotlar hareketsiz olur.
  • Bir pivot etiketine dokunulduğunda ilgili sayfaya gider, ancak döngeçin kendisi hareket etmez. Etkin pivot vurgulanır.

Karusel

  • Tüm yönlendirme sekmeleri izin verilen alana sığmadığında, carousel döner.
  • Bir pivot etiketine dokunduğunuzda ilgili sayfaya gider ve etkin pivot etiketi otomatik olarak ilk konuma geçer.
  • Döner galerideki öğeleri son öge bölümünden ilk öge bölümüne döndür.

İpucu

  • Karusel modunu kullanırken 5'ten fazla başlık kullanmaktan kaçının, çünkü 5'ten fazla başlığa döngü yapmak kafa karıştırıcı olabilir.
  • Pivot başlıkları 10ft ortamında döngülü olmamalıdır. Uygulamanız Xbox'ta çalıştırılacaksa IsHeaderItemsCarouselEnabled özelliğini false olarak ayarlayın.

UWP ve WinUI 2

Önemli

Bu makaledeki bilgiler ve örnekler, Windows Uygulama SDK'sı ve WinUI 3kullanan uygulamalar için iyileştirilmiştir, ancak genellikle WinUI 2kullanan UWP uygulamaları için geçerlidir. Platforma özgü bilgiler ve örnekler için UWP API başvurusuna bakın.

Bu bölüm, denetimi bir UWP veya WinUI 2 uygulamasında kullanmak için ihtiyacınız olan bilgileri içerir.

Bu denetimin API'leri Windows.UI.Xaml.Controls ad alanında bulunur.

Tüm denetimler için en güncel stilleri ve şablonları almak için en son WinUI 2'yi kullanmanızı öneririz.