Bagikan melalui

Bilah pemilih

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

Bilah pemilihan dengan simpul Terbaru, Dibagikan, 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 meliputi:

  • 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 memisahkan tampilan konten baru.
  • 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.

Membuat kontrol SelectorBar

Buka aplikasi Galeri WinUI 3 dan lihat SelectorBar beraksi

Ikon Galeri WinUI 3 Aplikasi Galeri WinUI 3 mencakup contoh interaktif kontrol dan fitur WinUI. Dapatkan aplikasi dari Microsoft Store atau telusuri kode sumber pada 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.

Isi 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 Anda mengatur properti Text untuk membuat item lebih bermakna.

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

Nota

SelectorBarItem mewarisi properti Child dari ItemContainer. Anda dapat menggunakan properti ini untuk mengatur konten, tetapi kami tidak merekomendasikan ini. Konten yang diatur seperti ini tidak akan mendapatkan penataan gaya dan status visual yang disediakan oleh template kontrol SelectorBarItem.

Pemilihan Barang

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 terpilih dihapus dari Items koleksi, properti SelectedItem 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 dipicu ketika sebuah item dipilih dengan salah satu cara berikut:

  • UI Automatisasi (UI adalah antarmuka pengguna)
  • Fokus tab (dan item baru dipilih)
  • Navigasi kiri dan kanan dalam SelectorBar
  • Kejadian yang diklik atau disentuh 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.

Petunjuk / Saran

Anda dapat menemukan contoh-contoh ini di halaman SelectorBar dari aplikasi Galeri WinUI 3. Gunakan aplikasi Galeri WinUI 3 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 ItemsView

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;
    }
}
  • Last updated on