Click here to Skip to main content
15,884,298 members
Articles / Silverlight

Silverlight 5 Features Ancestor Relative Source Binding

Rate me:
Please Sign up or sign in to vote.
4.94/5 (3 votes)
27 May 2011CPOL2 min read 21.1K  
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:

XML
<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:

XML
<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:

XML
<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.

This article was originally posted at http://www.kunal-chowdhury.com/feeds/posts/default

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Technical Lead
India India

Kunal Chowdhury is a former Microsoft "Windows Platform Development" MVP (Most Valuable Professional, 2010 - 2018), a Codeproject Mentor, Speaker in various Microsoft events, Author, passionate Blogger and a Senior Technical Lead by profession.

He is currently working in an MNC located in India. He has a very good skill over XAML, C#, Silverlight, Windows Phone, WPF and Windows app development. He posts his findings, articles, tutorials in his technical blog (www.kunal-chowdhury.com) and CodeProject.


Books authored:


Connect with Kunal on:





Comments and Discussions

 
-- There are no messages in this forum --