Seçici Çubuğu

Seçici çubuğu, kullanıcının az sayıda farklı küme veya veri görünümü arasında geçiş yapmasını sağlar. Bir kerede bir öğe seçilebilir.

En Son, Paylaşılan, Sık Kullanılanlar düğümlerini içeren seçici çubuğu. Metnin altında mavi bir çizgiyle gösterildiği gibi En Son düğümü seçilir.

Bir kullanıcı seçici çubuğundan bir öğe seçtiğinde, görünümü genellikle şunlardan biriyle değiştirirsiniz:

uygulamanızdaki farklı sayfalar arasında gezinme.
koleksiyon denetiminde gösterilen verileri değiştirme.

Seçici çubuğu, simge ve metni destekleyen hafif bir denetimdir. Öğeleri farklı pencere boyutlarına uyum sağlayacak şekilde yeniden düzenlememesi için sınırlı sayıda seçenek sunması amaçlanmıştır.

Doğru kontrol bu mu?

Bir kullanıcının sınırlı sayıda görünüm veya sayfa arasında gezinmesine izin vermek istediğinizde SelectorBar kullanın ve aynı anda yalnızca bir seçenek belirlenebilir.

Bazı örnekler şunlardır:

Her sayfanın benzersiz bir içerik listesi görüntülediği "Son", "Paylaşılan" ve "Sık Kullanılanlar" sayfaları arasında geçiş yapma.
"Tümü", "Okunmadı", "Bayrak eklenmiş" ve "Acil" görünümleri arasında geçiş yapma; her görünümde, benzersiz bir şekilde filtrelenmiş bir e-posta öğeleri listesi görüntülenir.

Farklı bir denetim ne zaman kullanılmalıdır?

Başka bir denetimin kullanılması daha uygun olabilecek bazı senaryolar vardır.

Farklı pencere boyutlarına uyarlanan tutarlı, üst düzey uygulama gezintisine ihtiyacınız olduğunda NavigationView kullanın.
Kullanıcının içeriğin yeni görünümlerini açabilmesi, kapatabilmesi, yeniden düzenleyebilmesi veya koparabilmesi gerektiğinde TabView kullanın.
Tek bir veri görünümünün normal sayfalandırması gerektiğinde PipsPager kullanın.
Varsayılan olarak bir seçenek belirlenmediğinde ve bağlam sayfa gezintisi ile ilgili olmadığında RadioButtons kullanın.

SelectorBar denetimi oluşturma

Önemli API'ler: SelectorBar sınıfı, Items özelliği, SelectionChanged olayı, SelectorBarItem sınıfı

WinUI 3 Galeri uygulamasını açın ve SelectorBar'ı çalışır durumda görün

WinUI 3 Galeri uygulaması, WinUI denetimlerinin ve özelliklerinin etkileşimli örneklerini içerir. uygulamayı Microsoft Store adresinden alın veya GitHub üzerindeki kaynak koduna göz atın.

Bu XAML, içeriğin 3 bölümüyle temel bir SelectorBar denetimi oluşturur.

<SelectorBar x:Name="SelectorBar">
    <SelectorBarItem x:Name="SelectorBarItemRecent" 
                     Text="Recent" Icon="Clock"/>
    <SelectorBarItem x:Name="SelectorBarItemShared" 
                     Text="Shared" Icon="Share"/>
    <SelectorBarItem x:Name="SelectorBarItemFavorites" 
                     Text="Favorites" Icon="Favorite"/>
</SelectorBar>

Bu, kodda SelectorBarItem'in nasıl ekleneceğini gösterir.

SelectorBarItem newItem = new SelectorBarItem()
{
    Text = "New Item",
    Icon = new SymbolIcon(Symbol.Add)
};
selectorBar.Items.Add(newItem);

SelectorBar öğeleri

SelectorBar Items koleksiyonunu SelectorBarItem nesneleriyle doldurursunuz. Bunu doğrudan XAML'de veya kodda yapabilirsiniz. Sınırlı sayıda seçenek görüntülemesi amaçlandığı için SelectorBar'ın dış öğe koleksiyonuna bağlama özelliği yoktur ItemsSource .

Öğe içeriği

SelectorBarItem sınıfı, seçici çubuğunuzun içeriğini ayarlamak için kullandığınız Metin ve Simge özelliklerini sağlar. Bir veya her iki özelliği de ayarlayabilirsiniz; ancak, öğeyi daha anlamlı hale getirmek için özelliğini ayarlamanızı Text öneririz.

Icon özelliği bir IconElement alır, böylece bu türetilmiş simge türlerinden herhangi birini kullanabilirsiniz:

Uyarı

SelectorBarItem, ItemContainer'dan Child özelliğini devralır. İçeriği ayarlamak için bu özelliği kullanabilirsiniz, ancak bunu önermeyiz. Bu şekilde ayarlanan içerik, SelectorBarItem denetim şablonu tarafından sağlanan stil ve görsel durumları almayacaktır.

Öğe seçimi

SelectorBar'ın etkin öğesini almak veya ayarlamak için SelectedItem özelliğini kullanabilirsiniz. Bu, SelectorBarItem'in IsSelected özelliğiyle eşitlenir. Herhangi bir özelliği ayarlarsanız, diğeri otomatik olarak güncelleştirilir.

SelectorBar odak aldığında ve SelectedItemnull olduğunda, varsa, SelectedItem koleksiyonundaki ilk odaklanılabilir örneğe otomatik olarak ayarlanır.

Seçili öğe Items koleksiyonundan ne zaman kaldırıldığında, özellik SelectedItem olarak null ayarlanır. SelectedItem null özelliği, SelectorBar odaktayken ayarlandığında, SelectorBar üzerinde hiçbir öğe seçilmez ancak odak korunur.

SelectedItem öğesini şu anda Items koleksiyonunda olmayan bir öğeye ayarlamak bir özel durum oluşturur.

SelectedIndex özelliği yoktur, ancak SelectedItem öğesinin dizinini şu şekilde alabilirsiniz:

int currentSelectedIndex = 
    selectorBar.Items.IndexOf(selectorBar.SelectedItem);

Seçim değiştirildi

Kullanıcıların seçimine yanıt vermek ve kullanıcıya gösterilenleri değiştirmek için SelectionChanged olayını işleyebilirsiniz. Bir SelectionChanged öğe şu yollardan biriyle seçildiğinde olay tetiklenir:

Kullanıcı Arayüzü Otomasyonu
Sekme odağı (ve yeni bir öğe seçilir)
SelectorBar içinde sol ve sağ gezinti
Farenin tıklanması veya dokunma yoluyla etkinleşen olay
Programlı seçim ( SelectorBar.SelectedItem özelliği veya SelectorBarItem'in IsSelected özelliği aracılığıyla).

Kullanıcı bir öğe seçtiğinde, genellikle uygulamanızdaki farklı sayfalar arasında gezinerek veya koleksiyon denetiminde gösterilen verileri değiştirerek görünümü değiştirirsiniz. Her ikisine de örnekler burada gösterilmiştir.

Geçiş animasyonlarıyla gezinme

İpucu

Bu örnekleri WinUI 3 Galeri uygulamasının SelectorBar sayfasında bulabilirsiniz. Tam kodu çalıştırmak ve görüntülemek için WinUI 3 Galeri uygulamasını kullanın.

Bu örnekte, farklı sayfalar arasında gezinmek için SelectionChanged olayının işlenmesi gösterilmektedir. Gezintide, sayfaları uygun şekilde soldan veya sağdan kaydırmak için SlideNavigationTransitionEffect kullanılır.

<SelectorBar x:Name="SelectorBar2" 
             SelectionChanged="SelectorBar2_SelectionChanged">
    <SelectorBarItem x:Name="SelectorBarItemPage1" Text="Page1" 
                     IsSelected="True" />
    <SelectorBarItem x:Name="SelectorBarItemPage2" Text="Page2" />
    <SelectorBarItem x:Name="SelectorBarItemPage3" Text="Page3" />
    <SelectorBarItem x:Name="SelectorBarItemPage4" Text="Page4" />
    <SelectorBarItem x:Name="SelectorBarItemPage5" Text="Page5" />
</SelectorBar>

<Frame x:Name="ContentFrame" IsNavigationStackEnabled="False" />

int previousSelectedIndex = 0;

private void SelectorBar2_SelectionChanged
             (SelectorBar sender, SelectorBarSelectionChangedEventArgs args)
{
    SelectorBarItem selectedItem = sender.SelectedItem;
    int currentSelectedIndex = sender.Items.IndexOf(selectedItem);
    System.Type pageType;

    switch (currentSelectedIndex)
    {
        case 0:
            pageType = typeof(SamplePage1);
            break;
        case 1:
            pageType = typeof(SamplePage2);
            break;
        case 2:
            pageType = typeof(SamplePage3);
            break;
        case 3:
            pageType = typeof(SamplePage4);
            break;
        default:
            pageType = typeof(SamplePage5);
            break;
    }

    var slideNavigationTransitionEffect = 
            currentSelectedIndex - previousSelectedIndex > 0 ? 
                SlideNavigationTransitionEffect.FromRight : 
                SlideNavigationTransitionEffect.FromLeft;

    ContentFrame.Navigate(pageType, null, new SlideNavigationTransitionInfo() 
                            { Effect = slideNavigationTransitionEffect });

    previousSelectedIndex = currentSelectedIndex;
}

ItemsView'da farklı koleksiyonları görüntüleme

Bu örnekte, kullanıcı SelectorBar'da bir seçenek seçtiğinde ItemsView'ın veri kaynağının nasıl değiştireceği gösterilmektedir.

<SelectorBar x:Name="SelectorBar3" 
             SelectionChanged="SelectorBar3_SelectionChanged">
    <SelectorBarItem x:Name="SelectorBarItemPink" Text="Pink"
                     IsSelected="True"/>
    <SelectorBarItem x:Name="SelectorBarItemPlum" Text="Plum"/>
    <SelectorBarItem x:Name="SelectorBarItemPowderBlue" Text="PowderBlue"/>
</SelectorBar>

<ItemsView x:Name="ItemsView3" 
           ItemTemplate="{StaticResource ColorsTemplate}"/>
    <ItemsView.Layout>
        <UniformGridLayout/>
    </ItemsView.Layout>
</ItemsView/>

private void SelectorBar3_SelectionChanged
             (SelectorBar sender, SelectorBarSelectionChangedEventArgs args)
{
    if (sender.SelectedItem == SelectorBarItemPink)
    {
        ItemsView3.ItemsSource = PinkColorCollection;
    }
    else if (sender.SelectedItem == SelectorBarItemPlum)
    {
        ItemsView3.ItemsSource = PlumColorCollection;
    }
    else
    {
        ItemsView3.ItemsSource = PowderBlueColorCollection;
    }
}

SelectorBar sınıfı
Navigasyon tasarımı temelleri

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2026-03-11