Using Control to Control Binding in Silverlight 3

One of the new features in Silverlight 3 is enhanced binding abilities, this includes the ElementName property. What this allows you to do is bind values from other controls. While this is new to Silverlight, the desktop environment has had this for a while so you may have seen this before. However this feature is extremely useful for many different applications. This tutorial is going to show how to use this feature in a simple way.

The demo application we are going to create is below. It is a relatively simple thing. It has a list of games at the top and details of the selected game below. We are going to bind the details information in the bottom half to the SelectedItem of the list.



The first thing we are going to do is put a little bit of XAML down for the basis of our interface. We start with defining two rows for our Grid and dropping ListBox into one of them. The second row has a barrage of TextBlock controls, along with a HyperLinkButton, an Image, and a ScrollViewer. I will give a quick review of what they are going to be used for right after the code.

Starting at the top, our ListBox should be pretty self explanatory - it holds the list of games. The second row is filled with a Canvas to make laying out the rest of the controls easy. An Image is the first element which fills up the whole area but it is almost completely transparent, this will act as a background. The hyperlink button shows the title of the game and will link to an external page about the game. There are then a couple details text blocks. Finally, we have a ScrollViewer which has its Background set to a resource (at the top of the XAML) to make it transparent. Inside the scroll view we add a text block to display the description. We also set a max height so the area will scroll if the description of the game is too long. That pretty much takes care of the interface.

We need to create an object to hold some basic data for a game. I created a class named Game (ohhh ahhh) and filled it with a few properties.

We also need to initialize our data which is going to be done inside of our main page xaml code behind, in my case named MainPage.xaml.cs. Inside the class I built a function called InitData which initializes the data. I call this function from the constructor after InitializeComponent is called. I also created a private variable to hold the base url for the background images. That is pretty much it. The updated code is below.

Ok, let's get down to it. We are here to do some binding and mostly everything up to this point has been ground work. To bind values we use the Binding markup extension. This is done by placing curly brackets, the Binding keyword, and the property to bind to. The the basic syntax is as follows, {Binding Object.Value}, where Object.Value is the object and property to bind to.

In our case, however, we are going to throw in a little wrinkle with the ElementName property. To use this guy we drop a comma at the end of binding statement, then ElementName= and the name of the element that owns the property. So this would look like {Binding Text, ElementName=MyTextBlock} if we were binding from a text block named MyTextBlock and its property Text.

Well, enough talking let's put this into action. Looking at our Image control you can see our Source property is blank. We fill that in with {Binding SelectedItem.ImageUrl, ElementName=GameList}. This is saying go to the GameList control (our list) and pull SelectedItem.ImageUrl and that is our source for the image. Now because the selected item on list is a Game object we can pull the ImageUrl. Doing the same thing for the rest of the properties of our selected game will result in an updated XAML file like below.

That pretty much wraps this tutorial up. Using binding properties are not hard once you have the basic concepts down. The ElementName property is one you should definitely know about especially now that it's available in Silverlight. As always if you have any questions feel free to leave a comment or post something in the forums.