Liaisons de base

Article
10/07/2024

Parcourez l’exemple. Parcourir l'exemple

Une liaison de données .NET Multi-Platform App UI lie une paire de propriétés entre deux objets, dont au moins un est généralement un objet interface utilisateur. Ces deux objets sont appelés la cible et la source :

La cible est l’objet (et la propriété) sur lequel la liaison de données est définie.
La source est l’objet (et la propriété) référencé par la liaison de données.

Dans le cas le plus simple, les données circulent de la source vers la cible, ce qui signifie que la valeur de la propriété cible est définie à partir de la valeur de la propriété source. Toutefois, dans certains cas, les données peuvent également circuler de la cible vers la source ou dans les deux sens.

Important

La cible est toujours l’objet sur lequel la liaison de données est définie, même si elle fournit des données au lieu d’en recevoir.

Liaisons avec un contexte de liaison

Considérez l’exemple XAML suivant, dont l’intention est de faire pivoter un Label en manipulant un Slider :

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DataBindingDemos.BasicCodeBindingPage"
             Title="Basic Code Binding">
    <StackLayout Padding="10, 0">
        <Label x:Name="label"
               Text="TEXT"
               FontSize="48"
               HorizontalOptions="Center"
               VerticalOptions="Center" />

        <Slider x:Name="slider"
                Maximum="360"
                VerticalOptions="Center" />
    </StackLayout>
</ContentPage>

Sans liaisons de données, vous devez définir l’événement ValueChanged de l’élément Slider sur un gestionnaire d’événements qui accède à la propriété Value de l’élément Slider et définit cette valeur sur la propriété Rotation de l’objet Label. La liaison de données automatise cette tâche ; le gestionnaire d’événements et le code qu’elle contient ne sont plus nécessaires.

Vous pouvez définir une liaison sur une instance de n’importe quelle classe qui dérive de BindableObject et qui inclut les dérivés Element, VisualElement, View et View. La liaison est toujours définie sur l’objet cible. La liaison fait référence à l’objet source. Pour définir la liaison de données, utilisez les deux membres suivants de la classe cible :

La propriété BindingContext spécifie l’objet source.
La méthode SetBinding spécifie la propriété cible et la propriété source.

Dans cet exemple, l’objet Label est la cible de la liaison et l’élément Slider en est la source. Des modifications dans l’élément Slider source affectent la rotation de l’objet Label cible. Les données circulent de la source vers la cible.

La méthode SetBinding définie par BindableObject a un argument de type BindingBase à partir duquel la classe Binding dérive, mais d’autres méthodes SetBinding sont définies par la classe BindableObjectExtensions. Le code-behind pour le XAML utilise une méthode d’extension SetBinding plus simple de la classe BindableObjectExtensions :

public partial class BasicCodeBindingPage : ContentPage
{
    public BasicCodeBindingPage()
    {
        InitializeComponent();

        label.BindingContext = slider;
        label.SetBinding(Label.RotationProperty, "Value");
    }
}

L’objet Label est la cible de la liaison et constitue donc l’objet sur lequel cette propriété est définie et sur lequel la méthode est appelée. La propriété BindingContext indique la source de la liaison, à savoir l’élément Slider. La méthode SetBinding est appelée sur la cible de la liaison, mais spécifie la propriété cible et la propriété source. La propriété cible est spécifiée en tant qu’objet BindableProperty : Label.RotationProperty. La propriété source est spécifiée en tant que chaîne et indique la propriété Value de l’élément Slider.

Important

La propriété cible doit reposer sur une propriété pouvant être liée. L’objet cible doit donc être une instance d’une classe qui dérive de BindableObject. Pour plus d’informations, consultez Propriétés liables.

La propriété source est spécifiée sous forme de chaîne. En interne, la réflexion est utilisée pour accéder à la propriété réelle. Dans ce cas particulier, toutefois, la propriété Value repose également sur une propriété pouvant être liée.

Lorsque vous manipulez l’objet Slider, l’objet Label pivote en conséquence :

Liaison de code de base.

Vous pouvez également spécifier la liaison de données dans XAML :

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

        <Slider x:Name="slider"
                Maximum="360"
                VerticalOptions="Center" />
    </StackLayout>
</ContentPage>

Comme dans le code, la liaison de données est définie sur l’objet cible, qui est l’objet Label. Deux extensions de balisage XAML sont utilisées pour définir la liaison de données :

L’extension de balisage x:Reference est nécessaire pour référencer l’objet source, qui est l’objet Slider nommé slider.
L’extension de balisage Binding lie la propriété Rotation de l’objet Label à la propriété Value de l’élément Slider.

Pour plus d’informations sur les extensions de balisage XAML, consultez Utiliser des extensions de balisage XAML.

Remarque

La propriété source est spécifiée avec la propriété Path de l’extension de balisage Binding, qui correspond à la propriété Path de la classe Binding.

Les extensions de balisage XAML telles que x:Reference et Binding peuvent avoir des attributs de propriété de contenu définis, ce qui signifie pour des extensions de balisage XAML que le nom de propriété n’a pas besoin d’apparaître. La propriété Name est la propriété de contenu de x:Reference et la propriété Path est la propriété de contenu de Binding, ce qui signifie que vous pouvez les éliminer des expressions :

<Label Text="TEXT"
       FontSize="80"
       HorizontalOptions="Center"
       VerticalOptions="Center"
       BindingContext="{x:Reference slider}"
       Rotation="{Binding Value}" />

Important

Les performances de liaison peuvent être améliorées à l’aide de liaisons compilées. Pour plus d’informations, consultez Liaisons compilées.

Liaisons sans contexte de liaison.

La propriété BindingContext est un composant important des liaisons de données, mais elle n’est pas toujours nécessaire. L’objet source peut être spécifié à la place dans l’appel SetBinding ou dans l’extension de balisage Binding.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DataBindingDemos.AlternativeCodeBindingPage"
             Title="Alternative Code Binding">
    <StackLayout Padding="10, 0">
        <Label x:Name="label"
               Text="TEXT"
               FontSize="40"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />

        <Slider x:Name="slider"
                Minimum="-2"
                Maximum="2"
                VerticalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage>

Dans cet exemple, le Slider est défini pour contrôler la propriété Scale du Label. Pour cette raison, le Slider est défini pour une plage allant de -2 à 2.

Le fichier code-behind définit la liaison avec la méthode SetBinding, le deuxième argument étant un constructeur pour la classe Binding :

public partial class AlternativeCodeBindingPage : ContentPage
{
    public AlternativeCodeBindingPage()
    {
        InitializeComponent();

        label.SetBinding(Label.ScaleProperty, new Binding("Value", source: slider));
    }
}

Le constructeur Binding possède 6 paramètres, si bien que le paramètre source est spécifié avec un argument nommé. L’argument est l’élément slider.

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.

Vous pouvez également spécifier la liaison de données dans XAML :

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DataBindingDemos.AlternativeXamlBindingPage"
             Title="Alternative XAML Binding">
    <StackLayout Padding="10, 0">
        <Label Text="TEXT"
               FontSize="40"
               HorizontalOptions="Center"
               VerticalOptions="Center"
               Scale="{Binding Source={x:Reference slider},
                               Path=Value}" />

        <Slider x:Name="slider"
                Minimum="-2"
                Maximum="2"
                VerticalOptions="Center" />
    </StackLayout>
</ContentPage>

Dans cet exemple, l’extension de balisage Binding a deux propriétés définies, Source et Path, séparées par une virgule. La propriété Source est définie sur une extension de balisage x:Reference qui possède autrement la même syntaxe que la définition de BindingContext.

La propriété de contenu de l’extension de balisage Binding est Path, mais la partie Path= de l’extension de balisage peut être éliminée seulement s’il s’agit de la première propriété dans l’expression. Pour éliminer la partie Path=, vous devez échanger les deux propriétés :

Scale="{Binding Value, Source={x:Reference slider}}" />

Bien que les extensions de balisage XAML soient généralement délimitées par des accolades, elles peuvent également être exprimées en tant qu’éléments objets :

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

Dans cet exemple, les propriétés Source et Path sont des attributs XAML réguliers. Les valeurs apparaissent entre guillemets et les attributs ne sont pas séparés par une virgule. L’extension de balisage x:Reference peut également devenir un élément objet :

<Label Text="TEXT"
       FontSize="40"
       HorizontalOptions="Center"
       VerticalOptions="Center">
    <Label.Scale>
        <Binding Path="Value">
            <Binding.Source>
                <x:Reference Name="slider" />
            </Binding.Source>
        </Binding>
    </Label.Scale>
</Label>

Cette syntaxe n’est pas courante, mais elle est parfois nécessaire lorsque des objets complexes sont impliqués.

Les exemples présentés jusqu'à présent définissent la propriété BindingContext et la propriété Source de Binding sur une extension de balisage x:Reference pour référencer une autre vue dans la page. Ces deux propriétés sont de type Object et elles peuvent être définies sur n’importe quel objet incluant des propriétés qui conviennent pour des sources de liaison. Vous pouvez également définir la propriété BindingContext ou Source sur une extension de balisage x:Static pour référencer la valeur d’un champ ou d’une propriété statique, ou une extension de balisage StaticResource pour référencer un objet stocké dans un dictionnaire de ressources, ou directement sur un objet, qui est souvent une instance d’une vue modèle.

Remarque

La propriété BindingContext peut également être définie sur un objet Binding, afin que les propriétés Source et Path de Binding définissent le contexte de liaison.

Héritage du contexte de liaison

Vous pouvez spécifier l’objet source à l’aide de la propriété BindingContext ou de la propriété Source de l’objet Binding. Si les deux sont définis, la propriété Source de Binding est prioritaire sur BindingContext.

Important

La valeur de propriété BindingContext est héritée via l’arborescence d’éléments visuels.

L’exemple XAML suivant illustre l’héritage du contexte de liaison :

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DataBindingDemos.BindingContextInheritancePage"
             Title="BindingContext Inheritance">
    <StackLayout Padding="10">
        <StackLayout VerticalOptions="Fill"
                     BindingContext="{x:Reference slider}">

            <Label Text="TEXT"
                   FontSize="80"
                   HorizontalOptions="Center"
                   VerticalOptions="End"
                   Rotation="{Binding Value}" />

            <BoxView Color="#800000FF"
                     WidthRequest="180"
                     HeightRequest="40"
                     HorizontalOptions="Center"
                     VerticalOptions="Start"
                     Rotation="{Binding Value}" />
        </StackLayout>

        <Slider x:Name="slider"
                Maximum="360" />
    </StackLayout>
</ContentPage>

Dans cet exemple, la propriété BindingContext du StackLayout est définie sur l’objet slider. Ce contexte de liaison est hérité par les deux objets Label et BoxView, qui ont tous les deux leur propriété Rotation définie sur la propriété Value de l’élément Slider :

Héritage du contexte de liaison.

Partager via

Liaisons de base

Liaisons avec un contexte de liaison

Liaisons sans contexte de liaison.

Héritage du contexte de liaison

Ressources supplémentaires