Lập trình .net 4.0 và visual studio 2010 part 54 potx

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


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
and
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: 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
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
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: .
Josh Smith has an excellent WPF/Silverlight tutorial series:
a-guided-tour-of-wpf/.
The Silverlight toolkit contains a number of additional controls, such as docking and graphs, which
look very promising:
Apress has a couple of Silverlight books:
• Beginning Silverlight 3, by Robert Lair
• Pro Silverlight 3 in C#, by Matthew MacDonald