Przełącznik

Przeglądanie przykładu

Kontrolka interfejsu użytkownika .NET MAUI Switch to poziomy przycisk przełącznika, którym użytkownik może sterować, aby przełączać się między stanem włączonym i wyłączonym, reprezentowanymi przez wartość boolean.

Poniższy zrzut ekranu przedstawia kontrolkę Switch w stanie włączenia i wyłączenia.

Kontrolka Switch definiuje następujące właściwości:

• IsToggled jest wartością boolean, która wskazuje, czy Switch jest włączony. Wartość domyślna tej właściwości to false.
• OffColor jest elementem Color określającym sposób Switch renderowania elementu w stanie wyłączonym.
• OnColor jest Color określającym sposób, w jaki Switch jest renderowany w stanie włączonym.
• ThumbColor to część Color pełniąca funkcję kciuka przełącznika.

Te właściwości są obsługiwane przez BindableProperty obiekty, co oznacza, że można je stylizować i mogą być obiektem docelowym powiązań danych.

Element sterujący Switch definiuje zdarzenie Toggled, które jest zgłaszane, gdy właściwość IsToggled zmienia się wskutek manipulowania przez użytkownika lub gdy aplikacja ustawia właściwość IsToggled. Obiekt ToggledEventArgs , który towarzyszy Toggled zdarzeniu ma jedną właściwość o nazwie Value, typu bool. Gdy zdarzenie jest wywoływane, wartość Value właściwości odzwierciedla nową wartość IsToggled właściwości.

Tworzenie przełącznika

W języku XAML można utworzyć wystąpienie elementu Switch. Jego IsToggled właściwość można ustawić, aby przełączyć Switch element. Właściwość IsToggled jest domyślnie false. W poniższym przykładzie pokazano, jak utworzyć wystąpienie elementu Switch w języku XAML, ustawiając opcjonalną właściwość IsToggled.

<Switch IsToggled="true"
        SemanticProperties.Description="Toggle setting" />

Element Switch można również utworzyć w kodzie:

Switch switchControl = new Switch { IsToggled = true };
SemanticProperties.SetDescription(switchControl, "Toggle setting");

Zmień wygląd

Oprócz właściwości, które Switch dziedziczy z klasy View, Switch definiuje również właściwości OffColor, OnColor oraz ThumbColor. Właściwość OffColor można ustawić tak, aby zdefiniować Switch kolor w trybie wyłączenia. Właściwość OnColor można ustawić tak, aby zdefiniować Switch kolor, gdy jest on włączony, a ThumbColor właściwość można ustawić, aby zdefiniować Color kciuk przełącznika. W poniższym przykładzie pokazano, jak utworzyć wystąpienie elementu Switch w języku XAML przy użyciu następującego zestawu właściwości:

<Switch OffColor="Red"
        OnColor="Orange"
        ThumbColor="Green" />

Właściwości można również ustawić podczas tworzenia Switch w kodzie.

Switch switch = new Switch { OffColor = Colors.Red, OnColor = Colors.Orange, ThumbColor = Colors.Green };

Poniższy zrzut ekranu przedstawia Switch w trybie włączonym i wyłączonym, z ustawionymi właściwościami OnColor i ThumbColor.

Reagowanie na zmianę stanu przełącznika

Gdy właściwość IsToggled ulegnie zmianie w wyniku manipulacji użytkownika lub ustawienia przez aplikację właściwości IsToggled, uruchamiane jest zdarzenie Toggled. Program obsługi zdarzeń dla tego zdarzenia można zarejestrować w celu reagowania na zmianę:

<Switch Toggled="OnToggled" />

Plik związany z kodem zawiera procedurę obsługi zdarzenia Toggled :

void OnToggled(object sender, ToggledEventArgs e)
{
    // Perform an action after examining e.Value
}

Argument sender w obsłudze zdarzenia jest Switch odpowiedzialny za wywołanie tego zdarzenia. Możesz użyć argumentu sender, aby uzyskać dostęp do obiektu Switch lub do rozróżnienia wielu obiektów Switch, które współdzielą ten sam program obsługi zdarzeń Toggled.

Program Toggled obsługi zdarzeń można również przypisać w kodzie:

Switch switchControl = new Switch {...};
switchControl.Toggled += (sender, e) =>
{
    // Perform an action after examining e.Value
};

Powiązywanie danych z przełącznikiem

Program Toggled obsługi zdarzeń można wyeliminować przy użyciu powiązania danych i wyzwalaczy w celu reagowania Switch na zmieniające się stany przełącznika.

<Switch x:Name="styleSwitch" />
<Label Text="Lorem ipsum dolor sit amet, elit rutrum, enim hendrerit augue vitae praesent sed non, lorem aenean quis praesent pede.">
    <Label.Triggers>
        <DataTrigger TargetType="Label"
                     Binding="{Binding x:DataType='Switch', Source={x:Reference styleSwitch}, Path=IsToggled}"
                     Value="true">
            <Setter Property="FontAttributes"
                    Value="Italic, Bold" />
            <Setter Property="FontSize"
                    Value="18" />
        </DataTrigger>
    </Label.Triggers>
</Label>

W tym przykładzie Label używa wyrażenia powiązania w DataTrigger do monitorowania właściwości IsToggled w obiekcie Switch, który nazywa się styleSwitch. Gdy ta właściwość stanie się true, właściwości FontAttributes i FontSizeLabel zostaną zmienione. Gdy właściwość IsToggled powróci do false, właściwości FontAttributes i FontSize elementu Label są resetowane do ich początkowego stanu.

Aby uzyskać informacje o wyzwalaczach, zobacz Wyzwalacze.

Przełączanie stanów wizualizacji

Switch zawiera On i Off stany wizualne, których można użyć do zainicjowania zmiany wizualnej, gdy właściwość IsToggled ulega zmianie.

W poniższym przykładzie XAML pokazano, jak zdefiniować stany wizualne dla stanów On i Off:

<Switch IsToggled="True">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroupList>
             <VisualStateGroup x:Name="CommonStates">
                 <VisualState x:Name="On">
                     <VisualState.Setters>
                         <Setter Property="ThumbColor"
                             Value="MediumSpringGreen" />
                     </VisualState.Setters>
                 </VisualState>
                 <VisualState x:Name="Off">
                     <VisualState.Setters>
                         <Setter Property="ThumbColor"
                             Value="Red" />
                     </VisualState.Setters>
                 </VisualState>
             </VisualStateGroup>
        </VisualStateGroupList>
    </VisualStateManager.VisualStateGroups>
</Switch>

W tym przykładzie OnVisualState określa, że gdy IsToggled właściwość ma wartość true, ThumbColor właściwość zostanie ustawiona na średnia jasnozielony. Określa OffVisualState, że gdy właściwość IsToggled ma wartość false, właściwość ThumbColor zostanie ustawiona na czerwono. W związku z tym ogólny efekt jest taki, że gdy Switch znajduje się w pozycji wyłączonej, kciuk jest czerwony, a w kolorze średnio wiosennej zieleni, gdy Switch znajduje się w pozycji włączonej.

Aby uzyskać więcej informacji na temat stanów wizualizacji, zobacz Visual states (Stany wizualizacji).

Wyłączanie przełącznika

Aplikacja może wprowadzić stan, w którym Switch przełączanie nie jest prawidłową operacją. W takich przypadkach Switch można wyłączyć, ustawiając jego właściwość IsEnabled na false. Uniemożliwi to użytkownikom manipulowanie elementem Switch.