Silverlight 3 Element Binding

Posted by: Malcolm Sheridan , on 8/9/2009, in Category Silverlight 2, 3, 4 and 5
Views: 27333
Abstract: The following article demonstrates how to use the element binding feature in Silverlight 3.
Silverlight 3 Element Binding
 
Silverlight 3 has some new binding features that makes binding data to the controls even easier. The one I am going to focus on today is the ElementName property. The ElementName property gets or sets the name of the element to use as the binding source object. By using this property you can now use one user interface element as the binding object for another. This can great reduce the amount of code you need to write. To use it just add the ElementName to your binding in XAML, such as the following:
{Binding Value, ElementName=slider}
To begin with open Visual Studio 2008 and choose File > New > Project > Silverlight > Silverlight Application. For this example I’ll be using the MainPage.xaml file only, so close any windows down that are related to the web application project.
The best way to demonstrate how easy this is to use visually is to use the Slider control. Add a StackPanel and a slider control to the MainPage.xaml:
<StackPanel Orientation="Vertical" VerticalAlignment="Center">
            <Slider x:Name="slider"
                LargeChange="20"
                SmallChange="1"
                Maximum="200"
                ValueChanged="slider_ValueChanged"
                Minimum="0"
                Width="200">
            </Slider>
        </StackPanel>
Disregard the ValueChanged event for now. We’ll use that later. With the Slider control you give it a maximum value, and the values for a large change and a small change. The large change is a user clicking up or down the slider whereas a small change is the user manually moving the slider left to right. What would be nice is to see the value of the slider as it is being moved. This is a simple task thanks to element binding. To enable this functionality add the following TextBlock to your xaml:
<TextBlock Width="50"
Text="{Binding Value, ElementName=slider, Converter={StaticResource DoubleConverter}}" /> 
By setting the ElementName to the slider control, Silverlight knows to bind the current value of the slider as the text property of the TextBlock. Cool huh?! I’ve also added a converter to display a friendlier value to the user. If you ran the project now and move the slider up and down, you’ll see the value being updated in the TextBlock:
Slider
<Rectangle
x:Name="rectangle"
      Height="50"
      Width="{Binding Value, ElementName=slider}"
      HorizontalAlignment="Center"
Fill="Red" />

In the code above, the width of the rectangle is going to be set by the current value of the slider. To make is visually more appealing, I wanted to change the colour of the rectangle depending on if the user made a large or a small change. To do this, we can create a delegate that will run the ValueChanged event of the slider:
 
C#

private void slider_ValueChanged(object sender, System.Windows.RoutedPropertyChangedEventArgs<double> e)
{
double diff = 0;
      if (e.NewValue > e.OldValue)
      {
            diff = e.NewValue - e.OldValue;
}
      else
      {
            diff = e.OldValue - e.NewValue;
}
      SolidColorBrush scb = new SolidColorBrush(diff == slider.LargeChange ? Colors.Yellow : Colors.Red);
      rectangle.Fill = scb;
 
VB.NET
Private Sub slider_ValueChanged(ByVal sender As Object, ByVal e As System.Windows.RoutedPropertyChangedEventArgs(Of Double))
Dim diff As Double = 0
       If e.NewValue > e.OldValue Then
             diff = e.NewValue - e.OldValue
       Else
             diff = e.OldValue - e.NewValue
       End If
       Dim scb As New SolidColorBrush(If(diff = slider.LargeChange, Colors.Yellow, Colors.Red))
       rectangle.Fill = scb
End Sub
In the code above, if the user makes small changes to the slider, the colour of the rectangle will be red. When they make large change the colour will be yellow. 
Small change
0908Small_Change
Large change
Large_Change

All of this code is made incredibly easy by element binding. This is a new addition to Silverlight 3 and I for one will be using it heavily.

The entire source code of this article can be downloaded from here

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
Malcolm Sheridan is a Microsoft awarded MVP in ASP.NET, a Telerik Insider and a regular presenter at conferences and user groups throughout Australia and New Zealand. Being an ASP.NET guy, his focus is on web technologies and has been for the past 10 years. He loves working with ASP.NET MVC these days and also loves getting his hands dirty with jQuery and JavaScript. He also writes technical articles on ASP.NET for SitePoint and other various websites. Follow him on twitter @malcolmsheridan


Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!

Categories

JOIN OUR COMMUNITY

POPULAR ARTICLES

C# .NET BOOK

C# Book for Building Concepts and Interviews

Tags

JQUERY COOKBOOK

jQuery CookBook