Silverlight 5 Features Ancestor Relative Source Binding

Silverlight 5 has another new feature called Ancestor Relative source binding. It was already available in WPF and has been newly introduced in Silverlight 5 beta. Using this, you can now bind to the relative ancestor elements very easily.

Let's discuss it with a small example where we will create a Control Template for a Button and bind its Tag property to the actual element to display text, instead of setting the Content property. Read to know more.

Let us create a simple basic style for a button. For our example, we will not use any visually stunned button style. So, our button will just look like a TextBlock. Let's create the style with a TextBlock control as shown below:

<Style x:Key="ButtonStyle" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <TextBlock TextWrapping="Wrap" 
                               VerticalAlignment="Center"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Here you will see that, we just have a normal TextBlock as our ControlTemplate of the button control. Now instead of binding the Content property to the Text property of the TextBlock, we want to bind it with the Tag property of the button. Here in this case, the Tag property is an first level ancestor property of the TextBlock control.

Let us modify our style which will look as below:

<Style x:Key="ButtonStyle" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <TextBlock TextWrapping="Wrap" 
                               Text="{Binding Tag, 
                               RelativeSource={RelativeSource AncestorType=Button, 
				AncestorLevel=1}}" 
				VerticalAlignment="Center"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

You will notice here that, the Text property of the TextBlock is binded to the Tag property of the button. As this is one level up to the TextBlock and very close to the binded element, we used here AncestorLevel=1. AncestorType=Button defines the control which it was binded with.

Now in our LayoutRoot, we will add a Button control and instead of specifying the Text property, we will use Tag property to set the text. Here is the code snippet for that:

<Grid x:Name="LayoutRoot" Background="White"> 
    <Button Width="200" Height="26" 
    Tag="This is Button" Style="{StaticResource ButtonStyle}"/> 
</Grid>

Now, if you run your example, you will see the Text rendered in the UI. Hope this clarifies the feature to you. You can explore it more to understand the use of level better. Happy coding.