Bagikan melalui

Alihkan sakelar

  • Artikel

Sakelar pengalih mewakili sakelar fisik yang memungkinkan pengguna untuk mengaktifkan atau menonaktifkan hal-hal, seperti sakelar lampu. Gunakan kontrol pengalih 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 tombol, aktif

Matikan tombol alih

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

Untuk membuat pengalih pengalih mudah dipahami, beri label dengan satu atau dua kata, lebih disukai kata benda, yang menjelaskan 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.

    Kotak centang Alihkan sakelar 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 bisa; hanya ganti ketika diperlukan tombol alihkan agar 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 situasi 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 Tindakan ToggleSwitch.

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

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 ditunjukkan 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 dalam 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 .

Mendapatkan kode sampel

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