Share via

Bilah pemilih

  • Artikel

Bilah pemilih memungkinkan pengguna beralih di antara sejumlah kecil set atau tampilan data yang berbeda. Satu item dalam satu waktu dapat dipilih.

Bilah pemilih dengan simpul Terbaru, Bersama, Favorit. Simpul Terbaru dipilih, seperti yang ditunjukkan oleh garis biru di bawah teks.

Saat pengguna memilih item di bilah pemilih, Anda biasanya mengubah tampilan dengan:

  • menavigasi antara halaman yang berbeda di aplikasi Anda.
  • mengubah data yang ditampilkan dalam kontrol koleksi.

Bilah pemilih adalah kontrol ringan yang mendukung ikon dan teks. Ini dimaksudkan untuk menyajikan sejumlah opsi terbatas sehingga tidak mengatur ulang item untuk beradaptasi dengan ukuran jendela yang berbeda.

Apakah ini kontrol yang tepat?

Gunakan SelectorBar saat Anda ingin mengizinkan pengguna menavigasi antara jumlah tampilan atau halaman terbatas dan hanya satu opsi yang dapat dipilih sekaligus.

Beberapa contohnya termasuk:

  • Beralih antara halaman "Terbaru," "Dibagikan," dan "Favorit", di mana setiap halaman menampilkan daftar konten yang unik.
  • Beralih antara tampilan "Semua," "Belum Dibaca", "Ditandai," dan "Mendesak", di mana setiap tampilan menampilkan daftar item email yang difilter secara unik.

Kapan kontrol yang berbeda harus digunakan?

Ada beberapa skenario di mana kontrol lain mungkin lebih tepat untuk digunakan.

  • Gunakan NavigationView saat Anda memerlukan navigasi aplikasi tingkat atas yang konsisten yang beradaptasi dengan ukuran jendela yang berbeda.
  • Gunakan TabView saat pengguna harus dapat membuka, menutup, menyusun ulang, atau merobek tampilan baru konten.
  • Gunakan PipsPager saat Anda memerlukan paginasi rutin dari satu tampilan data.
  • Gunakan RadioButtons saat opsi tidak dipilih secara default, dan konteks tidak terkait dengan navigasi halaman.

UWP dan WinUI 2

Penting

Kontrol SelectorBar tidak tersedia untuk UWP dan WinUI 2. Untuk alternatif, lihat NavigationView atau TabView.

Membuat kontrol SelectorBar

Buka aplikasi Galeri WinUI 3 dan lihat SelectorBar beraksi.

Aplikasi Galeri WinUI 3 mencakup contoh interaktif dari sebagian besar kontrol, fitur, dan fungsi WinUI 3. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di GitHub

XAML ini membuat kontrol SelectorBar dasar dengan 3 bagian konten.

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

Ini menunjukkan cara menambahkan SelectorBarItem dalam kode.

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

Item SelectorBar

Anda mengisi koleksi Item SelectorBar dengan objek SelectorBarItem. Anda dapat melakukan ini langsung di XAML atau dalam kode. Karena dimaksudkan untuk menampilkan sejumlah opsi terbatas, SelectorBar tidak memiliki ItemsSource properti untuk mengikat kumpulan item eksternal.

Konten item

Kelas SelectorBarItem menyediakan properti Teks dan Ikon yang Anda gunakan untuk mengatur konten bilah pemilih Anda. Anda dapat mengatur satu atau kedua properti; namun, kami sarankan Text Anda mengatur properti untuk membuat item lebih bermakna.

Properti Icon mengambil IconElement, sehingga Anda dapat menggunakan salah satu jenis ikon turunan ini:

Catatan

SelectorBarItem mewarisi properti Turunan dari ItemContainer. Anda dapat menggunakan properti ini untuk mengatur konten, tetapi kami tidak merekomendasikan ini. Kumpulan konten dengan cara ini tidak akan mendapatkan gaya dan status visual yang disediakan oleh templat kontrol SelectorBarItem.

Pilihan item

Anda dapat menggunakan properti SelectedItem untuk mendapatkan atau mengatur item aktif SelectorBar. Ini disinkronkan dengan properti SelectorBarItem IsSelected . Jika Anda mengatur salah satu properti, properti lainnya diperbarui secara otomatis.

Setiap kali SelectorBar mendapatkan fokus dan SelectedItem adalah null, SelectedItem secara otomatis diatur ke instans pertama yang dapat difokuskan dalam koleksi Item , jika ada.

Setiap kali item yang dipilih dihapus dari Items koleksi, SelectedItem properti diatur ke null. Jika SelectedItem diatur ke null saat SelectorBar memiliki fokus, SelectorBar tidak akan memiliki item yang dipilih tetapi mempertahankan fokus.

Pengaturan SelectedItem ke elemen yang saat ini tidak ada dalam Items koleksi melemparkan pengecualian.

Tidak ada SelectedIndex properti, tetapi Anda bisa mendapatkan indeks SelectedItem seperti ini:

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

Pilihan diubah

Tangani peristiwa SelectionChanged untuk merespons pilihan pengguna dan mengubah apa yang ditampilkan kepada pengguna. Peristiwa SelectionChanged dinaikkan saat item dipilih dengan salah satu cara berikut:

  • UI Automation
  • Fokus tab (dan item baru dipilih)
  • Navigasi kiri dan kanan dalam SelectorBar
  • Peristiwa yang diketuk melalui mouse atau sentuhan
  • Pilihan terprogram (melalui properti SelectorBar.SelectedItem atau properti IsSelected SelectorBarItem).

Saat pengguna memilih item, Anda biasanya mengubah tampilan dengan menavigasi di antara halaman yang berbeda di aplikasi Anda atau mengubah data yang ditampilkan dalam kontrol koleksi. Contoh keduanya ditampilkan di sini.

Tip

Anda dapat menemukan contoh-contoh ini di halaman SelectorBar dari aplikasi Galeri WinUI. Gunakan aplikasi Galeri WinUI untuk menjalankan dan melihat kode lengkap.

Contoh ini menunjukkan penanganan peristiwa SelectionChanged untuk menavigasi di antara halaman yang berbeda. Navigasi menggunakan SlideNavigationTransitionEffect untuk menggeser halaman dari kiri atau kanan, yang sesuai.

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

Menampilkan koleksi yang berbeda dalam ItemTampilan

Contoh ini memperlihatkan cara mengubah sumber data ItemView saat pengguna memilih opsi di SelectorBar.

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

Mendapatkan kode sampel

  • Sampel Galeri WinUI - Lihat semua kontrol XAML dalam format interaktif.