RelativeSource markup extension
[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]
Provides a means to specify the source of a binding in terms of a relative relationship in the run-time object graph.
XAML attribute usage (Self mode)
<Binding RelativeSource="{RelativeSource Self}" .../>
-or-
<object property="{Binding RelativeSource={RelativeSource Self} ...}" .../>
XAML attribute usage (TemplatedParent mode)
<Binding RelativeSource="{RelativeSource TemplatedParent}" .../>
-or-
<object property="{Binding RelativeSource={RelativeSource TemplatedParent} ...}" .../>
XAML values
| Term | Description |
|---|---|
{RelativeSource Self} |
Produces a RelativeSource where the Mode value is Self. The target element should be used as the source for this binding. This is useful for binding one property of an element to another property on the same element. |
{RelativeSource TemplatedParent} |
Produces a RelativeSource where the Mode value is TemplatedParent. The control where a ControlTemplate is applied is the source for this binding. This is useful for applying runtime information to bindings at the template level. |
Remarks
A Binding can set Binding.RelativeSource either as an attribute on a Binding object element or as a component within a Binding markup extension. This is why two different XAML syntaxes are shown.
RelativeSource is similar to Binding in that it is a markup extension that is capable of returning instances of itself, supporting a string-based construction that essentially passes an argument to the constructor. In this case, the argument being passed is the Mode value.
The Self mode is useful for cases where the same element should be used as the source object and target object for a binding, but different properties are the source and the target. This is useful for binding one property of an element to another property on the same element, and is a variation on ElementName binding that does not require naming and then self-referencing the element. If you bind one property of an element to another property on the same element, either the properties must use the same property type, or you must also use a Converter on the binding to convert the values. For example, you could use Height as a source for Width without conversion, but you'd need a converter to use IsEnabled as a source for Visibility.
Here's an example. This Rectangle uses a Binding so that its Height and Width are always equal and it renders as a square. Only the Height is set as a fixed value. For this Rectangle its default DataContext is null, not this. So to establish the data context source to be the object itself (and enable binding to its other properties) we use the RelativeSource={RelativeSource Self} argument in the Binding usage.
<Rectangle
Fill="Orange" Width="200"
Height="{Binding RelativeSource={RelativeSource Self}, Path=Width}"
/>
Another technique that can be useful is to use RelativeSource={RelativeSource Self} as a way to set an object's DataContext to itself, where the Page class has been extended with a custom property that's already providing a ready-to-go view model for its own data binding. You see this technique in some of the SDK examples: <common:LayoutAwarePage ... DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}">
Note The XAML usage for RelativeSource shows only the usage for which it is intended: setting a value for Binding.RelativeSource in XAML as part of a binding expression. Theoretically, other usages are possible if setting a property where the value is RelativeSource.