CHAPTER 14 SILVERLIGHT INTRODUCTION 359 DataBinding Modes In the preceding example, you bound a TextBox to the Title property of Movie and defined the binding mode as one way: <TextBox x:Name="txtDeclaration" Width="300" Text="{Binding Title, Mode=OneWay}" Height="20" ></TextBox> Silverlight offers three binding modes: • OneTime: This is the lightweight option and should be used if the value will never change from what it is initialized as. • OneWay: If the item the object is bound to is changed, the bound property will be updated as well. If you change the bound property, it will not affect the object it is bound to. • TwoWay: Like OneWay binding, but any changes to the bound property will also alter the bound object. Data Binding and Dependency Properties As mentioned earlier, data binding uses dependency properties to maintain the relationship between the object and datasource. If you change an item that is databound then any other controls bound to the data item will change as well. Let’s create an example to demonstrate this. 1. Open ~/DataBinding/DataBindingTest.xaml. 2. Add the following XAML after the TextBox that has the x:name set to txtDeclaration: <TextBlock>Change an object in list:</TextBlock> <Button x:Name="cmdChangeTitle" Width="100" Height="20" Content="Change Title"></Button> 3. Open DataBindingTest.xaml.cs and add a click event handler: this.cmdChangeTitle.Click+=new RoutedEventHandler(cmdChangeTitle_Click); 4. Add a method to handle the click: void cmdChangeTitle_Click(object sender, RoutedEventArgs e) { //Change an item in the list MoviesList[0].Title = "Title Changed"; } 5. Press F5 to run the application. Click the button to change the movie title. The text box that was bound to this item will then change. Note that the contents of the text box that is bound was automatically updated when you changed the class it was bound to. CHAPTER 14 SILVERLIGHT INTRODUCTION 360 Two-Way Binding You will now create an example to demonstrate two-way data binding. 1. Open DataBindingTest.xaml. 2. Add the following XAML after the cmdChangeTitle button (note that the binding mode is set to TwoWay now): <TextBlock>Two way binding:</TextBlock> <TextBox x:Name="txtTwoWay" Width="300" Text="{Binding Title, Mode=TwoWay}" Height="20" > </TextBox> 3. Open DataBindingTest.xaml.cs. In DataBindingTest_Loaded()()add the following code (after the call to PopulateItems()) to bind the text box txtTwoWay to the first item in the movie list: //Set up two way binding txtTwoWay.DataContext = MoviesList[0]; 4. Press F5 to run your application. 5. Click the DataBinding button and select the text box labelled txtTwoWay. 6. Change the text to “The Terminator 2”. 7. Click another text box. Notice how all the other items bound to this movie were updated. The other bound items were updated in the example when the focus changed to another control. But you don’t even need to change the item’s focus because Silverlight will update other bound properties automatically after about 20 seconds. Binding ListBox You will now bind a ListBox: 1. Open DataBindingTest.xaml and add the following XAML (note the use of the DisplayMemberPath property, which tells it which item to bind to; in this case Title): <TextBlock>List of items:</TextBlock> <ListBox x:Name="lstItems" Width="300" DisplayMemberPath="Title" Height="100"></ListBox> 2. Open DataBindingTest.xaml.cs. In DataBindingTest_Loaded() after the call to PopulateItems(), add the following: //Bind listbox lstItems.ItemsSource = MoviesList; 3. Press F5 to run the application. You should see a list box populated with the movies in the list. CHAPTER 14 SILVERLIGHT INTRODUCTION 361 DataTemplates Silverlight supports templating for data bound items. Let’s see a simple example of templating: 1. Open DataBindingTest.xaml and add the following after the Listbox lstItems: <TextBlock>List of items with data template:</TextBlock> <ListBox x:Name="lstItemsWithTemplate" Width="300" Height="100"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding Title}"></TextBlock> <TextBlock Text="{Binding Length}"></TextBlock> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> 2. In DataBindingTest_Loaded()(), bind lstItemsWithTemplate: //Bind listbox with template lstItemsWithTemplate.ItemsSource = MoviesList; 3. Press F5 to run your application and click the DataBinding button. You should now see a list box with the movie's title and length displayed. DataGrid One of the most-used controls in ASP.NET is undoubtedly the DataGrid control. Silverlight has its own version of DataGrid that contains some great built-in functionality such as the following: • Column ordering • Two-way data binding • Column resizing • Column positioning • Highlighting selected rows Let's look at the DataGrid control in Silverlight: 1. Open DataBindingTest.xaml and drag a data grid from the toolbox to beneath the ListBox lstItemsWithTemplate: <Data:DataGrid x:Name="dgSimple"></Data:DataGrid> 2. In DataBindingTest_Loaded() somewhere after the call to PopulateItems(), bind the DataGrid to the list of movies: dgSimple.ItemsSource = MoviesList; 3. Press F5 to run the application and click the Data Binding button. You should see a screen like Figure 14-12. CHAPTER 14 SILVERLIGHT INTRODUCTION 362 Figure 14-12. Silverlight DataGrid In the previous example, you let Silverlight automatically determine the columns that would be bound in the DataGrid. Normally, however, you will want more control over how the data is displayedfor which you will use DataTemplates. Let’s modify the DataGrid to use a template: 1. Open DataBindingTest.xaml and add the following code beneath the dgSimple DataGrid: <Data:DataGrid x:Name="dgSpecify" AutoGenerateColumns="False"> <Data:DataGrid.Columns> <Data:DataGridTemplateColumn> <Data:DataGridTemplateColumn.CellTemplate> <DataTemplate> <TextBlock Text="{Binding Length}" /> </DataTemplate> </Data:DataGridTemplateColumn.CellTemplate> </Data:DataGridTemplateColumn> <Data:DataGridTextColumn Binding="{Binding Title, Mode=TwoWay}"> </Data:DataGridTextColumn> </Data:DataGrid.Columns> </Data:DataGrid> CHAPTER 14 SILVERLIGHT INTRODUCTION 363 2. Open DataBindingTest.xaml.cs. In DataBindingTest_Loaded(), add the following after the call to PopulateItems(): dgSpecify.ItemsSource = MoviesList; 3. Press F5 to run the application and then click the Data Binding button. Note that you switched the order of the columns around (not very creative, but you get the idea). Network Communications Normally in an ASP.NET application you retrieve data from the database server using the System.Data classes. In Silverlight, because your application is running on the user's machine you cannot (and should not) connect directly to your SQL Server. Data is instead retrieved using calls to a web service. When retrieving data, you don’t want your application to pause execution, so all web service calls from Silverlight must be made asynchronously. For more information about Silverlight and communications, please refer to http://silverlight.net/learn/videocat.aspx?cat=2#HDI2WebServices and http://www.west-wind.com/weblog/posts/546995.aspx. Summary One of the greatest aspects of Silverlight is its flexibility. If an existing control doesn’t provide the functionality you required then you can customize it to do so (although the Silverlight toolkit is definitely worth a look first: http://www.codeplex.com/Silverlight). All Silverlight controls can be broken down into primitive shapes such as rectangles and ellipses that can then be modified. Think more about the functionality that the control provides more than what it looks like. At a presentation I attended at VBug (a UK user group), EMC/Conchango suggested adapting radio buttons to create a tab control. The tab control is perfect for this situation because only one can be selected at a time. For more information on this subject please refer to http://silverlight.net/quickstarts/ controltemplates.aspx. Some of the things to consider about Silverlight include the following: • It utilizes the .NET framework (take that, Adobe Flash!). • It makes use of existing .NET development skills. • It has excellent media playback/streaming capabilities. • It creates cross-platform .NET applications. • It can be a better choice for creating a complex UI than JavaScript/AJAX. • It has good third-party control support already. • Silverlight/HTML integration has interesting possibilities. • Because Silverlight is based on WPF, it is possible to convert Silverlight applications to the desktop (also consider Silverlight’s offline support, as discussed in Chapter 15). • It is supported in some mobile devices. CHAPTER 14 SILVERLIGHT INTRODUCTION 364 Finally, there are some considerations when choosing Silverlight: • Silverlight requires a separate plug-in and is available on most (but not all) major operating systems. (Wikipedia has a good list at http://en.wikipedia.org/ wiki/Silverlight.) • Sandboxed hosting environments could pose some problems. • No printing or support for external devices (until Silverlight 4), which makes creating a line of business applications difficult. • Some layout issues across different platforms. • Adoption is lower than Flash, although this is changing. • Silverlight files tend to be larger than Flash. • Current web site design trends prefer clean HTML sites rather than slower Flash/Silverlight applications. • XAML has a steep-ish learning curve, but is becoming an important language within the .NET sphere. • Silverlight is running on the client’s browser, so it is open to manipulation. Do not store any sensitive data in the plug-in and carry all validation out on the server side. Further Reading The next topics you will probably want to look at in your Silverlight studies include the following: • Customization of Silverlight controls • Silverlight network communications Microsoft has produced a very good Silverlight site that contains a huge number of examples and video tutorials: http://www.silverlight.net. Josh Smith has an excellent WPF/Silverlight tutorial series: http://joshsmithonwpf.wordpress.com/ a-guided-tour-of-wpf/. The Silverlight toolkit contains a number of additional controls, such as docking and graphs, which look very promising: http://www.codeplex.com/Silverlight. Apress has a couple of Silverlight books: • Beginning Silverlight 3, by Robert Lair • Pro Silverlight 3 in C#, by Matthew MacDonald . x:Name="txtDeclaration" Width=" 300 " Text="{Binding Title, Mode=OneWay}" Height=" 20& quot; ></TextBox> Silverlight offers three binding modes: • OneTime: This is the lightweight. items:</TextBlock> <ListBox x:Name="lstItems" Width=" 300 " DisplayMemberPath="Title" Height=" 100 "></ListBox> 2. Open DataBindingTest.xaml.cs. In. template:</TextBlock> <ListBox x:Name="lstItemsWithTemplate" Width=" 300 " Height=" 100 "> <ListBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal">