Partager via

Xamarin.Forms Liaisons relatives

  • Article

Les liaisons relatives permettent de définir la source de liaison par rapport à la position de la cible de liaison. Elles sont créées avec l’extension de RelativeSource balisage et définies comme propriété Source d’une expression de liaison.

L’extension de balisage RelativeSource est prise en charge par la classe RelativeSourceExtension, qui définit les propriétés suivantes :

  • Mode, de type RelativeBindingSourceMode, décrit l’emplacement de la source de liaison par rapport à la position de la cible de liaison.
  • AncestorLevel, de type int, un niveau ancêtre facultatif à rechercher, lorsque la Mode propriété est FindAncestor. Un AncestorLevel des n instances ignore n-1 les instances du AncestorType.
  • AncestorType, de type Type, le type d’ancêtre à rechercher, lorsque la Mode propriété est FindAncestor.

Remarque

L’analyseur XAML permet à la classe RelativeSourceExtension d’être abrégée en tant que RelativeSource.

La Mode propriété doit être définie sur l’un RelativeBindingSourceMode des membres d’énumération :

  • TemplatedParent indique l’élément auquel le modèle, dans lequel l’élément lié existe, est appliqué. Pour plus d’informations, consultez Lier à un parent modèle.
  • Self indique l’élément sur lequel la liaison est définie, ce qui vous permet de lier une propriété de cet élément à une autre propriété sur le même élément. Pour plus d’informations, consultez Lier à soi.
  • FindAncestor indique l’ancêtre dans l’arborescence visuelle de l’élément lié. Ce mode doit être utilisé pour établir une liaison à un contrôle ancêtre représenté par la AncestorType propriété. Pour plus d’informations, consultez Lier à un ancêtre.
  • FindAncestorBindingContext indique l’ancêtre BindingContext dans l’arborescence visuelle de l’élément lié. Ce mode doit être utilisé pour établir une liaison à l’ancêtre BindingContext représenté par la AncestorType propriété. Pour plus d’informations, consultez Lier à un ancêtre.

La Mode propriété est la propriété de contenu de la RelativeSourceExtension classe. Par conséquent, pour les expressions de balisage XAML exprimées avec accolades, vous pouvez éliminer la Mode= partie de l’expression.

Pour plus d’informations sur les Xamarin.Forms extensions de balisage, consultez Extensions de balisage XAML.

Lier à l’auto

Le Self mode de liaison relative est utilisé pour lier une propriété d’un élément à une autre propriété sur le même élément :

<BoxView Color="Red"
         WidthRequest="200"
         HeightRequest="{Binding Source={RelativeSource Self}, Path=WidthRequest}"
         HorizontalOptions="Center" />

Dans cet exemple, la BoxView propriété définit sa WidthRequest propriété sur une taille fixe et la HeightRequest propriété est liée à la WidthRequest propriété. Par conséquent, les deux propriétés sont égales et un carré est dessiné :

Capture d’écran d’une liaison relative en mode Self, sur iOS et Android

Important

Lors de la liaison d’une propriété d’un élément à une autre propriété sur le même élément, les propriétés doivent être du même type. Vous pouvez également spécifier un convertisseur sur la liaison pour convertir la valeur.

Un usage courant de ce mode de liaison est défini sur une propriété d’un BindingContext objet lui-même. Le code suivant en est un exemple :

<ContentPage ...
             BindingContext="{Binding Source={RelativeSource Self}, Path=DefaultViewModel}">
    <StackLayout>
        <ListView ItemsSource="{Binding Employees}">
            ...
        </ListView>
    </StackLayout>
</ContentPage>

Dans cet exemple, la BindingContext page est définie sur la DefaultViewModel propriété de lui-même. Cette propriété est définie dans le fichier code-behind de la page et fournit une instance viewmodel. L’objet ListView lie à la Employees propriété du viewmodel.

Lier à un ancêtre

FindAncestorBindingContext Les FindAncestor modes de liaison relatifs sont utilisés pour lier des éléments parents, d’un certain type, dans l’arborescence visuelle. Le FindAncestor mode est utilisé pour établir une liaison à un élément parent, qui dérive du Element type. Le FindAncestorBindingContext mode est utilisé pour établir une liaison à l’élément BindingContext parent.

Avertissement

La AncestorType propriété doit être définie sur une Type valeur lors de l’utilisation des modes de FindAncestor liaison relatifs, FindAncestorBindingContext sinon une XamlParseException exception est levée.

Si la Mode propriété n’est pas définie explicitement, la définition de la AncestorType propriété sur un type dérivé de Element celui-ci définit implicitement la Mode propriété FindAncestorsur . De même, la définition de la AncestorType propriété sur un type qui ne dérive pas de Element la propriété définit implicitement la Mode propriété FindAncestorBindingContextsur .

Remarque

Les liaisons relatives qui utilisent le FindAncestorBindingContext mode sont réappliquées lorsque les BindingContext ancêtres changent.

Le code XAML suivant montre un exemple où la Mode propriété sera implicitement définie sur FindAncestorBindingContext:

<ContentPage ...
             BindingContext="{Binding Source={RelativeSource Self}, Path=DefaultViewModel}">
    <StackLayout>
        <ListView ItemsSource="{Binding Employees}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Orientation="Horizontal">
                            <Label Text="{Binding Fullname}"
                                   VerticalOptions="Center" />
                            <Button Text="Delete"
                                    Command="{Binding Source={RelativeSource AncestorType={x:Type local:PeopleViewModel}}, Path=DeleteEmployeeCommand}"
                                    CommandParameter="{Binding}"
                                    HorizontalOptions="EndAndExpand" />
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

Dans cet exemple, la BindingContext page est définie sur la DefaultViewModel propriété de lui-même. Cette propriété est définie dans le fichier code-behind de la page et fournit une instance viewmodel. L’objet ListView lie à la Employees propriété du viewmodel. Le DataTemplate, qui définit l’apparence de chaque élément dans le ListView, contient un Button. La propriété du Command bouton est liée au DeleteEmployeeCommand viewmodel de son parent. Le fait d’appuyer sur un Button employé supprime :

Capture d’écran d’une liaison relative en mode FindAncestor, sur iOS et Android

En outre, la propriété facultative AncestorLevel peut aider à désambiguer la recherche des ancêtres dans les scénarios où il existe peut-être plusieurs ancêtres de ce type dans l’arborescence visuelle :

<Label Text="{Binding Source={RelativeSource AncestorType={x:Type Entry}, AncestorLevel=2}, Path=Text}" />

Dans cet exemple, la Label.Text propriété est liée à la Text propriété de la seconde Entry rencontrée sur le chemin vers le haut, en commençant à l’élément cible de la liaison.

Remarque

La AncestorLevel propriété doit être définie sur 1 pour rechercher l’ancêtre le plus proche de l’élément cible de liaison.

Lier à un parent modèle

Le TemplatedParent mode de liaison relative est utilisé pour lier à partir d’un modèle de contrôle à l’instance d’objet runtime à laquelle le modèle est appliqué (appelé parent modiné). Ce mode s’applique uniquement si la liaison relative se trouve dans un modèle de contrôle et est similaire à la définition d’un TemplateBinding.

Le code XAML suivant illustre un exemple du TemplatedParent mode de liaison relative :

<ContentPage ...>
    <ContentPage.Resources>
        <ControlTemplate x:Key="CardViewControlTemplate">
            <Frame BindingContext="{Binding Source={RelativeSource TemplatedParent}}"
                   BackgroundColor="{Binding CardColor}"
                   BorderColor="{Binding BorderColor}"
                   ...>
                <Grid>
                    ...
                    <Label Text="{Binding CardTitle}"
                           ... />
                    <BoxView BackgroundColor="{Binding BorderColor}"
                             ... />
                    <Label Text="{Binding CardDescription}"
                           ... />
                </Grid>
            </Frame>
        </ControlTemplate>
    </ContentPage.Resources>
    <StackLayout>        
        <controls:CardView BorderColor="DarkGray"
                           CardTitle="John Doe"
                           CardDescription="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elit dolor, convallis non interdum."
                           IconBackgroundColor="SlateGray"
                           IconImageSource="user.png"
                           ControlTemplate="{StaticResource CardViewControlTemplate}" />
        <controls:CardView BorderColor="DarkGray"
                           CardTitle="Jane Doe"
                           CardDescription="Phasellus eu convallis mi. In tempus augue eu dignissim fermentum. Morbi ut lacus vitae eros lacinia."
                           IconBackgroundColor="SlateGray"
                           IconImageSource="user.png"
                           ControlTemplate="{StaticResource CardViewControlTemplate}" />
        <controls:CardView BorderColor="DarkGray"
                           CardTitle="Xamarin Monkey"
                           CardDescription="Aliquam sagittis, odio lacinia fermentum dictum, mi erat scelerisque erat, quis aliquet arcu."
                           IconBackgroundColor="SlateGray"
                           IconImageSource="user.png"
                           ControlTemplate="{StaticResource CardViewControlTemplate}" />
    </StackLayout>
</ContentPage>

Dans cet exemple, l’élément Frameracine de l’objet ControlTemplateruntime a sa BindingContext valeur définie sur l’instance d’objet runtime à laquelle le modèle est appliqué. Par conséquent, les Frame enfants et les enfants résolvent leurs expressions de liaison par rapport aux propriétés de chaque CardView objet :

Capture d’écran d’une liaison relative en mode TemplatedParent, sur iOS et Android

Pour plus d’informations sur les modèles de contrôle, consultez Xamarin.Forms Modèles de contrôle.