So hot on the heels of the announcement of Silverlight 2 Beta 1 at Mix08 I wanted to show you two of the coolest features (in my opinion) available to you now to play with. New to the feature set of Silverlight 2 is DataBinding and Observable Collections. For those of you who are familiar with WPF you will be well aware of the benefits of the two features mentioned. For those not, there is a nice article here that explains in more detail.
I really wanted to explore these in Silverlight so I've produced a simple code example that shows the use of these two features in the Beta 1 release. I really think it gives a very powerful indication of the direction of Silverlight and also the possibilities for creating truly Rich Internet Applications. It also demonstrates the goal of the product team to really have a WPF feature set in Silverlight.
The demo contains an ItemsControl that is declaratively data bound to a ObservableCollection of strings. The example then shows that directly manipulating the collection (adding/removing items) is automagically reflected in the UI without the need to touch any of the user interface or binding mechanism. If you've lived in the world of AJAX development you should immediately see the power of this compared to a trying to do this kind of behaviour through JavaScript.
So we start by defining a StackPanel containing an ItemsControl which will display our collection and apply the Data Binding syntax in our Xaml.
<UserControl x:Class="BindingAndCollectionsEx.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<StackPanel>
<ItemsControl x:Name="itemsControl">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<Button Width="100" Height="50" Background="RoyalBlue" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Content="Click" />
</StackPanel>
</UserControl>
Then in our code behind we create our collection and set the ItemsControl source to the collection and the declare the mouse click event to add items to the collection.
public partial class Page : UserControl
{
ObservableCollection<string> collection = new ObservableCollection<string>();
public Page()
{
InitializeComponent();
this.Loaded += new RoutedEventHandler(Page_Loaded);
}
/// <summary>
/// Handles the Loaded event of the Page control.
/// </summary>
/// <param name="sender">The source of the event.</param>
/// <param name="e">The <see cref="System.Windows.RoutedEventArgs"/> instance containing the event data.</param>
void Page_Loaded(object sender, RoutedEventArgs e)
{
this.collection.Add("One");
this.collection.Add("Two");
this.collection.Add("Three");
this.collection.Add("Four");
this.collection.Add("Five");
this.itemsControl.ItemsSource = collection;
}
/// <summary>
/// Handles the MouseLeftButtonDown event of the Button control.
/// </summary>
/// <param name="sender">The source of the event.</param>
/// <param name="e">The <see cref="System.Windows.Input.MouseButtonEventArgs"/> instance containing the event data.</param>
private void Rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
collection.Remove("Five");
collection.Insert(1, "--> inserted");
collection.Add("--> added");
}
}
If you run the project you will see the string collection displayed that is bound to the ItemsCollection control and a button.
Pressing the button will remove an item, insert an item at the start and add an item at the end. Notice you do nothing to the UI, all you are doing is manipulating the ObservableCollection that is bound. The result is the UI reflecting the changes in the collection:
Powerful stuff I'm sure you will agree!!
