Sdílet prostřednictvím

Přepínače

Přepínač představuje fyzický přepínač, který umožňuje uživatelům zapnout nebo vypnout věci, jako je třeba světelný přepínač. Pomocí ovládacích prvků přepínače můžete prezentovat uživatele se dvěma vzájemně se vylučujínými možnostmi (například zapnuto/vypnuto), kde volba možnosti poskytuje okamžité výsledky.

Chcete-li vytvořit přepínací ovládací prvek, použijte třídu ToggleSwitch.

Je to správná kontrola?

Použijte přepínač pro binární operace, které se projeví hned po překlopení přepínače uživatelem.

přepínač na

vypnout přepínač

Přepínač si můžete představit jako fyzický přepínač napájení zařízení: když chcete povolit nebo zakázat akci prováděnou zařízením, překlopíte ho nebo vypnete.

Pokud chcete přepínač snadno pochopit, označte ho jedním nebo dvěma slovy, nejlépe podstatnými jmenami, které popisují funkce, které řídí. Například "WiFi" nebo "Kuchyňská světla".

Volba mezi přepínačem a zaškrtávacím políčkem

U některých akcí může fungovat přepínač nebo zaškrtávací políčko. Pokud se chcete rozhodnout, který ovládací prvek bude fungovat lépe, postupujte podle těchto tipů:

  • Pokud se změny projeví okamžitě po změně provedené uživatelem, použijte přepínač pro binární nastavení.

    Přepínač versus zaškrtávací políčko

    V tomto příkladu je zřejmé z přepínače s překlápěním, že jsou kuchyňská světla nastavena na „Zapnuto“. Ale se zaškrtávacím políčkem musí uživatel přemýšlet, jestli jsou světla teď zapnutá, nebo musí políčko zaškrtnout, aby se světla zapnula.

  • Použijte zaškrtávací políčka pro volitelné (ne nutné) položky.

  • Zaškrtávací políčko použijte, když uživatel musí provést další kroky, aby změny byly efektivní. Pokud například uživatel musí kliknout na tlačítko Odeslat nebo Další, aby mohli použít změny, použijte zaškrtávací políčko.

  • Zaškrtávací políčka použijte, když uživatel může vybrat více položek souvisejících s jedním nastavením nebo funkcí.

Recommendations

  • Použijte výchozí popisky zapnuto a vypnuto, pokud je to možné; nahraďte je pouze tehdy, když je nutné, aby přepínač dával smysl. Pokud je nahradíte, použijte jedno slovo, které přesněji popisuje přepínač. Obecně platí, že pokud slova "Zapnuto" a "Vypnuto" nepopisují akci svázanou s přepínačem, možná budete potřebovat jiný ovládací prvek.
  • Vyhněte se nahrazení popisků Zapnuto a Vypnuto, pokud není nutné; pokud situace nevyvolá vlastní popisky, držte se výchozích popisků.

Vytvoření přepínače

Otevření aplikace Galerie WinUI 3 a zobrazení přepínače v akci

Ikona galerie WinUI 3 Aplikace Galerie WinUI 3 obsahuje interaktivní příklady ovládacích prvků a funkcí WinUI. Získejte aplikaci z Microsoft Store nebo vyhledejte zdrojový kód na GitHub.

Tady je postup vytvoření jednoduchého přepínače. Tento XAML vytvoří přepínač zobrazený dříve.

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

Tady je postup, jak vytvořit stejný přepínač v kódu.

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

Přepínač může být zapnutý nebo vypnutý. K určení stavu přepínače použijte vlastnost IsOn. Pokud se přepínač používá k řízení stavu jiné binární vlastnosti, můžete použít vazbu, jak je znázorněno zde.

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

Přepnuto

V jiných případech můžete zpracovat událost Přepínací a reagovat na změny ve stavu.

Tento příklad ukazuje, jak přidat obslužnou rutinu události Toggled v XAML a v kódu. Událost Toggled je zpracována pro zapnutí nebo vypnutí indikátoru průběhu a změnu jeho viditelnosti.

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

Tady je postup, jak vytvořit stejný přepínač v kódu.

// 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);

Tady je obslužná rutina pro událost 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;
        }
    }
}

Štítky zapnuto/vypnuto

Přepínač ve výchozím nastavení obsahuje popisky "Zapnuto" a "Vypnuto", které jsou lokalizovány automaticky. Tyto popisky můžete nahradit nastavením vlastností OnContenta OffContent.

Tento příklad nahrazuje popisky Zapnuto/Vypnuto zobrazením nebo skrytí popisků.

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

Složitější obsah můžete také použít nastavením vlastností OnContentTemplate a OffContentTemplate.

  • Last updated on