Synchronize Data between a Silverlight ListBox and a User Control
- by psheriff
One of the great things about XAML is the powerful data-binding capabilities. If you load up a list box with a collection of objects, you can display detail data about each object without writing any C# or VB.NET code. Take a look at Figure 1 that shows a collection of Product objects in a list box. When you click on a list box you bind the current Product object selected in the list box to a set of controls in a user control with just a very simple Binding statement in XAML.
Figure 1: Synchronizing a ListBox to a User Control is easy with Data Binding
Product and Products Classes
To illustrate this data binding feature I am going to just create some local data instead of using a WCF service. The code below shows a Product class that has three properties, namely, ProductId, ProductName and Price. This class also has a constructor that takes 3 parameters and allows us to set the 3 properties in an instance of our Product class.
C#public class Product{ public Product(int productId, string productName, decimal price) { ProductId = productId; ProductName = productName; Price = price; }
public int ProductId { get; set; } public string ProductName { get; set; } public decimal Price { get; set; }}
VBPublic Class Product Public Sub New(ByVal _productId As Integer, _ ByVal _productName As String, _ ByVal _price As Decimal) ProductId = _productId ProductName = _productName Price = _price End Sub
Private mProductId As Integer Private mProductName As String Private mPrice As Decimal
Public Property ProductId() As Integer Get Return mProductId End Get Set(ByVal value As Integer) mProductId = value End Set End Property
Public Property ProductName() As String Get Return mProductName End Get Set(ByVal value As String) mProductName = value End Set End Property
Public Property Price() As Decimal Get Return mPrice End Get Set(ByVal value As Decimal) mPrice = value End Set End PropertyEnd Class
To fill up a list box you need a collection class of Product objects. The code below creates a generic collection class of Product objects. In the constructor of the Products class I have hard-coded five product objects and added them to the collection. In a real-world application you would get your data through a call to service to fill the list box, but for simplicity and just to illustrate the data binding, I am going to just hard code the data.
C#public class Products : List<Product>{ public Products() { this.Add(new Product(1, "Microsoft VS.NET 2008", 1000)); this.Add(new Product(2, "Microsoft VS.NET 2010", 1000)); this.Add(new Product(3, "Microsoft Silverlight 4", 1000)); this.Add(new Product(4, "Fundamentals of N-Tier eBook", 20)); this.Add(new Product(5, "ASP.NET Security eBook", 20)); }}
VBPublic Class Products Inherits List(Of Product)
Public Sub New() Me.Add(New Product(1, "Microsoft VS.NET 2008", 1000)) Me.Add(New Product(2, "Microsoft VS.NET 2010", 1000)) Me.Add(New Product(3, "Microsoft Silverlight 4", 1000)) Me.Add(New Product(4, "Fundamentals of N-Tier eBook", 20)) Me.Add(New Product(5, "ASP.NET Security eBook", 20)) End SubEnd Class
The Product Detail User Control
Below is a user control (named ucProduct) that is used to display the product detail information seen in the bottom portion of Figure 1. This is very basic XAML that just creates a text block and a text box control for each of the three properties in the Product class. Notice the {Binding Path=[PropertyName]} on each of the text box controls. This means that if the DataContext property of this user control is set to an instance of a Product class, then the data in the properties of that Product object will be displayed in each of the text boxes.
<UserControl x:Class="SL_SyncListBoxAndUserControl_CS.ucProduct" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" HorizontalAlignment="Left" VerticalAlignment="Top"> <Grid Margin="4"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition MinWidth="120" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <TextBlock Grid.Row="0" Grid.Column="0" Text="Product Id" /> <TextBox Grid.Row="0" Grid.Column="1" Text="{Binding Path=ProductId}" /> <TextBlock Grid.Row="1" Grid.Column="0" Text="Product Name" /> <TextBox Grid.Row="1" Grid.Column="1" Text="{Binding Path=ProductName}" /> <TextBlock Grid.Row="2" Grid.Column="0" Text="Price" /> <TextBox Grid.Row="2" Grid.Column="1" Text="{Binding Path=Price}" /> </Grid></UserControl>
Synchronize ListBox with User Control
You are now ready to fill the list box with the collection class of Product objects and then bind the SelectedItem of the list box to the Product detail user control. The XAML below is the complete code for Figure 1.
<UserControl x:Class="SL_SyncListBoxAndUserControl_CS.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:src="clr-namespace:SL_SyncListBoxAndUserControl_CS" VerticalAlignment="Top" HorizontalAlignment="Left"> <UserControl.Resources> <src:Products x:Key="productCollection" /> </UserControl.Resources> <Grid x:Name="LayoutRoot" Margin="4" Background="White"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <ListBox x:Name="lstData" Grid.Row="0" BorderBrush="Black" BorderThickness="1" ItemsSource="{Binding Source={StaticResource productCollection}}" DisplayMemberPath="ProductName" /> <src:ucProduct x:Name="prodDetail" Grid.Row="1" DataContext="{Binding ElementName=lstData, Path=SelectedItem}" /> </Grid></UserControl>
The first step to making this happen is to reference the Silverlight project (SL_SyncListBoxAndUserControl_CS) where the Product and Products classes are located. I added this namespace and assigned it a namespace prefix of “src” as shown in the line below:
xmlns:src="clr-namespace:SL_SyncListBoxAndUserControl_CS"
Next, to use the data from an instance of the Products collection, you create a UserControl.Resources section in the XAML and add a tag that creates an instance of the Products class and assigns it a key of “productCollection”.
<UserControl.Resources> <src:Products x:Key="productCollection" /> </UserControl.Resources>
Next, you bind the list box to this productCollection object using the ItemsSource property. You bind the ItemsSource of the list box to the static resource named productCollection. You can then set the DisplayMemberPath attribute of the list box to any property of the Product class that you want. In the XAML below I used the ProductName property.
<ListBox x:Name="lstData" ItemsSource="{Binding Source={StaticResource productCollection}}" DisplayMemberPath="ProductName" />
You now need to create an instance of the ucProduct user contol below the list box. You do this by once again referencing the “src” namespace and typing in the name of the user control. You then set the DataContext property on this user control to a binding. The binding uses the ElementName attribute to bind to the list box name, in this case “lstData”. The Path of the data is SelectedItem. These two attributes together tell Silverlight to bind the DataContext to the selected item of the list box. That selected item is a Product object. So, once this is bound, the bindings on each text box in the user control are updated and display the current product information.
<src:ucProduct x:Name="prodDetail" DataContext="{Binding ElementName=lstData, Path=SelectedItem}" />
Summary
Once you understand the basics of data binding in XAML, you eliminate a lot code that is otherwise needed to move data into controls and out of controls back into an object. Connecting two controls together is easy by just binding using the ElementName and Path properties of the Binding markup extension. Another good tip out of this blog is use user controls and set the DataContext of the user control to have all of the data on the user control update through the bindings.
NOTE: You can download the complete sample code (in both VB and C#) at my website. http://www.pdsa.com/downloads. Choose Tips & Tricks, then "SL – Synchronize List Box Data with User Control" from the drop-down.
Good Luck with your Coding,Paul Sheriff
** SPECIAL OFFER FOR MY BLOG READERS **Visit http://www.pdsa.com/Event/Blog for a free eBook on "Fundamentals of N-Tier".
