Binding the RelativeSource

You can bind RelativeSouce of four modes, which are Self, TemplatedParent, FindAncestor and PreviousData. Here I will demonstrate the bindings of the first three modes. (PreviousData is excluded.)

Self refers to the target element.

TemplatedParent refers to the target element’s Parent which consumes the template.

FindAncestor refers to the target element’s Ancestor of a given type.

========================== XAML ============================

<Window … Title=”Window1″ …>
<StackPanel Name=”TheOuterStackPanel”>
<Button Content=”MySampleButton” ToolTip=”Still the SampleButton” Name=”SampleButton”>
<Button.Template>
<ControlTemplate x:Name=”theControlTemplate”>
<StackPanel Name=”theInnerStackPanel”>
<TextBlock Background=”Red” Text=”{Binding RelativeSource={RelativeSource Self}, Path=Background}”/> // the hex value of red
<TextBlock Background=”Aquamarine” Text=”{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Name}”/> // SampleButton
<Grid>
<TextBlock Background=”Khaki” Text=”{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content}”/> // MySampleButton
</Grid>
<TextBlock Background=”ForestGreen” Text=”{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}, Path=ToolTip}”/> // Still the SampleButton
<TextBlock Background=”Cornsilk” Text=”{Binding RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type StackPanel}}, Path=Name}”/> // TheInnerStackPanel
<TextBlock Background=”Chartreuse” Text=”{Binding RelativeSource={RelativeSource FindAncestor, AncestorLevel=2, AncestorType={x:Type StackPanel}}, Path=Name}”/> // TheOuterStackPanel
<TextBlock Background=”Cyan” Text=”{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=Title}”/> // Window1
</StackPanel>
</ControlTemplate>
</Button.Template>
</Button>
</StackPanel>
</Window>

Note: If binding the relative source happens in a data template, it seems only parent’s or ancestor’s content can be bound. In a control template like the sample above, such limit does not exist.

Note1: Such relative binding can be realized by pointing to the source element by name. However, if binding is defined in a template, which will probably be saved in a separate ResourceDictionary, Binding the RelativeSource seems the best option

~ by Martin on September 16, 2007.