Xamarin.Forms Liaisons relatives

  • Article

Télécharger l’exemple Télécharger l’exemple

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

L’extension RelativeSource de balisage est prise en charge par la RelativeSourceExtension classe, 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, niveau ancêtre facultatif à rechercher, lorsque la Mode propriété est FindAncestor. de AncestorLevel ignore n les n-1 instances du AncestorType.
  • AncestorType, de type Type, type d’ancêtre à rechercher, lorsque la Mode propriété est FindAncestor.

Notes

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

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

  • 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 à l’auto.
  • 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 le BindingContext de l’ancêtre dans l’arborescence visuelle de l’élément lié. Ce mode doit être utilisé pour lier au BindingContext d’un ancêtre 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 des accolades, vous pouvez éliminer la Mode= partie de l’expression.

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

Se lier à soi-même

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, le BoxView définit sa WidthRequest propriété sur une taille fixe et la HeightRequest propriété se lie à la WidthRequest propriété . Par conséquent, les deux propriétés sont égales et un carré est donc dessiné :

Capture d’écran d’une liaison relative en mode Auto, en mode de 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.

Une utilisation courante de ce mode de liaison est de définir un objet BindingContext sur une propriété sur lui-même. Le code suivant montre un exemple de ceci :

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

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

Lier à un ancêtre

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

Avertissement

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

Si la Mode propriété n’est pas définie explicitement, le fait de définir la AncestorType propriété sur un type qui dérive de Element définit implicitement la Mode propriété sur FindAncestor. De même, le fait de définir la AncestorType propriété sur un type qui ne dérive pas de Element définit implicitement la Mode propriété sur FindAncestorBindingContext.

Notes

Les liaisons relatives qui utilisent le FindAncestorBindingContext mode seront réappliquées lorsque le BindingContext des ancêtres change.

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, le BindingContext de la page est défini sur la DefaultViewModel propriété d’elle-même. Cette propriété est définie dans le fichier code-behind de la page et fournit une instance viewmodel. L’objet ListView est lié à la Employees propriété du viewmodel. , DataTemplatequi définit l’apparence de chaque élément dans , ListViewcontient un Button. La propriété du Command bouton est liée à dans le DeleteEmployeeCommand mode de vue de son parent. Le fait d’appuyer sur un Button supprime un employé :

Capture d’écran d’une liaison relative en mode FindAncestor, sur le

En outre, la propriété facultative AncestorLevel peut aider à lever l’ambiguïté de la recherche d’ancêtre dans les scénarios où il y a 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.

Notes

La AncestorLevel propriété doit avoir la valeur 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’objet runtime instance auquel le modèle est appliqué (appelé parent de modèle). 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 montre un exemple de 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, , Framequi est l’élément racine de , ControlTemplatea sa BindingContext valeur définie sur l’objet runtime instance auquel le modèle est appliqué. Par conséquent, et Frame ses 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 le mode de liaison relative iOS et Android

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