Another Simple Binding In Silverlight

Introduction

Onathan Swift, Chris Barker, Dan Wahlin and Alvarez Patuel wrote a wonderful book for Silverlight 2 for Asp.net developers. The explanation given in that book is absolutely magnificent. The Title of their Book is “Silverlight 2 for ASP.net Developers”. I want to share with you what I learned from that book in this article. In this article I am going to share a different Data binding technique that differs from the one I used in previous article titled “Simple Binding in Silverlight” published here.

Background

In this Article I am going to explain how you can bind your controls value that comes from a property of a class or model.

Using the code

We are going to user C# as our language and you will need Expression Blend follow my examples in this article. You can obtain a trial version here

Start

To follow my example you need Expression Blend. Open a New Project as depicted in the Following diagram below

And if it’s the First time you open Expression Blend you will not have a Project, but if you have used it before, the Reference to the previous project will be available. After you click an option for a new project you will be taken to this dialog box.

Choose the First option that will create a website for you. And give it a name as I did, mine is “MyDataBinding” as I did for my previous article, you can just change it to anything. The Next Step is to go to the toolbar, if you can notice; here the toolbar is a little bit different from the normal visual studio. On the left hand side of your screen you will see a button with a double arrow as depicted below

Click on it and you will see a list of Controls displayed a little bit different from what visual studio does as depicted below

Now the Button my have a click event, In Silverlight we call it “Click” not “onClick” as we do in asp.net. Give all the controls the names so that we can bind them from the code behind not from the xaml and when you are done your xaml should look like this

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
x:Class="SilverlightApplication6.MainPage"
Width="640" Height="480">
<Grid x:Name="LayoutRoot" Background="White">
<Rectangle Fill="White" Stroke="Black" Margin="20,54,28,22"/>
<TextBox x:Name="txtFullname" Height="20" Margin="215,99,152,0" VerticalAlignment="Top" TextWrapping="Wrap"/>
<TextBlock Height="20" HorizontalAlignment="Left" Margin="122,99,0,0" VerticalAlignment="Top" Width="126" TextWrapping="Wrap"><Run Text="FullName"/><LineBreak/><Run Text=""/></TextBlock>
<TextBlock Height="21" HorizontalAlignment="Left" Margin="122,137,0,0" VerticalAlignment="Top" Width="72" Text="Destination" TextWrapping="Wrap"/>
<ListBox x:Name="lstDestiation" Margin="215,137,152,236"/>
<CheckBox x:Name="ChkVisaneeded" Height="23" HorizontalAlignment="Left" Margin="215,0,0,197" VerticalAlignment="Bottom" Width="88" Content=""/>
<TextBlock Height="23" HorizontalAlignment="Left" Margin="122,0,0,197" VerticalAlignment="Bottom" Width="89" Text="Visa needed" TextWrapping="Wrap"/>
<TextBlock Height="22" HorizontalAlignment="Left" Margin="50,0,0,153" VerticalAlignment="Bottom" Width="125" Text="Reservation Details" TextWrapping="Wrap"/>
<TextBlock Height="18" HorizontalAlignment="Left" Margin="50,0,0,119" VerticalAlignment="Bottom" Width="109" Text="FullName" TextWrapping="Wrap"/>
<TextBlock Height="18" HorizontalAlignment="Right" Margin="0,0,228,119" VerticalAlignment="Bottom" Width="85" Text="Visa:" TextWrapping="Wrap"/>
<TextBlock Height="16" HorizontalAlignment="Left" Margin="50,0,0,77" VerticalAlignment="Bottom" Width="81" Text="Confirmation" TextWrapping="Wrap"/>
<TextBlock Height="13" HorizontalAlignment="Left" Margin="50,0,0,47" VerticalAlignment="Bottom" Width="63" Text="Code" TextWrapping="Wrap"/>
<Button Height="40" x:Name="btnProcess" HorizontalAlignment="Right" Margin="0,0,56,37" VerticalAlignment="Bottom" Width="110" Content="Process" Click="btnProcess_Click"/>
<TextBox x:Name="txtFullName2" Height="20" Margin="105,0,0,119" VerticalAlignment="Bottom" TextWrapping="Wrap" HorizontalAlignment="Left" Width="158"/>
<TextBox x:Name="txtVisaNeeded2" Height="20" Margin="0,0,163,117" VerticalAlignment="Bottom" TextWrapping="Wrap" HorizontalAlignment="Right" Width="110"/>
<TextBox x:Name="txtcode2" Height="20" Margin="86,0,0,47" VerticalAlignment="Bottom" TextWrapping="Wrap" HorizontalAlignment="Left" Width="125"/>
</Grid>
</UserControl>
 

Now as I explained in my previous article, if you need a Click event handler generated for you, you need to follow the below steps.

Click on your Button and you will see the properties of the button, if you don’t go to the window menu and select the property window and it will appear as depicted below

On the far right of your screen you will see the lightning sign as pointed out in the yellow arrow, click it and you will be take to this screen

Double click inside the black textbox like space near the click event option and you will be taken to the code behind of the xaml as depicted below and write the Following code

As you can see it this just an empty event handler where you need to add your custom code depending on what should happen when the button is clicked. Now let us go to the main heart of your article. Let’s create a class with Properties. The First thing you need to do is Click on the File > New Item as depicted below

And a dialog box will open and select Class as depicted below

Change the Name to BindingModel, this is the name of our class, you will see later how we use the code that we are going to write in our Silverlight application. The Next step is to write the code for our model. Make sure that the Following namespaces are imported or they are part of your usings.

When done lets create properties for our class, write the following code or you can just copy and paste for the sake of following my example.

public class BindingModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private string fullname;
private bool visaRequired;
private string code;
public bool VisaRequired
{
get
{
return this.visaRequired;
}
set
{
this.visaRequired = value;
OnPropertyChanged("VisaRequired");
}
}
public string FullName
{
get
{
return this.fullname;
}
set
{
this.fullname = value;
OnPropertyChanged("FullName");
}
}
public string Code
{
get
{
return this.code;
}
set
{
this.code = value;
OnPropertyChanged("Code");
}
}
private void OnPropertyChanged(string property)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(property));
}
}
}
 

Now let me explain the bits of the code. This is Just a Simple Class that has Properties. Now there is something new here, but it only appears after the value is set. Let me explain what is happening there. The reason we have the code like below

OnPropertyChanged("Code");

Is that we need to be able to track back the changes made to the properties. If you can look at the definition of the class you will see that we are implementing an interface INotifyPropertyChanged as depicted in the below snippet.

public class BindingModel:INotifyPropertyChanged

We will implement this in the source object, as the dependency property will subscribe to the PropertyChanged event. The Implementation has to be done manually, as you may alter when this event is triggered.
Now Going Back to our User Interface, let me explain the object of this binding. First let us look at our UI (User Interface).

Now Our UI is divided into two parts, the First part will allow the user to type in something on the Textbox and when a Button is click the property values will show on the textboxes in the second part of our application. One might say why you can’t bind a control to control. Well in Silverlight you cannot bind a UIElement with another UIElement directly, you need to use a CLR object sources as a bridge between them for this.

Now let’s add a code to the Click event of the button. The following should be the code for the click event of the Button.

I have added the comment in this code. Let me explain one portion of this code. First you need to create an object of the Binding class and the Object of the model class , the class that has our Properties and tell the binding class that we are going to use our model as a Source object and tell it that in that model object we are going to use a certain property as we do by mentioning the property name and the line to that follows we are telling our binding object that we are going to use the two-way binding mode and at last we are binding the Individual controls on its text property to a Binding object that we just created. This is done for each object.  In order to use the Binding Class you need to add the

using System.ComponentModel;

In your usings. Lets Run our application and see how it behaves, as you can see you don’t need to add anything on the textbox , I just set the properties on design time, but you can set it , by allowing a user to enter that and display what the user has entered ,the code can be changed very easily. When you run your application at first nothing will happen, but when you click the button, you will notice that the Property values will be displayed on the controls as depicted below.

As you can see the data is not coming from the database, we are retrieving the data    from the properties. In the Next Article we are going to bind data from the Database. As you all know that in Silverlight there are some namespaces have been omitted. The binding in Silverlight is different from the Binding in ASP.NET. But let leave that to the next discussion in the article.

Conclusion

In my Next article I will demonstrate data binding with Data that will be coming from SQL.

Thank you for Visiting Dotnetfunda
Vuyiswa Maseko