The DataContext property is inheritable by child elements in the Silverlight application. If you have several controls that are bound to the same data source, then you can group those controls in a parent container such as a Canvas or Grid and then set the DataContext property of the parent. The data context flows down to the children without the need to set the property for each child.

Inside the Page() constructor, the doUpdate() and doSwitch() event handlers are attached to the UpdateBtn and SwitchBtn controls. Inside the doUpdate() handler, the name of the current Contact object is set to the value of nameBox.Text. When this value is set, the binding is updated by the PropertyChanged() event handler in the class, and the controls are updated. Inside the doSwitch() handler, the current DataContext is switched between the personA and personB objects allowing you to see how changes to the context affect the value of control properties. The results of the code in Listings 15.5 and 15.6 are shown in Figure 15.3. When you change the name in the text box and click Update, the title is changed as well. When you click Switch, the data context is switched between the two Contact objects and the controls are updated accordingly.

C# Code That Implements a Contact Class That Is Used as a Data Source and Provides Functionality to Update and Switch the DataContext of Controls

using using using using System; System.Collections.Generic; System.Windows; System.Windows.Controls;

(continued)

using System.ComponentModel; namespace DataBindingApp { public partial class Page : UserControl { Contact personA, personB, current; Boolean isCurrentA; public Page() { InitializeComponent(); initData(); setContext(personA); isCurrentA = true; UpdateBtn.Click += new RoutedEventHandler(doUpdate); SwitchBtn.Click += new RoutedEventHandler(doSwitch); } void initData() { personA = new Contact(); personA.Name = Mike ; personA.Numbers = new List<string>() { 111-222-333 , 444-555-6666 }; personB = new Contact(); personB.Name = Ted ; personB.Numbers = new List<string>() { 123-456-7890 , 098-765-4321 }; } void setContext(Contact c) { current = c; LayoutRoot.DataContext = c; } void doUpdate(object sender, RoutedEventArgs e) { current.Name = nameBox.Text; } void doSwitch(object sender, RoutedEventArgs e) { if (isCurrentA) { setContext(personB); isCurrentA = false; }

else { setContext(personA); isCurrentA = true; } } } public class Contact : INotifyPropertyChanged { private string ContactName; private List<string> ContactNumbers; public event PropertyChangedEventHandler PropertyChanged; public Contact() { } public void NotifyPropertyChanged(string property) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(property)); } } public string Name { get { return ContactName; } set { ContactName = value; NotifyPropertyChanged( Name ); } } public List<string> Numbers { get { return ContactNumbers; } set { ContactNumbers = value; NotifyPropertyChanged( Numbers ); } } } }

FIGURE 15.3 Silverlight application that binds data from an object to a TextBlock, TextBox, and List control

The DataGrid Silverlight control is extremely powerful and dynamic. It provides you with the ability to display a list of objects in tabular form in your Silverlight applications. The DataGrid control can handle setting up columns and rows and presentation of the data. It also provides a rich set of event handlers and properties that allow you to interact with the control from managed code. To add a DataGrid control to your Silverlight applications, add the following namespace to the XAML file that will host the control:

After you add the Data namespace to your application, you can add a DataGrid control to the XAML file. This is done by adding a definition for the DataGrid control in the XAML file and setting the properties necessary for the functionality you desire. For example, the following code defines a DataGrid that sets the AutoGenerateColumns, RowBackground, AlternateRowBackground, GridlinesVisiblity, HeadersVisibility, Height, and Width properties.

<my:DataGrid x:Name= dGrid AutoGenerateColumns= True RowBackground= White AlternatingRowBackground= LightGray GridlinesVisibility= Horizontal HeadersVisibility= Column Height= 180 Width= 380 />