{RelativeSource} markup extension
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 Mode value of 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 ControlTemplate that is applied as 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} markup extension. It is a markup extension that is capable of returning instances of itself, and 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 binding one property of an element to another property on the same element, and is a variation on ElementName binding but 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} markup extension 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} markup extension usage.
<Rectangle
Fill="Orange" Width="200"
Height="{Binding RelativeSource={RelativeSource Self}, Path=Width}"
/>
Another use of RelativeSource={RelativeSource Self} is as a way to set an object's DataContext to itself. For example, you may see this technique in some of the SDK examples 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 such as: <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.