Partager via


Xamarin.Forms Interrupteur

Le Xamarin.FormsSwitch contrôle est un bouton bascule horizontal qui peut être manipulé par l’utilisateur pour basculer entre les états activés et désactivés, qui sont représentés par une boolean valeur. La classe Switch hérite des données de l’élément View.

Les captures d’écran suivantes montrent un Switch contrôle dans ses états activés et désactivés sur iOS et Android :

Capture d’écran des commutateurs dans les états activés et désactivés, sur iOS et Android

Le Switch contrôle définit les propriétés suivantes :

  • IsToggled est une boolean valeur qui indique si la valeur Switch est activée.
  • OnColor est un Color élément qui affecte la façon dont le Switch rendu est affiché dans l’état bascule ou activé.
  • ThumbColor est le Color pouce du commutateur.

Ces propriétés sont sauvegardées par un BindableProperty objet, ce qui signifie que le Switch style peut être appliqué et être la cible des liaisons de données.

Le Switch contrôle définit un Toggled événement déclenché lorsque la propriété change, via la IsToggled manipulation de l’utilisateur ou lorsqu’une application définit la IsToggled propriété. L’objet ToggledEventArgs qui accompagne l’événement Toggled a une propriété unique nommée Value, de type bool. Lorsque l’événement est déclenché, la valeur de la Value propriété reflète la nouvelle valeur de la IsToggled propriété.

Créer un commutateur

Un Switch peut être instancié en XAML. Sa IsToggled propriété peut être définie pour activer/désactiver le Switch. Par défaut, la propriété IsToggled est false. L’exemple suivant montre comment instancier un Switch code XAML avec le jeu de propriétés facultatif IsToggled :

<Switch IsToggled="true"/>

Vous pouvez également créer un Switch code :

Switch switchControl = new Switch { IsToggled = true };

Apparence du commutateur

Outre les propriétés qui Switch héritent de la View classe, Switch définissent OnColor également et ThumbColor propriétés. La OnColor propriété peut être définie pour définir la Switch couleur lorsqu’elle est basculée sur sonétat, et la ThumbColor propriété peut être définie pour définir le Color pouce de commutateur. L’exemple suivant montre comment instancier un Switch en XAML avec ces propriétés définies :

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

Les propriétés peuvent également être définies lors de la création d’un Switch code dans :

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

La capture d’écran suivante montre les Switchétats activés et désactivés , avec les OnColor propriétés définies ThumbColor :

Capture d’écran des commutateurs dans les états activés et désactivés, sur iOS et Android avec les couleurs modifiées.

Répondre à une modification d’état switch

Lorsque la IsToggled propriété change, soit via la manipulation de l’utilisateur, soit lorsqu’une application définit la IsToggled propriété, l’événement Toggled se déclenche. Un gestionnaire d’événements pour cet événement peut être inscrit pour répondre à la modification :

<Switch Toggled="OnToggled" />

Le fichier code-behind contient le gestionnaire de l’événement Toggled :

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

L’argument sender du gestionnaire d’événements est le Switch responsable du déclenchement de cet événement. Vous pouvez utiliser la sender propriété pour accéder à l’objet ou faire la Switch distinction entre plusieurs Switch objets partageant le même Toggled gestionnaire d’événements.

Le Toggled gestionnaire d’événements peut également être affecté dans le code :

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

Liaison de données d’un commutateur

Le Toggled gestionnaire d’événements peut être éliminé à l’aide de la liaison de données et des déclencheurs pour répondre à un Switch changement d’état de bascule.

<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="Large" />
        </DataTrigger>
    </Label.Triggers>
</Label>

Dans cet exemple, l’utilisation Label d’une expression de liaison dans un DataTrigger pour surveiller la IsToggled propriété du Switch nom styleSwitch. Lorsque cette propriété devient true, les FontAttributes propriétés et FontSize les propriétés de celles-ci Label sont modifiées. Lorsque la IsToggled propriété est retournée false, les FontAttributes propriétés et FontSize les propriétés de l’objet Label sont réinitialisées à leur état initial.

Pour plus d’informations sur les déclencheurs, consultez Xamarin.Forms Déclencheurs.

États visuels de Switch

Switch a On et Off les états visuels qui peuvent être utilisés pour initier une modification visuelle lorsque la IsToggled propriété change.

L’exemple XAML suivant montre comment définir des états visuels pour les états et Off les On états :

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

Dans cet exemple, les OnVisualState spécifies que lorsque la IsToggled propriété est true, la ThumbColor propriété est définie sur vert printemps moyen. Spécifie OffVisualState que lorsque la IsToggled propriété est false, la ThumbColor propriété est définie sur rouge. Par conséquent, l’effet global est que lorsque le Switch pouce est en position désactivée, son pouce est rouge, et son pouce est vert de printemps moyen quand il Switch est en position sur :

Capture d’écran du commutateur Sur VisualState, sur iOS et AndroidCapture d’écran de La désactivation de VisualState, sur iOS et Android

Pour plus d’informations sur les états visuels, consultez Xamarin.Forms Visual State Manager.

Désactiver un commutateur

Une application peut entrer un état dans lequel le Switch basculement n’est pas une opération valide. Dans ce cas, le Switch paramètre peut être désactivé en définissant sa IsEnabled propriété sur false. Cela empêchera les utilisateurs de pouvoir manipuler le Switch.