Tutorials » Silverlight tutorials »

Introduction to DataBinding in Silverlight

This chapter introduces databinding in Silverlight with some examples.

DataBinding is a link between a data source and a user interface. The data source provides data to the user interface. The data in the user interface may be changed by the user which will be updated to the source and could be saved back to the database.
The data source could be business objects, collections, database tables or any other form of data that support data binding.

In this chapter, we will use a simple class called "Address" with the following properties:

1. Name
2. Address1
3. Address2
4. City
5. State
6. Zip code

Let us create a Silverlight control which accepts user's name and address. You can create a xaml control which has the following TextBlock elements:

1. Name
2. Address1
3. Address2
4. City
5. State
6. Zip code

Here is the XAML which defines a grid and places the appropraite controls for our sample:

<Grid x:Name="LayoutRoot" Background="White" Loaded="LayoutRoot_Loaded">
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>

<TextBlock Text="Name" Grid.Row="0" Grid.Column="0"></TextBlock>
<TextBlock Text="Address 1" Grid.Row="1" Grid.Column="0"></TextBlock>
<TextBlock Text="Address 2" Grid.Row="2" Grid.Column="0"></TextBlock>
<TextBlock Text="City" Grid.Row="3" Grid.Column="0"></TextBlock>
<TextBlock Text="State" Grid.Row="4" Grid.Column="0"></TextBlock>
<TextBlock Text="Zipcode" Grid.Row="5" Grid.Column="0"></TextBlock>

<TextBox x:Name="txtName" Text="{Binding Name, Mode=TwoWay}" Grid.Row="0" Grid.Column="1"></TextBox>
<TextBox x:Name="txtAddress1" Text="{Binding Address1, Mode=TwoWay}" Grid.Row="1" Grid.Column="1"></TextBox>
<TextBox x:Name="txtAddress2" Text="{Binding Address2, Mode=TwoWay}" Grid.Row="2" Grid.Column="1"></TextBox>
<TextBox x:Name="txtCity" Text="{Binding City, Mode=TwoWay}" Grid.Row="3" Grid.Column="1"></TextBox>
<TextBox x:Name="txtState" Text="{Binding State, Mode=TwoWay}" Grid.Row="4" Grid.Column="1"></TextBox>
<TextBox x:Name="txtZipcode" Text="{Binding Zipcode, Mode=TwoWay}" Grid.Row="5" Grid.Column="1"></TextBox>

<Button Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="2" Width="50" Content="Save" x:Name="btnSave" Click="btnSave_Click"></Button>

The above XAML defines a grid with 7 rows and 2 columns. The controls are places in appropriate rows and columns using the Grid.Row and Grid.Column property of individual controls. When placed in a web page, our Silverlight control will look like this:

Now create a class called "Address" which has properties representing various fields we need. See the sample code for the "Address" class:

public class Address
public string Name { get; set; }
public string Address1 { get; set; }
public string Address2 { get; set; }
public string City { get; set; }
public string State { get; set; }
public string Zipcode { get; set; }

Go to the code behind file of the xaml class and create an instance of the Address class as shown below:

Address address;

In the constructor of the XAML page class, initialize the Address class and bind it to the UI elements as shown below:

address = new Address();
txtName.DataContext = address;
txtAddress1.DataContext = address;
txtAddress2.DataContext = address;
txtCity.DataContext = address;
txtState.DataContext = address;
txtZipcode.DataContext = address;

In the above code, we are setting the DataContext property of each UI control to our "Address" object. But how do the control know which property of the address object to be used ? This is handled in the XAML. Take a look at the "txtAddress1" control. You can see that the property "Text" is set as shown below:

Text="{Binding Address1, Mode=TwoWay}"

The above line defines that we are using data binding for the "Text" property of this control, and it will use the property "Address1" of whatever object it will be bound to. Also, it states that the Mode is "TwoWay" which means the value will be read from the object and set to the "Text" property and also when the value is changed in the textbox control, it is saved back to the data source. In our case, we are binding our Address object to the textbox control. When loaded, it will display the default value from our object in the textbox. When the value is changed by the user, the datasource object will be updated with the new value from text box.

Typically, when we add a new address, the object will be initialized to empty values and the textboxes will be empty. When we edit an existing address, the object will have values populated from database and it will be displayed in the UI controls using the databinding. When values are modified by the user, the datasource object will be automatically modified. All we have to do is, save the modified datasource object in to the database.

You can download a sample project for this tutorial.

Next Chapter: Silverlight databinding examples: BindingMode Enumeration
Previous Chapter: How to display custom Rightclick context menu in Silverlight controls?
More Chapters: Silverlight Tutorials
More Tutorials: Tutorial Index

Top Contributors
TodayLast 7 Daysmore...

Awards & Gifts
Copyright © SpiderWorks Technologies Pvt Ltd., Kochi, India