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

Advertisements

~ by Martin on September 16, 2007.

11 Responses to “Binding the RelativeSource”

  1. Great post martin, thanks for putting this up. Just discovered your blog by way of google and I’m pleasantly surprised by your tone of voice and mix of subjects. Well, keep it up I guess 🙂

  2. Great article, just what i needed, keep up the good work!:)

  3. Man I wish we had this in Silverlight too.

  4. Super awesome post dude.

  5. This is awesome.

  6. […] Binding the RelativeSource […]

  7. It was very much of useful to me

  8. Wow, this brief sample taught me more about RelativeBinding than hours of sifting through MSDN documentation. Great job Martin!

  9. simply awesome example for showing up relative source fundamentals

  10. very good explanation. Well done. Thanks!

  11. Nice Post. Very Good Explanation.
    Thanks for this

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: