{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

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.

Related topics

• XAML overview
• Data binding in depth
• {Binding} markup extension
• Binding
• RelativeSource