Bagikan melalui

Alihkan sakelar

Sakelar pengalih mewakili sakelar fisik yang memungkinkan pengguna untuk mengaktifkan atau menonaktifkan hal-hal, seperti sakelar lampu. Gunakan kontrol sakelar untuk menyajikan pengguna dengan dua opsi yang saling bertentangan (seperti aktif/nonaktif), di mana memilih salah satu 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

Alihkan sakelar ke posisi mati

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 saklar mudah dipahami, beri label dengan satu atau dua kata, sebaiknya kata benda, yang menjelaskan fungsi yang dikendalikannya. 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.

    Alihkan sakelar versus kotak centang

    Dalam contoh ini, jelas dengan sakelar bahwa lampu dapur dalam posisi "Aktif." Namun, dengan kotak centang, pengguna perlu memikirkan apakah lampu sudah menyala sekarang atau perlu mencentang kotak tersebut 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.

Recommendations

  • Gunakan label Aktif dan Nonaktif bawaan ketika Anda bisa; hanya ganti ketika diperlukan untuk saklar alih 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.

Membuat sakelar pengalih

Buka aplikasi Galeri WinUI 3 dan lihat ToggleSwitch 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.

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

Dipindahkan

Dalam kasus lain, Anda dapat menangani acara Toggled untuk merespons perubahan dalam keadaan.

Contoh ini menunjukkan cara menambahkan pengendali peristiwa Toggled di XAML dan melalui kode. Peristiwa Toggled ditangani untuk menyalakan atau mematikan progress ring, serta 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 .

  • Last updated on