Click here to Skip to main content
11,483,983 members (66,501 online)
Click here to Skip to main content

Tagged as

Silverlight 5 Features Ancestor Relative Source Binding

, 27 May 2011 CPOL 12.7K
Rate this:
Please Sign up or sign in to vote.
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.

License

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

Share

About the Author

Kunal Chowdhury (@kunal2383)
Team Leader
India India
Kunal Chowdhury is a Microsoft "Windows Platform Development" MVP (Most Valuable Professional), a Codeproject Mentor, Telerik MVP, Nokia Developer Champion, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer 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 Store (WinRT) app development. He posts his findings, articles, tutorials in his technical blog and CodeProject.

Technical Blog: http://www.kunal-chowdhury.com
Facebook: http://facebook.com/blog.kunal
Twitter : http://twitter.com/kunal2383
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150520.1 | Last Updated 27 May 2011
Article Copyright 2011 by Kunal Chowdhury (@kunal2383)
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid