Déclencheurs

  • Article

Browse sample. Parcourir l’exemple

Les déclencheurs d’interface utilisateur d’application multiplateforme .NET (.NET MAUI) vous permettent d’exprimer des actions déclarativement en XAML qui modifient l’apparence des contrôles en fonction des événements ou des modifications de données. En outre, les déclencheurs d’état, qui sont un groupe spécialisé de déclencheurs, définissent quand un VisualState doit être appliqué.

Vous pouvez affecter un déclencheur directement à la collection d’un Triggers contrôle, ou l’ajouter à un dictionnaire de ressources au niveau de la page ou au niveau de l’application à appliquer à plusieurs contrôles.

Déclencheurs de propriété

Représente Trigger un déclencheur qui applique des valeurs de propriété ou effectue des actions lorsque la propriété spécifiée répond à une condition spécifiée.

L’exemple suivant montre un Trigger changement de couleur d’arrière-plan Entry lorsqu’il reçoit le focus :

<Entry Placeholder="Enter name">
    <Entry.Triggers>
        <Trigger TargetType="Entry"
                 Property="IsFocused"
                 Value="True">
            <Setter Property="BackgroundColor"
                    Value="Yellow" />
            <!-- Multiple Setter elements are allowed -->
        </Trigger>
    </Entry.Triggers>
</Entry>

La déclaration du déclencheur spécifie les éléments suivants :

  • TargetType - type de contrôle auquel le déclencheur s’applique.
  • Property - propriété sur le contrôle surveillé.
  • Value - valeur, lorsqu’elle se produit pour la propriété surveillée, ce qui provoque l’activation du déclencheur.
  • Setter - collection d’éléments Setter appliqués lorsque la condition de déclencheur est remplie.

En outre, les regroupements facultatifs EnterActions et ExitActions facultatifs peuvent être spécifiés. Pour plus d’informations, consultez EnterActions et ExitActions.

Appliquer un déclencheur à l’aide d’un style

Les déclencheurs peuvent également être ajoutés à une déclaration Style dans le ResourceDictionary d’un contrôle, d’une page ou d’une d’application. L’exemple suivant déclare un style implicite pour tous les Entry contrôles de la page :

<ContentPage.Resources>
    <Style TargetType="Entry">
        <Style.Triggers>
            <Trigger TargetType="Entry"
                     Property="IsFocused"
                     Value="True">
                <Setter Property="BackgroundColor"
                        Value="Yellow" />
                <!-- Multiple Setter elements are allowed -->
            </Trigger>
        </Style.Triggers>
    </Style>
</ContentPage.Resources>

Déclencheurs de données

Un DataTrigger déclencheur qui applique des valeurs de propriété ou effectue des actions lorsque les données liées répondent à une condition spécifiée. L’extension de Binding balisage est utilisée pour surveiller la condition spécifiée.

L’exemple suivant montre un DataTrigger qui désactive un Button moment où l’objet Entry est vide :

<Entry x:Name="entry"
       Text=""
       Placeholder="Enter text" />
<Button Text="Save">
    <Button.Triggers>
        <DataTrigger TargetType="Button"
                     Binding="{Binding Source={x:Reference entry},
                                       Path=Text.Length}"
                     Value="0">
            <Setter Property="IsEnabled"
                    Value="False" />
            <!-- Multiple Setter elements are allowed -->
        </DataTrigger>
    </Button.Triggers>
</Button>

Dans cet exemple, lorsque la longueur du Entry déclencheur est égale à zéro, le déclencheur est activé.

Conseil

Lorsque l’évaluation Path=Text.Length fournit toujours une valeur par défaut pour la propriété cible (par exemple Text=""), car sinon elle sera null et le déclencheur ne fonctionnera pas comme prévu.

En outre, les regroupements facultatifs EnterActions et ExitActions facultatifs peuvent être spécifiés. Pour plus d’informations, consultez EnterActions et ExitActions.

Déclencheurs d’événement

Représente EventTrigger un déclencheur qui applique un ensemble d’actions en réponse à un événement. Contrairement Triggerà , EventTrigger n’a pas de concept d’arrêt d’état, les actions ne seront donc pas annulées une fois que la condition qui a déclenché l’événement n’est plus vraie.

Une EventTrigger seule propriété doit Event être définie :

<EventTrigger Event="TextChanged">
    <local:NumericValidationTriggerAction />
</EventTrigger>

Dans cet exemple, il n’existe aucun Setter élément. Au lieu de cela, il y a un NumericalValidationTriggerAction objet.

Remarque

Les déclencheurs d’événements ne prennent pas en charge EnterActions et ExitActions.

Une implémentation d’action de déclencheur doit :

  • Implémenter la classe générique TriggerAction<T>, avec le paramètre générique correspondant au type de contrôle auquel le déclencheur doit être appliqué. Vous pouvez utiliser des classes telles que VisualElement l’écriture d’actions de déclencheur qui fonctionnent avec divers contrôles, ou spécifier un type de contrôle comme Entry.
  • Remplacez la méthode Invoke . Cette méthode est appelée chaque fois que l’événement de déclencheur se produit.
  • Vous pouvez éventuellement exposer des propriétés qui peuvent être définies en XAML lorsque le déclencheur est déclaré.

L’exemple suivant montre la NumericValidationTriggerAction classe :

public class NumericValidationTriggerAction : TriggerAction<Entry>
{
    protected override void Invoke(Entry entry)
    {
        double result;
        bool isValid = Double.TryParse(entry.Text, out result);
        entry.TextColor = isValid ? Colors.Black : Colors.Red;
    }
}

Avertissement

Soyez prudent lorsque vous partagez des déclencheurs dans un ResourceDictionary. Une instance sera partagée entre les contrôles afin que tous les états configurés une fois s’appliquent à eux.

Déclencheurs multiples

Représente MultiTrigger un déclencheur qui applique des valeurs de propriété ou effectue des actions, lorsqu’un ensemble de conditions est satisfait. Toutes les conditions doivent être remplies avant l’application des Setter objets.

L’exemple suivant montre une MultiTrigger liaison à deux Entry objets :

<Entry x:Name="email"
       Text="" />
<Entry x:Name="phone"
       Text="" />
<Button Text="Save">
    <Button.Triggers>
        <MultiTrigger TargetType="Button">
            <MultiTrigger.Conditions>
                <BindingCondition Binding="{Binding Source={x:Reference email},
                                            Path=Text.Length}"
                                  Value="0" />
                <BindingCondition Binding="{Binding Source={x:Reference phone},
                                            Path=Text.Length}"
                                  Value="0" />
            </MultiTrigger.Conditions>
            <Setter Property="IsEnabled" Value="False" />
            <!-- multiple Setter elements are allowed -->
        </MultiTrigger>
    </Button.Triggers>
</Button>

En outre, la MultiTrigger.Conditions collection peut également contenir des PropertyCondition objets :

<PropertyCondition Property="Text"
                   Value="OK" />

EnterActions et ExitActions

Une autre approche de l’implémentation des modifications lorsqu’un déclencheur se produit consiste à spécifier EnterActions et ExitActions à créer des implémentations TriggerAction<T> .

La EnterActions collection, de type IList<TriggerAction>, définit une collection qui sera appelée lorsque la condition de déclencheur est remplie. La ExitActions collection, de type IList<TriggerAction>, définit une collection qui sera appelée une fois que la condition de déclencheur n’est plus remplie.

Remarque

Les objets TriggerAction définis dans les collections EnterActions et ExitActions sont ignorés par la classe EventTrigger.

L’exemple suivant montre un déclencheur de propriété qui spécifie un et un EnterActionExitAction:

<Entry Placeholder="Enter job title">
    <Entry.Triggers>
        <Trigger TargetType="Entry"
                 Property="Entry.IsFocused"
                 Value="True">
            <Trigger.EnterActions>
                <local:FadeTriggerAction StartsFrom="0" />
            </Trigger.EnterActions>

            <Trigger.ExitActions>
                <local:FadeTriggerAction StartsFrom="1" />
            </Trigger.ExitActions>
        </Trigger>
    </Entry.Triggers>
</Entry>

Une implémentation d’action de déclencheur doit :

  • Implémenter la classe générique TriggerAction<T>, avec le paramètre générique correspondant au type de contrôle auquel le déclencheur doit être appliqué. Vous pouvez utiliser des classes telles que VisualElement l’écriture d’actions de déclencheur qui fonctionnent avec divers contrôles, ou spécifier un type de contrôle comme Entry.
  • Remplacez la méthode Invoke . Cette méthode est appelée chaque fois que l’événement de déclencheur se produit.
  • Vous pouvez éventuellement exposer des propriétés qui peuvent être définies en XAML lorsque le déclencheur est déclaré.

L’exemple suivant montre la FadeTriggerAction classe :

public class FadeTriggerAction : TriggerAction<VisualElement>
{
    public int StartsFrom { get; set; }

    protected override void Invoke(VisualElement sender)
    {
        sender.Animate("FadeTriggerAction", new Animation((d) =>
        {
            var val = StartsFrom == 1 ? d : 1 - d;
            sender.BackgroundColor = Color.FromRgb(1, val, 1);
        }),
        length: 1000, // milliseconds
        easing: Easing.Linear);
    }
}

Remarque

Vous pouvez fournir et ExitActions aussi bien que Setter des EnterActions objets dans un déclencheur, mais sachez que les Setter objets sont appelés immédiatement (ils n’attendent pas la EnterAction fin ou ExitAction sont terminés).

Déclencheurs d’état

Les déclencheurs d’état sont un groupe spécialisé de déclencheurs qui définissent les conditions dans lesquelles un VisualState doit être appliqué.

Les déclencheurs d’état sont ajoutés à la collection StateTriggers d’un VisualState. Cette collection peut contenir un seul ou plusieurs déclencheurs d’état. Un VisualState est appliqué lorsqu’un déclencheur d’état de la collection est actif.

Lorsque vous utilisez des déclencheurs d’état pour contrôler les états visuels, .NET MAUI utilise les règles de précédence suivantes pour déterminer quel déclencheur (et correspondant VisualState) sera actif :

  1. Tout déclencheur dérivé de StateTriggerBase.
  2. Un AdaptiveTrigger activé en raison de la satisfaction de la condition MinWindowWidth.
  3. Un AdaptiveTrigger activé en raison de la satisfaction de la condition MinWindowHeight.

Si plusieurs déclencheurs sont actifs simultanément (par exemple, deux déclencheurs personnalisés), le premier déclencheur déclaré dans le balisage est prioritaire.

Remarque

Les déclencheurs d’état peuvent être définis dans un Style, ou directement sur des éléments.

Pour plus d’informations sur les états visuels, consultez États visuels.

Déclencheur d’état

La classe StateTrigger, qui dérive de la classe StateTriggerBase, a une propriété IsActive pouvant être liée. Un StateTrigger déclenche une modification VisualState lorsque la propriété IsActive change de valeur.

La classe StateTriggerBase, qui est la classe de base pour tous les déclencheurs d’état, a une propriété IsActive et un événement IsActiveChanged. Cet événement se déclenche chaque fois qu’une modification VisualState se produit. En outre, la StateTriggerBase classe a des méthodes substituablesOnAttached.OnDetached

Important

La propriété pouvant être liée StateTrigger.IsActive masque la propriété StateTriggerBase.IsActive héritée.

L’exemple XAML suivant montre un Style qui inclut des objets StateTrigger :

<Style TargetType="Grid">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup>
                <VisualState x:Name="Checked">
                    <VisualState.StateTriggers>
                        <StateTrigger IsActive="{Binding IsToggled}"
                                      IsActiveChanged="OnCheckedStateIsActiveChanged" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor"
                                Value="Black" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Unchecked">
                    <VisualState.StateTriggers>
                        <StateTrigger IsActive="{Binding IsToggled, Converter={StaticResource inverseBooleanConverter}}"
                                      IsActiveChanged="OnUncheckedStateIsActiveChanged" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor"
                                Value="White" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

Dans cet exemple, le Style implicite cible des objets Grid. Lorsque la propriété IsToggled de l’objet lié est true, la couleur d’arrière-plan de Grid est définie sur noir. Lorsque la propriété IsToggled de l’objet lié devient false, une modification VisualState est déclenchée et la couleur d’arrière-plan de Grid devient blanche.

En outre, chaque fois qu’une VisualState modification se produit, l’événement IsActiveChanged pour celui-ci VisualState est déclenché. Chaque VisualState inscrit un gestionnaire d'événements pour cet événement :

void OnCheckedStateIsActiveChanged(object sender, EventArgs e)
{
    StateTriggerBase stateTrigger = sender as StateTriggerBase;
    Console.WriteLine($"Checked state active: {stateTrigger.IsActive}");
}

void OnUncheckedStateIsActiveChanged(object sender, EventArgs e)
{
    StateTriggerBase stateTrigger = sender as StateTriggerBase;
    Console.WriteLine($"Unchecked state active: {stateTrigger.IsActive}");
}

Dans cet exemple, lorsqu’un gestionnaire pour l’événement IsActiveChanged est déclenché, le gestionnaire génère si celui-ci VisualState est actif ou non. Par exemple, les messages suivants sont créés en sortie dans la fenêtre de la console lors du passage de l’état visuel Checked à l’état visuel Unchecked :

Checked state active: False
Unchecked state active: True

Remarque

Les déclencheurs d’état personnalisés peuvent être créés en dérivant de la StateTriggerBase classe, et en remplaçant les méthodes et OnDetached les OnAttached méthodes pour effectuer les inscriptions requises et les propre up.

Déclencheur adaptatif

Un AdaptiveTrigger déclenche une modification VisualState quand la hauteur ou la largeur d’une fenêtre est égale à une valeur spécifiée. Ce déclencheur a deux propriétés pouvant être liées :

Remarque

AdaptiveTrigger dérive de la classe StateTriggerBase et peut donc attacher un gestionnaire d’événements à l’événement IsActiveChanged.

L’exemple XAML suivant montre un Style qui inclut des objets AdaptiveTrigger :

<Style TargetType="StackLayout">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup>
                <VisualState x:Name="Vertical">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="Orientation"
                                Value="Vertical" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Horizontal">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="800" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="Orientation"
                                Value="Horizontal" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

Dans cet exemple, le Style implicite cible des objets StackLayout. Lorsque la largeur de la fenêtre est comprise entre 0 et 800 unités indépendantes de l’appareil, les objets StackLayout auxquels Style est appliqué ont une orientation verticale. Lorsque la largeur de la fenêtre est >= 800 unités indépendantes de l’appareil, la VisualState modification est déclenchée et l’orientation StackLayout devient horizontale.

Les propriétés MinWindowHeight et MinWindowWidth peuvent être utilisées indépendamment ou conjointement. Le code XAML suivant montre un exemple de la définition des deux propriétés :

<AdaptiveTrigger MinWindowWidth="800"
                 MinWindowHeight="1200"/>

Dans cet exemple, indique AdaptiveTrigger que le correspondant VisualState sera appliqué lorsque la largeur de la fenêtre actuelle est >= 800 unités indépendantes de l’appareil et que la hauteur de la fenêtre actuelle est >= 1200 unités indépendantes de l’appareil.

Comparer un déclencheur d’état

Le CompareStateTrigger déclenche une modification VisualState quand une propriété est égale à une valeur spécifique. Ce déclencheur a deux propriétés pouvant être liées :

  • Property, de type object, qui indique la propriété comparée par le déclencheur.
  • Value, de type object, qui indique la valeur à laquelle VisualState doit être appliqué.

Remarque

CompareStateTrigger dérive de la classe StateTriggerBase et peut donc attacher un gestionnaire d’événements à l’événement IsActiveChanged.

L’exemple XAML suivant montre un Style qui inclut des objets CompareStateTrigger :

<Style TargetType="Grid">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup>
                <VisualState x:Name="Checked">
                    <VisualState.StateTriggers>
                        <CompareStateTrigger Property="{Binding Source={x:Reference checkBox}, Path=IsChecked}"
                                             Value="True" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor"
                                Value="Black" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Unchecked">
                    <VisualState.StateTriggers>
                        <CompareStateTrigger Property="{Binding Source={x:Reference checkBox}, Path=IsChecked}"
                                             Value="False" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor"
                                Value="White" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>
...
<Grid>
    <Frame BackgroundColor="White"
           CornerRadius="12"
           Margin="24"
           HorizontalOptions="Center"
           VerticalOptions="Center">
        <StackLayout Orientation="Horizontal">
            <CheckBox x:Name="checkBox"
                      VerticalOptions="Center" />
            <Label Text="Check the CheckBox to modify the Grid background color."
                   VerticalOptions="Center" />
        </StackLayout>
    </Frame>
</Grid>

Dans cet exemple, le Style implicite cible des objets Grid. Lorsque la propriété IsChecked de CheckBox est false, la couleur d’arrière-plan de Grid est définie sur blanc. Lorsque la CheckBox.IsChecked propriété devient true, une VisualState modification est déclenchée et la couleur d’arrière-plan de la propriété Grid devient noire.

Déclencheur d’état d’appareil

DeviceStateTrigger déclenche une modification VisualState en fonction de la plateforme d’appareil sur laquelle l’application s’exécute. Ce déclencheur a une seule propriété pouvant être liée :

  • Device, de type string, qui indique la plateforme d’appareil sur laquelle VisualState doit être appliqué.

Remarque

DeviceStateTrigger dérive de la classe StateTriggerBase et peut donc attacher un gestionnaire d’événements à l’événement IsActiveChanged.

L’exemple XAML suivant montre un Style qui inclut des objets DeviceStateTrigger :

<Style x:Key="DeviceStateTriggerPageStyle"
       TargetType="ContentPage">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup>
                <VisualState x:Name="iOS">
                    <VisualState.StateTriggers>
                        <DeviceStateTrigger Device="iOS" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor"
                                Value="Silver" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Android">
                    <VisualState.StateTriggers>
                        <DeviceStateTrigger Device="Android" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor"
                                Value="#2196F3" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

Dans cet exemple, le Style explicite cible des objets ContentPage. ContentPage les objets qui consomment le style définissent leur couleur d’arrière-plan sur argent sur iOS et sur bleu pâle sur Android.

Déclencheur d’état d’orientation

OrientationStateTrigger déclenche une modification VisualState lorsque l’orientation de l’appareil change. Ce déclencheur a une seule propriété pouvant être liée :

Remarque

OrientationStateTrigger dérive de la classe StateTriggerBase et peut donc attacher un gestionnaire d’événements à l’événement IsActiveChanged.

L’exemple XAML suivant montre un Style qui inclut des objets OrientationStateTrigger :

<Style x:Key="OrientationStateTriggerPageStyle"
       TargetType="ContentPage">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup>
                <VisualState x:Name="Portrait">
                    <VisualState.StateTriggers>
                        <OrientationStateTrigger Orientation="Portrait" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor"
                                Value="Silver" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Landscape">
                    <VisualState.StateTriggers>
                        <OrientationStateTrigger Orientation="Landscape" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor"
                                Value="White" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

Dans cet exemple, le Style explicite cible des objets ContentPage. Les objets ContentPage qui consomment le style définissent leur couleur d’arrière-plan sur argent lorsque l’orientation est de type portrait, et définissent leur couleur d’arrière-plan sur blanc lorsque l’orientation est de type paysage.