Partager via

Mode de liaison

  • Article

Browse sample. Parcourir l’exemple

Chaque propriété pouvant être liée à l’interface utilisateur de l’application multiplateforme .NET (.NET MAUI) a un mode de liaison par défaut défini lorsque la propriété pouvant être liée est créée et disponible à partir de la DefaultBindingMode propriété de l’objet BindableProperty . Ce mode de liaison par défaut indique le mode en vigueur lorsque cette propriété est une cible de liaison de données. Le mode de liaison par défaut pour la plupart des propriétés, telles que Rotation, Scale et Opacity, est OneWay. Lorsque ces propriétés sont des cibles de liaison de données, la propriété cible est définie à partir de la source.

L’exemple suivant montre une liaison de données définie sur un Slider:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DataBindingDemos.ReverseBindingPage"
             Title="Reverse Binding">
    <StackLayout Padding="10, 0">
        <Label x:Name="label"
               Text="TEXT"
               FontSize="80"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
        <Slider x:Name="slider"
                VerticalOptions="Center"
                Value="{Binding Source={x:Reference label},
                                Path=Opacity}" />
    </StackLayout>
</ContentPage>

Dans cet exemple, il Label s’agit de la source de liaison de données et de Slider la cible. La liaison référence la propriété Opacity du Label, qui a une valeur par défaut de 1. Par conséquent, la Slider valeur 1 est initialisée à partir de la valeur initiale Opacity de Label. Ceci est illustré dans la capture d’écran suivante :

Reverse binding.

En outre, le Slider travail continue. Cela est dû au fait que le mode de liaison par défaut de la Value propriété est SliderTwoWay. Cela signifie que lorsque la Value propriété est une cible de liaison de données, la cible est définie à partir de la source, mais la source est également définie à partir de la cible. Cela permet d’être Slider défini à partir de la valeur initiale Opacity .

Remarque

Les propriétés pouvant être liées ne signalent pas de modification de propriété, sauf si la propriété change réellement. Cela empêche une boucle infinie.

Si le mode de liaison par défaut sur la propriété cible n’est pas adapté à une liaison de données particulière, il est possible de le remplacer en définissant la Mode propriété (ou la Mode propriété de Binding l’extension Binding de balisage) sur l’un des membres de l’énumération BindingMode :

  • Default
  • TwoWay — les données vont de l’une à l’autre entre la source et la cible
  • OneWay — les données vont de la source à la cible
  • OneWayToSource — les données vont de la cible à la source
  • OneTime — les données vont de la source à la cible, mais uniquement lorsque les BindingContext modifications

Liaisons bidirectionnelle

La plupart des propriétés pouvant être liées ont un mode de liaison par défaut, OneWay mais certaines propriétés ont un mode de TwoWayliaison par défaut, y compris les éléments suivants :

Ces propriétés sont définies comme TwoWay étant donné que lorsque des liaisons de données sont utilisées avec le modèle Model-View-ViewModel (MVVM), la classe viewmodel est la source de liaison de données et la vue, qui se compose de vues telles que Slider, sont des cibles de liaison de données. Les liaisons MVVM ressemblent à l’exemple ci-dessus, car il est probable que chaque affichage de la page soit initialisé avec la valeur de la propriété correspondante dans le viewmodel, mais que les modifications apportées à la vue doivent également affecter la propriété viewmodel.

Liaisons unidirectionnelle vers source

Les propriétés pouvant être liées en lecture seule disposent du mode de liaison par défaut OneWayToSource. Par exemple, la SelectedItem propriété d’un ListView mode de liaison par défaut est .OneWayToSource Cela est dû au fait qu’une liaison sur la SelectedItem propriété doit entraîner la définition de la source de liaison.

Liaisons ponctuelles

Les propriétés cibles disposant du mode de liaison OneTime sont mises à jour uniquement lorsque le contexte de liaison change. Pour les liaisons sur ces propriétés cibles, cela simplifie l’infrastructure de liaison, car il n’est pas nécessaire de surveiller les modifications des propriétés sources.

Plusieurs propriétés ont le mode de liaison par défaut OneTime, y compris la propriété IsTextPredictionEnabled de Entry.

Notifications viewmodels et modifications de propriété

Lorsque vous utilisez un viewmodel dans une liaison de données, le viewmodel est la source de liaison de données. Le viewmodel ne définit pas de propriétés pouvant être liées, mais il implémente un mécanisme de notification qui permet à l’infrastructure de liaison d’être averti lorsque la valeur d’une propriété change. Ce mécanisme de notification est l’interface INotifyPropertyChanged qui définit un événement unique nommé PropertyChanged. Une classe qui implémente cette interface déclenche généralement l’événement quand l’une de ses propriétés publiques change de valeur. L’événement n’a pas besoin d’être déclenché si la propriété ne change jamais. L’interface INotifyPropertyChanged est également implémentée et BindableObject un PropertyChanged événement est déclenché chaque fois qu’une propriété pouvant être liée change de valeur.

Dans l’exemple suivant, les liaisons de données vous permettent de sélectionner une couleur à l’aide de trois Slider éléments pour la teinte, la saturation et la luminosité :

public class HslColorViewModel : INotifyPropertyChanged
{
    Color color;
    string name;
    float hue;
    float saturation;
    float luminosity;

    public event PropertyChangedEventHandler PropertyChanged;

    public float Hue
    {
        get
        {
            return hue;
        }
        set
        {
            if (hue != value)
            {
                Color = Color.FromHsla(value, saturation, luminosity);
            }
        }
    }

    public float Saturation
    {
        get
        {
            return saturation;
        }
        set
        {
            if (saturation != value)
            {
                Color = Color.FromHsla(hue, value, luminosity);
            }
        }        
    }

    public float Luminosity
    {
        get
        {
            return luminosity;
        }
        set
        {
            if (luminosity != value)
            {
                Color = Color.FromHsla(hue, saturation, value);
            }
        }
    }

    public Color Color
    {
        get
        {
            return color;
        }
        set
        {
            if (color != value)
            {
                color = value;
                hue = color.GetHue();
                saturation = color.GetSaturation();
                luminosity = color.GetLuminosity();
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Hue"));
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Saturation"));
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Luminosity"));
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Color"));

                Name = NamedColor.GetNearestColorName(color);
            }
        }
    }

    public string Name
    {
        get
        {
            return name;
        }
        private set
        {
            if (name != value)
            {
                name = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Name"));
            }
        }
    }
}

Dans cet exemple, la HslColorViewModel classe définit Hue, , LuminositySaturation, Coloret Name les propriétés. Lorsque l’un des trois composants de couleur change de valeur, la Color propriété est recalculée et PropertyChanged les événements sont déclenchés pour les quatre propriétés. Lorsque la Color propriété change, la méthode statique GetNearestColorName de la NamedColor classe obtient la couleur nommée la plus proche et définit la Name propriété.

Lorsqu’un viewmodel est défini en tant que source de liaison, l’infrastructure de liaison attache un gestionnaire à l’événement PropertyChanged . De cette façon, la liaison peut être avertie des modifications apportées aux propriétés, puis définir les propriétés cibles à partir des valeurs modifiées. Toutefois, lorsqu’une propriété cible (ou la définition Binding sur une propriété cible) a le BindingModeOneTime, l’infrastructure de liaison n’est pas tenue d’attacher un gestionnaire sur l’événement PropertyChanged. La propriété cible est mise à jour uniquement lorsque le BindingContext change et non pas lorsque la propriété source proprement dite change.

Le code XAML suivant utilise les HslColorViewModeléléments suivants :

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:DataBindingDemos"
             x:Class="DataBindingDemos.SimpleColorSelectorPage">
    <ContentPage.BindingContext>
        <local:HslColorViewModel Color="MediumTurquoise" />
    </ContentPage.BindingContext>

    <ContentPage.Resources>
        <Style TargetType="Slider">
            <Setter Property="VerticalOptions" Value="CenterAndExpand" />
        </Style>
    </ContentPage.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <BoxView Color="{Binding Color}"
                 Grid.Row="0" />
        <StackLayout Grid.Row="1"
                     Margin="10, 0">
            <Label Text="{Binding Name}"
                   HorizontalTextAlignment="Center" />
            <Slider Value="{Binding Hue}" />
            <Slider Value="{Binding Saturation}" />
            <Slider Value="{Binding Luminosity}" />
        </StackLayout>
    </Grid>
</ContentPage>

Dans cet exemple, l’instanciation HslColorViewModel est instanciée, et Color la propriété définie, et définie en tant que page.BindingContext BoxView, Label et les trois vues Slider héritent du contexte de liaison de l’objet ContentPage. Ces vues sont toutes les cibles de liaison qui référencent les propriétés sources dans le viewmodel. Pour la Color propriété du BoxView, et la Text propriété du , les liaisons de Labeldonnées sont OneWay : les propriétés de la vue sont définies à partir des propriétés dans le viewmodel. Toutefois, la Value propriété de l’objet Sliderutilise un TwoWay mode de liaison. Cela permet à chacun Slider d’être défini à partir du viewmodel, et également pour que le viewmodel soit défini à partir de chaque Slider.

Lorsque l’exemple est exécuté pour la première fois, les BoxViewéléments , Labelet trois Slider éléments sont tous définis à partir du viewmodel en fonction de la propriété initiale Color définie lorsque le viewmodel a été instancié :

Simple color selector.

Lorsque vous manipulez les curseurs, les BoxView curseurs sont Label mis à jour en conséquence.

Substitution du mode de liaison

Le mode de liaison d’une propriété cible peut être substitué en définissant la propriété (Bindingou la Mode propriété de l’extension Binding de balisage) sur l’un des membres de l’énumérationBindingMode.Mode

Toutefois, la définition de la Mode propriété ne produit pas toujours le résultat attendu. Par exemple, dans l’exemple suivant, la définition de la Mode propriété TwoWay ne fonctionne pas comme prévu :

<Label Text="TEXT"
       FontSize="40"
       HorizontalOptions="Center"
       VerticalOptions="CenterAndExpand"
       Scale="{Binding Source={x:Reference slider},
                       Path=Value,
                       Mode=TwoWay}" />

Dans cet exemple, il peut être prévu que la Slider valeur initiale de la Scale propriété soit initialisée, qui est 1, mais cela ne se produit pas. Lorsqu’une liaison TwoWay est initialisée, la cible est tout d’abord définie à partir de la source, ce qui signifie que la propriété Scale est définie sur la valeur par défaut 0 de Slider. Lorsque la liaison TwoWay est définie sur l’élément Slider, l’élément Slider est initialement défini à partir de la source.

Vous pouvez également définir le mode de liaison sur OneWayToSource:

<Label Text="TEXT"
       FontSize="40"
       HorizontalOptions="Center"
       VerticalOptions="CenterAndExpand"
       Scale="{Binding Source={x:Reference slider},
                       Path=Value,
                       Mode=OneWayToSource}" />

À présent, l’initialisation Slider est définie sur 1 (valeur par défaut) Scalemais la manipulation de la Slider propriété n’affecte pas la Scale propriété.

Remarque

La classe VisualElement définit également les propriétés ScaleX et ScaleY, qui peuvent redimensionner l’élément VisualElement dans les directions horizontale et verticale.

Une application très utile de substitution du mode de liaison par défaut avec un TwoWay mode de liaison implique la SelectedItem propriété de ListView. Le mode de liaison par défaut est OneWayToSource. Lorsqu’une liaison de données est définie sur la SelectedItem propriété pour référencer une propriété source dans un viewmodel, cette propriété source est définie à partir de la ListView sélection. Toutefois, dans certaines circonstances, vous pouvez également souhaiter ListView l’initialisation à partir du viewmodel.

Important

Le mode de liaison par défaut peut varier du contrôle au contrôle et est défini lorsque la propriété pouvant être liée est créée. Il est disponible à partir de la DefaultBindingMode propriété de l’objet BindableProperty .