Increase Binding Possibilities with RelativeSource

Javier

March 25th, 2020

The BindingContext is one of the most important parts of the Xamarin.Forms data binding system, especially in MVVM applications. Being built into the Binding type as the common source for bindings in a specific scope reduces plumbing code needed and makes XAML more concise. Unfortunately, for any given View there is only one BindingContext available to bind against. For example, you are working with a collection of items using CollectionView. In the DataTemplate of each element you need a Button associated with a Command. However, by default, the BindingContext in the template is an item from the collection. How do we access a Command in the BindingContext of the CollectionView?.

RelativeSource

All of those situations are expressed as relative source modes. RelativeSource has the following modes:

1. Self

Self indicates the element on which the binding is being set, allowing you to bind one property of that element to another property on the same . For example, we want to draw a square using a BoxView. We can do this using the element name:

<BoxView x:Name="myBoxView" Color="Red" HeightRequest="100" WidthRequest="{Binding Source={x:Reference myBoxView}, Path=HeightRequest}}" />

Alternatively , we can achieve the same result using the RelativeSource:

<BoxView Color="Red" HeightRequest="100" Width="{Binding Source={RelativeSource Self}, Path=HeightRequest}"/> The FindAncestor relative binding modes are used to bind to parent elements in the visual tree. <CollectionView ItemsSource="{Binding Drinks}"> <CollectionView.ItemTemplate> <DataTemplate> <Grid> ... <Button Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodels:RelativeSourceViewModel}}, Path=BuyCommand}" CommandParameter="{Binding Source={RelativeSource Self}, Path=BindingContext}" ... /> </Grid> </DataTemplate> </CollectionView.ItemTemplate> </CollectionView> In this example, the BindingContext of the page is set to the RelativeSourceViewModel property of itself. The CollectionView binds to the Drinks property of the viewmodel. The DataTemplate, which defines the appearance of each item in the CollectionView, contains a Button. The button’s Command property is bound to the BuyCommand in its parent’s viewmodel. The AncestorType property should be set to the type of the element to use as the source.

3. Templated Parent This mode enables you to tie a given ControlTemplate property to a property of the control that the ControlTemplate is applied to. To better understand this mode, let’s see an example: