Share via

Alihkan sakelar

  • Artikel

Sakelar pengalih mewakili sakelar fisik yang memungkinkan pengguna untuk mengaktifkan atau menonaktifkan semuanya, seperti sakelar lampu. Gunakan kontrol sakelar pengalih untuk menyajikan pengguna dengan dua opsi yang saling eksklusif (seperti aktif/nonaktif), di mana memilih opsi memberikan hasil langsung.

Untuk membuat kontrol sakelar pengalih, Anda menggunakan kelas ToggleSwitch.

Apakah ini kontrol yang tepat?

Gunakan sakelar pengalih untuk operasi biner yang berlaku tepat setelah pengguna membalik sakelar pengalih.

Alihkan sakelar, aktif

Alihkan matikan

Anggap sakelar pengalih sebagai sakelar daya fisik untuk perangkat: Anda menyalakan atau menonaktifkannya saat ingin mengaktifkan atau menonaktifkan tindakan yang dilakukan oleh perangkat.

Untuk membuat sakelar pengalih mudah dipahami, beri label dengan satu atau dua kata, sebaiknya kata benda, yang menggambarkan fungsionalitas yang dikontrolnya. Misalnya, "WiFi" atau "Lampu dapur."

Memilih antara sakelar pengalih dan kotak centang

Untuk beberapa tindakan, sakelar pengalih atau kotak centang mungkin berfungsi. Untuk memutuskan kontrol mana yang akan bekerja lebih baik, ikuti tips berikut:

  • Gunakan sakelar pengalih untuk pengaturan biner saat perubahan menjadi efektif segera setelah pengguna mengubahnya.

    Beralih ke kotak centang beralih versus

    Dalam contoh ini, jelas dengan sakelar pengalih bahwa lampu dapur diatur ke "Aktif." Tetapi dengan kotak centang, pengguna perlu memikirkan apakah lampu menyala sekarang atau apakah mereka perlu mencentang kotak untuk menyalakan lampu.

  • Gunakan kotak centang untuk item opsional ("bagus untuk memiliki").

  • Gunakan kotak centang saat pengguna harus melakukan langkah tambahan agar perubahan efektif. Misalnya, jika pengguna harus mengklik tombol "kirim" atau "berikutnya" untuk menerapkan perubahan, gunakan kotak centang.

  • Gunakan kotak centang saat pengguna dapat memilih beberapa item yang terkait dengan satu pengaturan atau fitur.

Rekomendasi

  • Gunakan label Aktif dan Nonaktif default saat Anda dapat; hanya ganti jika diperlukan agar pengalih beralih masuk akal. Jika Anda menggantinya, gunakan satu kata yang lebih akurat menggambarkan tombol. Secara umum, jika kata "Aktif" dan "Nonaktif" tidak menggambarkan tindakan yang terkait dengan sakelar pengalih, Anda mungkin memerlukan kontrol yang berbeda.
  • Hindari mengganti label Aktif dan Nonaktif kecuali Anda harus; tetap dengan label default kecuali situasinya memanggil label kustom.

UWP dan WinUI 2

Penting

Informasi dan contoh dalam artikel ini dioptimalkan untuk aplikasi yang menggunakan SDK Aplikasi Windows dan WinUI 3, tetapi umumnya berlaku untuk aplikasi UWP yang menggunakan WinUI 2. Lihat referensi API UWP untuk informasi dan contoh spesifik platform.

Bagian ini berisi informasi yang Anda butuhkan untuk menggunakan kontrol di aplikasi UWP atau WinUI 2.

API untuk kontrol ini ada di namespace Windows.UI.Xaml.Controls .

Sebaiknya gunakan WinUI 2 terbaru untuk mendapatkan gaya dan templat terbaru untuk semua kontrol.

Membuat sakelar pengalih

Buka aplikasi Galeri WinUI 3 dan lihat ToggleSwitch beraksi.

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

Berikut cara membuat sakelar pengalih sederhana. XAML ini membuat sakelar pengalih yang ditunjukkan sebelumnya.

<ToggleSwitch x:Name="lightToggle" Header="Kitchen Lights"/>

Berikut cara membuat sakelar pengalih yang sama dalam kode.

ToggleSwitch lightToggle = new ToggleSwitch();
lightToggle.Header = "Kitchen Lights";

// Add the toggle switch to a parent container in the visual tree.
stackPanel1.Children.Add(lightToggle);

IsOn

Sakelar dapat aktif atau nonaktif. Gunakan properti IsOn untuk menentukan status sakelar. Saat sakelar digunakan untuk mengontrol status properti biner lain, Anda dapat menggunakan pengikatan seperti yang diperlihatkan di sini.

<StackPanel Orientation="Horizontal">
    <ToggleSwitch x:Name="ToggleSwitch1" IsOn="True"/>
    <ProgressRing IsActive="{x:Bind ToggleSwitch1.IsOn, Mode=OneWay}" 
                  Width="130"/>
</StackPanel>

Beralih

Dalam kasus lain, Anda dapat menangani peristiwa Beralih untuk merespons perubahan status.

Contoh ini menunjukkan cara menambahkan penanganan aktivitas Beralih di XAML dan dalam kode. Peristiwa Beralih ditangani untuk mengaktifkan atau menonaktifkan cincin kemajuan, dan mengubah visibilitasnya.

<ToggleSwitch x:Name="toggleSwitch1" IsOn="True"
              Toggled="ToggleSwitch_Toggled"/>

Berikut cara membuat sakelar pengalih yang sama dalam kode.

// Create a new toggle switch and add a Toggled event handler.
ToggleSwitch toggleSwitch1 = new ToggleSwitch();
toggleSwitch1.Toggled += ToggleSwitch_Toggled;

// Add the toggle switch to a parent container in the visual tree.
stackPanel1.Children.Add(toggleSwitch1);

Berikut adalah handler untuk peristiwa Toggled.

private void ToggleSwitch_Toggled(object sender, RoutedEventArgs e)
{
    ToggleSwitch toggleSwitch = sender as ToggleSwitch;
    if (toggleSwitch != null)
    {
        if (toggleSwitch.IsOn == true)
        {
            progress1.IsActive = true;
            progress1.Visibility = Visibility.Visible;
        }
        else
        {
            progress1.IsActive = false;
            progress1.Visibility = Visibility.Collapsed;
        }
    }
}

Label Aktif/Nonaktif

Secara default, sakelar pengalih menyertakan label Aktif dan Nonaktif harfiah, yang dilokalkan secara otomatis. Anda dapat mengganti label ini dengan mengatur properti OnContent, dan OffContent .

Contoh ini menggantikan label Aktif/Nonaktif dengan label Perlihatkan/Sembunyikan.

<ToggleSwitch x:Name="imageToggle" Header="Show images"
              OffContent="Show" OnContent="Hide"
              Toggled="ToggleSwitch_Toggled"/>

Anda juga dapat menggunakan konten yang lebih kompleks dengan mengatur properti OnContentTemplate dan OffContentTemplate .

Dapatkan kode sampel