Binding ListBox in VB.NET

Generate QR Code in VB.NET 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.

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.

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.

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 displayed for 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>

Open DataBindingTest.xaml.cs. In DataBindingTest_Loaded(), add the following after the call to PopulateItems(): dgSpecify.ItemsSource = MoviesList;

Note that you switched the order of the columns around (not very creative, but you get the idea).

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 15). It is supported in some mobile devices.