{"id":46692,"date":"2020-03-25T13:42:30","date_gmt":"2020-03-25T20:42:30","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/xamarin\/?p=46692"},"modified":"2020-04-01T02:34:55","modified_gmt":"2020-04-01T09:34:55","slug":"binding-possibilities-relativesource","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/binding-possibilities-relativesource\/","title":{"rendered":"Increase Binding Possibilities with RelativeSource"},"content":{"rendered":"

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. <\/span>Most of the time this isn\u2019t a problem, but complex data hierarchies often lead to situations where an element needs to bind to the BindingContext of some parent element in addition to its own local BindingContext.<\/span><\/span> 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?.<\/span><\/p>\n

\n

RelativeSource<\/span><\/h2>\n<\/div>\n
The <\/span><\/span>RelativeSource<\/b><\/span><\/span> is a markup extension that is used when we <\/span><\/span>want <\/span><\/span>to bind a property of a given element to another property of the element itself, when we <\/span><\/span>want <\/span><\/span>to bind a property of a element to another one of its relative parents<\/span><\/span>,<\/span><\/span> and when <\/span><\/span>we want to bind <\/span><\/span>a bindable property value to a piece of XAML in custom control development.<\/span><\/span> All of those situations are expressed as relative source modes. RelativeSource has the following modes:<\/span><\/div>\n
<\/div>\n
    \n
  1. Self<\/span><\/span><\/li>\n
  2. Find Ancestor<\/span><\/span><\/li>\n
  3. Templated Parent\u00a0<\/span><\/span><\/li>\n<\/ol>\n
    \n

    1. Self<\/span><\/h3>\n<\/div>\n
    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 <\/span>element<\/span><\/span>. For example, we want to draw a square using a BoxView. We can do this using the element name:<\/span><\/div>\n
    \n
    <BoxView \r\n    x:Name=\"myBoxView\"\r\n    Color=\"Red\"  \r\n    HeightRequest=\"100\"\r\n    WidthRequest=\"{Binding Source={x:Reference myBoxView}, Path=HeightRequest}}\" \/><\/pre>\n<\/div>\n
    Alternatively<\/span>, we can <\/span>achieve the same result<\/span> using the RelativeSource:<\/span><\/div>\n
    \n
    <BoxView \r\n    Color=\"Red\"\r\n    HeightRequest=\"100\"\r\n    Width=\"{Binding Source={RelativeSource Self}, Path=HeightRequest}\"\/><\/pre>\n
    \n
    \"Using<\/p>\n
    2. Find Ancestor<\/span><\/span><\/h3>\n<\/div>\n
    The FindAncestor relative binding modes are used to bind to parent elements in the visual tree.\u00a0<\/span><\/div>\n
    \n
    <CollectionView\r\n    ItemsSource=\"{Binding Drinks}\">\r\n    <CollectionView.ItemTemplate>\r\n        <DataTemplate>\r\n            <Grid>\r\n            ...  \r\n            <Button\r\n                Command=\"{Binding Source={RelativeSource AncestorType={x:Type viewmodels:RelativeSourceViewModel}}, Path=BuyCommand}\"\r\n                CommandParameter=\"{Binding Source={RelativeSource Self}, Path=BindingContext}\"\r\n                ... \/>\r\n            <\/Grid>\r\n        <\/DataTemplate>\r\n    <\/CollectionView.ItemTemplate>\r\n<\/CollectionView><\/pre>\n
    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.\u00a0<\/span><\/p>\n<\/div>\n
    \n
    The <\/span>AncestorType<\/b><\/span> property should be set to the type of the element to use as the source.<\/span><\/div>\n<\/div>\n<\/div>\n
    \n
    \"Using<\/p>\n
    \n
    3. Templated Parent<\/span><\/h3>\n<\/div>\n
    This mode enables<\/span> you to<\/span> tie a given ControlTemplate property to a property of the control that the ControlTemplate is applied to. \u00a0<\/span><\/div>\n
    To <\/span>better <\/span>understand this mode, let\u2019s see an example:<\/span><\/div>\n<\/div>\n
    \n
    <ControlTemplate x:Key=\"DrinkCardViewControlTemplate\">\r\n    <Grid>\r\n        <Frame\r\n            BindingContext=\"{Binding Source={RelativeSource TemplatedParent}}\">\r\n            <StackLayout>\r\n                <Label \r\n                    Text=\"{Binding DrinkTitle}\"\r\n                    ... \/>\r\n                ...\r\n            <\/Grid>\r\n        <\/Frame>\r\n    <\/Grid>\r\n<\/ControlTemplate><\/pre>\n
    In this example, the Frame, which is the root element of the ControlTemplate, has its BindingContext set to the runtime object instance to which the template is applied. Therefore, the Frame and its children resolve their binding expressions against the properties of each custom control object.<\/span><\/p>\n
    <controls:DrinkCardView\r\n     DrinkTitle=\"BRAZILIAN COFFEE\"\r\n     DrinkDescription=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\"\r\n     DrinkColor=\"Maroon\"\r\n     DrinkImageSource=\"coffee.png\"\r\n     ControlTemplate=\"{StaticResource DrinkCardViewControlTemplate}\" \/><\/pre>\n
    \n
    \"Using<\/p>\n
    Learn More<\/span><\/span><\/h2>\n<\/div>\n
    Hopefully this blog was helpful and showed you how easy it is to use RelativeSource. You can find the <\/span>sample<\/a><\/span> we have seen in this article and read more about RelativeSource in our <\/span>amazing documentation<\/u><\/a><\/span>.<\/span><\/div>\n<\/div>\n
    <\/div>\n","protected":false},"excerpt":{"rendered":"
    RelativeSource is a markup extension that is used to bind a property of a given element to another property of the element itself. This articles shares examples, documentation, and more!<\/p>\n","protected":false},"author":20406,"featured_media":39167,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[367],"tags":[607,8202],"class_list":["post-46692","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-xamarin-forms","tag-binding","tag-relativesource"],"acf":[],"blog_post_summary":"
    RelativeSource is a markup extension that is used to bind a property of a given element to another property of the element itself. This articles shares examples, documentation, and more!<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/46692","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/users\/20406"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=46692"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/46692\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media\/39167"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=46692"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=46692"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=46692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}