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 it's 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.


If you have come this far, it means that you liked what you are reading. Why not reach little more and connect with me directly on Twitter, Facebook, Google+ and LinkedIn. I would love to hear your thoughts and opinions on my articles directly. Also, don't forget to share your views and/or feedback in the comment section below.

3 comments

  1. Nice. So Microsoft is now porting the functionalities of wpf to silverlight. Great.

    ReplyDelete
  2. Hi,

    How can we use AncestorLevel 2. Give a code snippet.

    ReplyDelete
  3. Text="{TemplateBinding Tag}" would be a better choice in your example (pre-Silverlight 5).

    Here's a better example:

    <Style x:Key="ButtonStyle" TargetType="Button">
    <Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="Button">
    <Grid Tag="Grid Tree Level 1">
    <StackPanel>
    <Grid Tag="Grid Tree Level 2">
    <TextBlock Text="{Binding Tag, RelativeSource={RelativeSource AncestorType=Grid, AncestorLevel=1}}"/>
    </Grid>
    <Grid Tag="Grid Tree Level 2">
    <TextBlock Text="{Binding Tag, RelativeSource={RelativeSource AncestorType=Grid, AncestorLevel=2}}"/>
    </Grid>
    </StackPanel>
    </Grid>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
    </Style>

    ReplyDelete

 
© 2008-2016 Kunal-Chowdhury.com - Microsoft Technology Blog for developers and consumers | Designed by Kunal Chowdhury
Back to top