Udostępnij przez

Przełączanie przełączników

Przełącznik reprezentuje przełącznik fizyczny, który umożliwia użytkownikom włączanie lub wyłączanie elementów, takich jak przełącznik światła. Przełącz kontrolki przełącznika, aby przedstawić użytkownikom dwie wzajemnie wykluczające się opcje (na przykład włączone/wyłączone), gdzie wybranie opcji zapewnia natychmiastowe wyniki.

Aby utworzyć kontrolkę przełącznika, należy użyć klasy ToggleSwitch.

Czy jest to właściwa kontrola?

Użyj przełącznika dla operacji binarnych, które obowiązują natychmiast po przełączeniu przełącznika przez użytkownika.

przełącznik w pozycji włączonej

Przełącznik wyłączony

Należy myśleć o przełączniku jako o fizycznym przełączniku zasilania dla urządzenia: przełączyć na włączone lub wyłączone, gdy chcesz włączyć lub wyłączyć akcję urządzenia.

Aby przełącznik był łatwy do zrozumienia, oznacz go jednym lub dwoma słowami, najlepiej rzeczownikami, które opisują funkcje, jakie kontroluje. Na przykład "Wi-Fi" lub "Światła kuchenne".

Wybieranie między przełącznikiem i polem wyboru

W przypadku niektórych akcji może działać przełącznik lub pole wyboru. Aby zdecydować, która kontrola będzie działać lepiej, postępuj zgodnie z następującymi wskazówkami:

  • Użyj przełącznika dla ustawień binarnych, gdy zmiany staną się skuteczne natychmiast po zmianie ich przez użytkownika.

    Przełącznik a pole wyboru

    W tym przykładzie z przełącznikiem jest jasne, że światła w kuchni są ustawione na "Włączone". Jednak przy użyciu pola wyboru użytkownik musi się zastanowić, czy światła są teraz włączone, czy należy zaznaczyć to pole, aby je włączyć.

  • Użyj pól wyboru dla elementów opcjonalnych ("warto mieć").

  • Użyj pola wyboru, gdy użytkownik musi wykonać dodatkowe kroki, aby zmiany były skuteczne. Jeśli na przykład użytkownik musi kliknąć przycisk "prześlij" lub "dalej", aby zastosować zmiany, użyj pola wyboru.

  • Użyj pól wyboru, gdy użytkownik może wybrać wiele elementów powiązanych z jednym ustawieniem lub funkcją.

Rekomendacje

  • Użyj domyślnych etykiet Włączone i Wyłączone, jeśli to możliwe; zastąp je tylko wtedy, gdy jest to konieczne, aby przełącznik był zrozumiały. Jeśli je zastąpisz, użyj pojedynczego słowa, które dokładniej opisuje przełącznik. Ogólnie rzecz biorąc, jeśli wyrazy "Włączone" i "Wyłączone" nie opisują akcji powiązanej z przełącznikiem, może być potrzebna inna kontrolka.
  • Unikaj zastępowania etykiet Włączone i Wyłączone, chyba że musisz; trzymaj się etykiet domyślnych, chyba że sytuacja wymaga etykiet niestandardowych.

Tworzenie przełącznika

Otwórz aplikację Galerii WinUI 3, aby zobaczyć przełącznik w akcji

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

Oto jak utworzyć prosty przełącznik. Ten kod XAML tworzy przełącznik pokazany wcześniej.

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

Poniżej przedstawiono sposób tworzenia tego samego przełącznika w kodzie.

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

Przełącznik może być włączony lub wyłączony. Użyj właściwości IsOn, aby określić stan przełącznika. Gdy przełącznik jest używany do kontrolowania stanu innej właściwości binarnej, można użyć powiązania, jak pokazano tutaj.

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

Przełączane

W innych przypadkach można obsłużyć zdarzenie Przełączone, aby reagować na zmiany stanu.

W tym przykładzie pokazano, jak dodać program obsługi zdarzeń toggled w języku XAML i w kodzie. Zdarzenie Toggled jest obsługiwane, aby zmienić stan włączenia/wyłączenia pierścienia postępu i zmienić jego widoczność.

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

Poniżej przedstawiono sposób tworzenia tego samego przełącznika w kodzie.

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

Oto funkcja obsługi zdarzenia 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;
        }
    }
}

Etykiety włączone/wyłączone

Domyślnie przełącznik zawiera dosłowne etykiety Włączone i Wyłączone, które są zlokalizowane automatycznie. Te etykiety można zastąpić, ustawiając właściwości OnContenti OffContent.

W tym przykładzie etykiety Włączone/Wyłączone są zastępowane etykietami Pokaż/Ukryj.

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

Możesz również użyć bardziej złożonej zawartości, ustawiając właściwości OnContentTemplate oraz OffContentTemplate.

UwP i WinUI 2

Ważne

Informacje i przykłady w tym artykule są zoptymalizowane dla aplikacji korzystających z Windows App SDK oraz WinUI 3, ale generalnie mają zastosowanie także w aplikacjach UWP używających WinUI 2. Zobacz dokumentację interfejsu API platformy UWP, aby uzyskać informacje i przykłady dotyczące platformy.

Ta sekcja zawiera informacje potrzebne do używania kontrolki w aplikacji platformy UWP lub WinUI 2.

API dla tej kontrolki istnieją w ramach przestrzeni nazw Windows.UI.Xaml.Controls.

Zalecamy użycie najnowszej wersji WinUI 2 , aby uzyskać najbardziej aktualne style i szablony dla wszystkich kontrolek.

  • Last updated on