Ancestor Relative Source Binding in Silverlight 5 Beta

Short intro about Ancestor Relative Source Binding:

If you are familiar with WPF then this feature is not new to you. I mean to say that in WPF the Ancestor Relative Source Binding feature already exists. So it will be easy for you WPF guys to use it in Silverlight 5.

If however you are new to Silverlight/WPF then you might not know why you should use Ancestor Relative Source Binding.

You need to use this new feature when a control is dependent on another control.

For example,

Consider for example you have a GridView. In one of the Grid columns you may have a child control as the template; say Label. So the width of the Label depends on the width of the Grid view column. That situation needs this new feature.

Okay, Let us create a demo project.

Preparing the Solution:

Create a Silverlight project with the name "AncestorRelativeSourceBindingsSL5".


Follow the [No: #].

Designing the Screen [XAML]:

We are not going to play around with the controls. Just place a HyperLinkButton.


The above figure shows the complete XAML for the demo.

Style for HyperLinkButton:


The above code snippet is the style for the HyperLinkButton which has the Ancestor Relative Source Binding.

The [No: 1] specifies that it is a style for HyperLinkButton.

The [No: 2] specifies the control template for Hyperlink. So the HyperLinkButton will be drawn on the screen as a Button in this example.

Binding Ancestor Relative Source:


Here in the above figure we have bound the Name, Height and Width of the different Grids to Button properties.

We have bound the Relative source with 3 levels of Ancestor.

The AncestorType specifies from which type of control the property should be taken.

The AncestorLevel specifies at what level the Ancestor is present.

Quick Notes:

While binding the Relative source using RelativeSource property you might have only AncestorLevel and AncestorType properties.


The above figure shows the intelligence shows only two properties of RelativeSource.


So you need to manually type the FindAncestor property as the first property of the Relative source. Otherwise it will throw an error even if the order of the properties is changed [FindAncestor should always be first].

The following figure shows bindings of the Relative sources clearly.


[No: 1] – shows the Ancestor 1 with Name property. The Name property has been bound with the Content property of the Button.

[No: 2] – shows the Ancestor 2 with Width property. The Width property has been bound with the Width property of the Button.

[No: 3] – shows the Ancestor 2 with Height property. The Height property has been bound with the Height property of the Button.

Binding the Style with HyperLinkButton:

We have created the Style with Ancestor relative source bindings for HyperLinkButton.


So just add one more line with the HyperLinkButton to have the style which we have created.

That's it. Hit the play button. Let us see the application in action.

Application inaction:


Summary:

In the past only WPF guys enjoyed using this Ancestor Relative Source Binding feature but the Silverlight team has now allowed us to enjoy it too.

In this article we have seen the new feature of Silverlight 5 Beta called Ancestor Relative Source Bindings.

Thanks for spending your precious time here. Please provide your valuable feedbacks and comments, which enable me to give a better article the next time.

Thanks.