Switch

Przeglądanie przykładu

Kontrolka interfejsu użytkownika aplikacji wieloplatformowej platformy .NET (.NET MAUI) Switch to poziomy przycisk przełącznika, który może być manipulowany przez użytkownika w celu przełączania się między stanami włączonymi i wyłączonymi, które są reprezentowane przez boolean wartość.

Poniższy zrzut ekranu przedstawia kontrolkę Switch w jej stanach włączania i wyłączania przełącznika:

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

• IsToggled jest wartością wskazującą boolean , czy Switch element jest włączony. Wartość domyślna tej właściwości to false.
• OnColorColor element ma wpływ na sposób Switch renderowania elementu w włączonym lub włączonym stanie.
• ThumbColorColor jest kciukiem przełącznika.

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

Kontrolka Switch definiuje Toggled zdarzenie, które jest zgłaszane, gdy IsToggled właściwość zmienia się za pośrednictwem manipulowania użytkownikami lub ustawiania właściwości przez aplikację 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

Wystąpienie elementu można Switch utworzyć w języku XAML. Jego IsToggled właściwość można ustawić, aby przełączyć Switchelement . Domyślnie IsToggled właściwość to false. W poniższym przykładzie pokazano, jak utworzyć wystąpienie elementu Switch w języku XAML przy użyciu opcjonalnego IsToggled zestawu właściwości:

<Switch IsToggled="true"/>

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

Switch switchControl = new Switch { IsToggled = true };

Przełączanie wyglądu

Oprócz właściwości, które Switch dziedziczą z View klasy, Switch również definiuje OnColor i ThumbColor właściwości. Właściwość OnColor można ustawić tak, aby zdefiniować Switch kolor, gdy jest on przełączany do stanu włączonego, a ThumbColor właściwość można ustawić w celu zdefiniowania Color kciuka 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 OnColor="Orange"
        ThumbColor="Green" />

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

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

Poniższy zrzut ekranu przedstawia Switch stan przełącznika włączonego i wyłączonego z ustawionymi OnColor właściwościami i ThumbColor :

Reagowanie na zmianę stanu przełącznika

IsToggled Gdy właściwość ulegnie zmianie, za pomocą manipulacji użytkownika lub gdy aplikacja ustawia IsToggled właściwość, Toggled zdarzenie jest uruchamiane. 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 procedurze obsługi zdarzeń jest Switch odpowiedzialny za wypalanie tego zdarzenia. Za pomocą sender właściwości można uzyskać dostęp do Switch obiektu lub rozróżnić wiele Switch obiektów współużytkowania tej samej Toggled procedury obsługi zdarzeń.

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 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żyto wyrażenia powiązania w obiekcie , DataTrigger aby monitorować IsToggled właściwość Switch o nazwie styleSwitch. Gdy ta właściwość stanie się truewłaściwością , FontAttributes właściwości Label i FontSize zostaną zmienione. IsToggled Gdy właściwość powróci do falsewłaściwości , FontAttributes właściwości Label i FontSize są resetowane do ich stanu początkowego.

Aby uzyskać informacje o wyzwalaczach, zobacz Wyzwalacze.

Przełączanie stanów wizualizacji

Switch zawiera On i Off stany wizualizacji, których można użyć do zainicjowania zmiany wizualizacji po IsToggled zmianie właściwości.

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

<Switch IsToggled="True">
    <VisualStateManager.VisualStateGroups>
        <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>
    </VisualStateManager.VisualStateGroups>
</Switch>

W tym przykładzie On VisualState parametr określa, że gdy IsToggled właściwość ma truewartość , ThumbColor właściwość zostanie ustawiona na średnią wiosnę na zielono. Określa Off VisualState , że gdy IsToggled właściwość ma falsewartość , ThumbColor właściwość zostanie ustawiona na czerwony. W związku z tym ogólny efekt polega na tym, że gdy Switch znajduje się w pozycji wyłączonej, kciuk jest czerwony, a jego kciuk jest średnio wiosenny zielony, gdy Switch znajduje się na pozycji:

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 właściwość można wyłączyć, Switch ustawiając jej IsEnabled właściwość na false. Uniemożliwi to użytkownikom manipulowanie elementem Switch.