Create a new Silverlight application in Visual Studio 2010. Name the project BasicDataBinding, and allow Visual Studio to create a Web application project to host your application.

Edit the MainPage.xaml file to define two columns and six grid rows. Place a TextBlock in each row in column 1 and a TextBox in each row in column 2. Also add some margins and some alignment assignments to improve the layout. The code for the page follows:

<Grid x:Name="LayoutRoot" Background="White">

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>

    <TextBlock Text="Book Title"
        VerticalAlignment="Center"
        Margin="5" />
    <TextBlock Text="ISBN-13"
        VerticalAlignment="Center"
        Margin="5"
        Grid.Row="1" />

    <TextBox Text="{Binding Title}"
        Height="24"
        Margin="5"
        Grid.Column="1" />
    <TextBox Text="{Binding ISBN}"
        Height="24"
        Margin="5"
        Grid.Column="1" Grid.Row="1" />

    <TextBlock Text="Book Title"
        VerticalAlignment="Center"
        Margin="5"
        Grid.Row="2" />
    <TextBlock Text="ISBN-13"
        VerticalAlignment="Center"
        Margin="5"
        Grid.Row="3" />

<TextBox Text="{Binding Title}"
        Height="24"
        Margin="5"
        Grid.Column="1" Grid.Row="2" />
    <TextBox Text="{Binding ISBN}"
        Height="24"
        Margin="5"
        Grid.Column="1" Grid.Row="3" />

</Grid>

Next, edit the code behind, MainPage.xaml.cs. Add a Loaded event handler for the application, which will fire when the application is loaded by the client. This is accomplished with the following source code:

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();
        this.Loaded += new RoutedEventHandler(Page_Loaded);
    }
    void Page_Loaded(object sender, RoutedEventArgs e)
    {

    }
}

Now you need to add a class to define a Book object. Below the MainPage class, add the following class definition:

namespace BasicDataBinding
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(Page_Loaded);
        }

        void Page_Loaded(object sender, RoutedEventArgs e)
        {

        }
    }

public class Book
    {
        public string Title { get; set; }
        public string ISBN { get; set; }
    }
}

Now that you have Book defined, you need to create an instance of Book and set it to the LayoutRoot's DataContext, as follows:

void Page_Loaded(object sender, RoutedEventArgs e)
{
    Book b = new Book()
    {
        Title = "Beginning Silverlight 4: From Novice to Professional",
        ISBN = "978-1430229889"
    };

    this.LayoutRoot.DataContext = b;
}

When you set up binding definitions for different controls, the controls do not know where they are going to get their data. The DataContext property sets the data context for a control that is participating in data binding. The DataContext property can be set directly on the control. If a given control does not have a DataContext property specified, it will look to its parent for its data context. The nice thing about this model is that if you look above in the XAML for the page, you will see little indication of where the controls are getting their data. This provides an extreme level of code separation, allowing designers to design XAML UIs and developers to work alongside the designers, defining the specifics of how the controls are bound to their data sources.

At this point, you can go ahead and start debugging the application. If all goes well, you will see the four text boxes populated with the data from the Book's instance (see Figure 5-2).

With the application running, change the book title in the first text box to just "Beginning Silverlight," by removing the "From Novice to Professional."

You might expect that, since the third text box is bound to the same data, it will automatically update to reflect this change. However, a couple of things need to be done to get this type of two-way binding to work.

One problem is that, currently, the Book class does not support notifying bound clients of changes to its properties. In other words, when a property changes in Book, the class will not notify the TextBox instances that are bound to the class of the change. You could take care of this by creating a change event for each property. This is far from ideal; fortunately, there is an interface that a class can implement that handles this for you. This interface is known as INotifyPropertyChanged. Let's use it.

Modify the Book class definition to inherit from INotifyPropertyChanged. Notice that when you inherit from INotifyPropertyChanged, you need to add using System.ComponentModel. Luckily, Visual Studio will help you with this, as shown in Figure 5-3.

Figure 5.3. Visual Studio assists when you need to add the System.ComponentModel namespace.

Next, you can let Visual Studio do some more work for you. After adding the using System.ComponentModel statement, right-click INotifyPropertyChanged and select Implement Interface

Figure 5.4. Visual Studio also assists in implementing the INotifiyPropertyChanged interface.

Now Visual Studio has added a new public event to your class:

public class Book : INotifyPropertyChanged
{
    public string Title { get; set; }
    public string ISBN { get; set; }

    public event PropertyChangedEventHandler PropertyChanged;
}

Next, you need to create a convenience method that will fire the PropertyChanged event. Call it FirePropertyChanged, as shown in the following code:

public class Book : INotifyPropertyChanged
{
    public string Title { get; set; }
    public string ISBN { get; set; }

    public event PropertyChangedEventHandler PropertyChanged;

    void FirePropertyChanged(string property)
    {
        if (PropertyChanged != null)
        {

PropertyChanged(this,
                new PropertyChangedEventArgs(property));
        }
    }
}

Now you need to extend the simplified properties by adding private members and full get/set definitions to define the get and set operations, as shown in the following code. The get is just like a normal get operation, where you simply return the internal member value. For the set, you first set the internal member value, and then call the FirePropertyChanged method, passing it the name of the property.

public class Book : INotifyPropertyChanged
{
    private string _title;
    private string _isbn;

    public string Title
    {
        get
        {
            return _title;
        }
        set
        {
            _title = value;
            FirePropertyChanged("Title");
        }
    }

    public string ISBN
    {
        get
        {
            return _isbn;
        }
        set
        {
            _isbn = value;
            FirePropertyChanged("ISBN");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

void FirePropertyChanged(string property)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this,
                new PropertyChangedEventArgs(property));
        }
    }
}

With this completed, your class is set up to notify bound clients of changes to the Title and ISBN properties. But you still need to take one more step. By default, when you bind a source to a target, the BindingMode is set to OneWay binding, which means that the source will send the data to the target, but the target will not send data changes back to the source. In order to get the target to update the source, you need to implement two-way (TwoWay) binding.

To change to two-way binding, add the Mode=TwoWay parameter when defining the {Binding} on a control, as follows:

<TextBlock Text="Book Title"
    VerticalAlignment="Center"
    Margin="5" />
<TextBlock Text="ISBN-13"
    VerticalAlignment="Center"
    Margin="5"
    Grid.Row="1" />

<TextBox Text="{Binding Title, Mode=TwoWay}"
    Height="24"
    Margin="5"
    Grid.Column="1" />
<TextBox Text="{Binding ISBN, Mode=TwoWay}"
    Height="24"
    Margin="5"
    Grid.Column="1" Grid.Row="1" />

<TextBlock Text="Book Title"
    VerticalAlignment="Center"
    Margin="5"
    Grid.Row="2" />
<TextBlock Text="ISBN-13"

VerticalAlignment="Center"
    Margin="5"
    Grid.Row="3" />

<TextBox Text="{Binding Title, Mode=TwoWay}"
    Height="24"
    Margin="5"
    Grid.Column="1" Grid.Row="2" />
<TextBox Text="{Binding ISBN, Mode=TwoWay}"
    Height="24"
    Margin="5"
    Grid.Column="1" Grid.Row="3" />

Rebuild and run your application. Update any of the fields, and leave the focus on the control. You'll see that the two-way binding is triggered, and the corresponding field is also updated, as shown in Figure 5-5.

Figure 5.5. Two-way binding in action

Create a new Silverlight application in Visual Studio 2010. Name the project ElementBinding, and allow Visual Studio to create a Web application project to host your application.

Edit the MainPage.xaml file to add a StackPanel to the root Grid. Place a ToggleButton and CheckBox named EnableButton within that StackPanel so the ToggleButton appears above the CheckBox. Add a margin of 20 on the StackPanel and 5 on the ToggleButton and CheckBox to add some spacing between the controls. The code for the page follows:

<Grid x:Name="LayoutRoot" Background="White">
    <StackPanel Margin="20">

        <ToggleButton Margin="5" Content="Click to Toggle" />

        <CheckBox
            x:Name="EnableButton" IsChecked="true"
            Margin="5" Content="Enable Button" />

    </StackPanel>
</Grid>

Next, we need to bind the ToggleButton's IsEnabled property to the CheckBox's IsChecked property. We will do this with one way binding as described earlier in this chapter, and we will set the ElementName to EnableButton, which is the name we gave our CheckBox. The updated source code should now look like the following:

<Grid x:Name="LayoutRoot" Background="White">
    <StackPanel Margin="20">

        <ToggleButton
            Margin="5" Content="Click to Toggle"
            IsEnabled="{Binding IsChecked, Mode=OneWay,
            ElementName=EnableButton}" />

        <CheckBox
            x:Name="EnableButton" IsChecked="true"
            Margin="5" Content="Enable Button" />

    </StackPanel>
</Grid>

That is it! No coding is required for this demo. Run the sample and will see that the ToggleButton is enabled, as shown in Figure 5-6.

Figure 5.6. Element binding example with ToggleButton enabled

Now uncheck the Enable Button checkbox and you will see that the ToggleButton is no longer enabled, as shown in Figure 5-7.

Figure 5.7. Element binding example with ToggleButton disabled

Create a new Silverlight application in Visual Studio 2010. Name the project SimpleDataGrid, and have Visual Studio create a hosting web application for you.

Add the DataGrid to your application. To do this, simply add the DataGrid to the root Grid in your XAML, and set the Margin property to 10 to get some spacing around the grid. In addition, give the DataGrid the name grid. Note that, by default, the Grid's AutoGenerateColumns property is set to true. If you were going to define the columns manually, you would want to set this property to false. However, since you want the grid to create the columns automatically, you can simply omit the property. The DataGrid definition follows:

<Grid x:Name="LayoutRoot" Background="White">
    <sdk:DataGrid Name="grid" Margin="10" />
</Grid>

xmlns:sdk=http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk

Next, build the class that will be bound to the DataGrid. Call the class GridData for simplicity, and give it three properties: Name (string), Age (int), and Male (Boolean). Also for simplicity, create a static method that will return an ObservableCollection (requires adding a using clause for System.Collections.ObjectModel) containing some sample data that will be bound to the grid. In addition, define the class directly in the MainPage.xaml.cs file. This is not really a good idea in the real world, but for the sake of an example, it will work just fine. Ideally, you will want to define your classes in separate files or even in completely separate projects and assemblies. The code for the GridData class follows:

namespace SimpleDataGrid
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }

    public class GridData
    {
        public string Name { get; set; }
        public int Age { get; set; }
        public bool Male { get; set; }

        public static ObservableCollection<GridData> GetData()
        {
            ObservableCollection<GridData> data =
                new ObservableCollection<GridData>();

data.Add(new GridData()
            {
                Name = "John Doe",
                Age = 30,
                Male = true
            });

            data.Add(new GridData()
            {
                Name = "Jane Doe",
                Age = 32,
                Male = false
            });

            data.Add(new GridData()
            {
                Name = "Jason Smith",
                Age = 54,
                Male = true
            });

            data.Add(new GridData()
            {
                Name = "Kayli Jayne",
                Age = 25,
                Male = false
            });

            return data;
        }
    }
}

Now that you have the XAML and the class defined, you can wire them up. To do this, first create an event handler for the Loaded event of the page, as follows:

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();
        this.Loaded += new RoutedEventHandler(Page_Loaded);
    }

    void Page_Loaded(object sender, RoutedEventArgs e)
    {

    }
}

When the page is loaded, you want to call GetData() from the GridData class and bind that to the DataGrid's ItemsSource property, as follows:

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();
        this.Loaded += new RoutedEventHandler(Page_Loaded);
    }

    void Page_Loaded(object sender, RoutedEventArgs e)
    {
        this.grid.ItemsSource = GridData.GetData();
    }
}

Build and run the application. If all is well, you should see the DataGrid displayed (see Figure 5-8).

Create a new Silverlight application called DataGridCustomColumns. Allow Visual Studio to create a Web Site project to host the application.

After the project is loaded, right-click the DataGridCustomColumns project and select Add New Item. In the Add New Item dialog box, select Code File for the template, and name the class StartingHands.cs, as shown in Figure 5-13. Click the Add button to add the class to the project.

Figure 5.13. Adding a new class to the Silverlight project

Now define the StartingHands class. The class will contain four properties: Nickname (string), Notes (string), Card1 (string), and Card2 (string). Also create a static method in the class called GetHands(), which returns an ObservableCollection of StartingHands instances. The code follows:

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

using System.Collections.ObjectModel;

namespace DataGridCustomColumns
{
    public class StartingHands
    {
        public string Nickname { get; set; }
        public string Notes { get; set; }
        public string Card1 { get; set; }
        public string Card2 { get; set; }

        public static ObservableCollection<StartingHands> GetHands()
        {
            ObservableCollection<StartingHands> hands =
            new ObservableCollection<StartingHands>();

            hands.Add(
                new StartingHands()
                {
                    Nickname = "Big Slick",
                    Notes = "Also referred to as Anna Kournikova.",
                    Card1 = "As",
                    Card2 = "Ks"
                });

            hands.Add(
            new StartingHands()
            {
                Nickname = "Pocket Rockets",
                Notes = "Also referred to as Bullets.",
                Card1 = "As",
                Card2 = "Ad"
            });

            hands.Add(
                new StartingHands()
                {
                    Nickname = "Blackjack",
                    Notes = "The casino game blackjack.",
                    Card1 = "As",
                    Card2 = "Js"
                });

            hands.Add(
                new StartingHands()
                {
                    Nickname = "Cowboys",
                    Notes = "Also referred to as King Kong",
                    Card1 = "Ks",
                    Card2 = "Kd"
                });

hands.Add(
                new StartingHands()
                {
                    Nickname = "Doyle Brunson",
                    Notes = "Named after poker great Doyle Brunson",
                    Card1 = "Ts",
                    Card2 = "2s"
                });


            return hands;
        }
    }
}

Now that the class is built, in the MainPage.xaml file, change the width of the UserControl to be 500 and add a DataGrid named grdData to the root Grid by double-clicking the DataGrid control in the Toolbox. Add a 15-pixel margin around the DataGrid for some spacing, and set the AutoGenerateColumns property to False. The code follows:

<Grid x:Name="LayoutRoot" Background="White">
    <sdk:DataGrid AutoGenerateColumns="False" Name="grdData" />
</Grid>

Next, define the columns in the DataGrid. To do this, add the DataGrid.Columns collection, as follows:

<Grid x:Name="LayoutRoot" Background="White">
    <sdk:DataGrid AutoGenerateColumns="False" Name="grdData">
        <sdk:DataGrid.Columns>

        </sdk:DataGrid.Columns>
    </sdk:DataGrid>
</Grid>

Referring back to Figure 5-12, the first column in the Grid contains the two cards in the hand. To build this, you use a DataGridTemplateColumn. Within the DataGridTemplateColumn, add a CellTemplate containing a Grid with two columns, each containing a Border, Rectangle, and TextBlock, which will overlap each other. Bind the two TextBlock controls to the Card1 and Card2 properties from the data source. Enter the following code:

<sdk:DataGrid AutoGenerateColumns="False" Name="grdData">
    <sdk:DataGrid.Columns>
        <sdk:DataGridTemplateColumn Header="Hand">
            <sdk:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>

<ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Border
                            Margin="2" CornerRadius="4"
                            BorderBrush="Black" BorderThickness="1" />
                        <Rectangle
                            Margin="4" Fill="White" Grid.Column="0" />
                        <Border
                            Margin="2" CornerRadius="4" BorderBrush="Black"
                            BorderThickness="1" Grid.Column="1" />
                        <Rectangl
                            Margin="4" Fill="White" Grid.Column="1" />
                        <TextBlock
                            Text="{Binding Card1}" HorizontalAlignment="Center"
                            VerticalAlignment="Center" Grid.Column="0" />
                        <TextBlock
                            Text="{Binding Card2}" HorizontalAlignment="Center"
                            VerticalAlignment="Center" Grid.Column="1" />
                    </Grid>
                </DataTemplate>
            </sdk:DataGridTemplateColumn.CellTemplate>
        </sdk:DataGridTemplateColumn>
    </sdk:DataGrid.Columns>
</sdk:DataGrid>

Again, referring back to Figure 5-12, the next two columns contain the nickname of the starting hand and notes about the starting hand. To implement this, use two DataGridTextColumn columns. Set the Headers of the columns to Nickname and Notes accordingly.

<sdk:DataGrid AutoGenerateColumns="False" Name="grdData">
    <sdk:DataGrid.Columns>
        <sdk:DataGridTemplateColumn Header="Hand">
            <sdk:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Border
                            Margin="2" CornerRadius="4"
                            BorderBrush="Black" BorderThickness="1" />
                        <Rectangle
                            Margin="4" Fill="White" Grid.Column="0" />
                        <Border
                            Margin="2" CornerRadius="4" BorderBrush="Black"
                            BorderThickness="1" Grid.Column="1" />
                        <Rectangle
                            Margin="4" Fill="White" Grid.Column="1" />

<TextBlock
                            Text="{Binding Card1}" HorizontalAlignment="Center"
                            VerticalAlignment="Center" Grid.Column="0" />
                        <TextBlock
                            Text="{Binding Card2}" HorizontalAlignment="Center"
                            VerticalAlignment="Center" Grid.Column="1" />
                    </Grid>
                </DataTemplate>
            </sdk:DataGridTemplateColumn.CellTemplate>
        </sdk:DataGridTemplateColumn>
        <sdk:DataGridTextColumn
            Header="Nickname"
            Binding="{Binding Nickname}" />
        <sdk:DataGridTextColumn
            Header="Notes"
            Binding="{Binding Notes}" />
    </sdk:DataGrid.Columns>
</sdk:DataGrid>

Finally, wire up the controls to the data source. To do this, navigate to the MainPage.xaml.cs file and add an event handler to the Page Loaded event. Within that Loaded event, simply set the DataGrid's ItemsSource property equal to the return value of the StartingHands.GetHands() static method. Here's the code:

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();
        this.Loaded += new RoutedEventHandler(Page_Loaded);
    }

    void Page_Loaded(object sender, RoutedEventArgs e)
    {
        this.grdData.ItemsSource = StartingHands.GetHands();
    }
}

Compile and run your application. If all goes well, your application should appear, as shown earlier in Figure 5-12.

Start out by creating a new Silverlight application called ListBoxCustom and allow Visual Studio to create a hosting web site.

You will use the same class that you built in the earlier DataGrid exercise. Right-click the Silverlight project, choose Add Existing Item, and browse to StartingHands.cs to add that class to the project.

When you add the existing StartingHands.cs class, it is in a different namespace than your current project. You can reference that namespace by adding a using statement at the top of your Silverlight application, or you can just change the namespace, as follows:

namespace ListBoxCustom
{
    public class StartingHands
    {
        public string Nickname { get; set; }
        public string Notes { get; set; }

public string Card1 { get; set; }
        public string Card2 { get; set; }

        ...
    }
}

Next, you need to define the ListBox's ItemTemplate. The ItemTemplate will contain a horizontal-oriented StackPanel including the grid to display the two cards. It will also include a nested vertical-oriented StackPanel that will contain two TextBlock controls to display the Nickname and Notes data. Here is the code:

<Grid x:Name="LayoutRoot" Background="White">
    <ListBox Margin="10" x:Name="list">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Margin="5" Orientation="Horizontal">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>

                        <Border
                            Margin="2" CornerRadius="4"
                            BorderBrush="Black" BorderThickness="1" />
                        <Rectangle Margin="4" Fill="White"
                            Grid.Column="0" Width="20" />
                        <Border
                            Margin="2" CornerRadius="4" BorderBrush="Black"
                            BorderThickness="1" Grid.Column="1" />
                        <Rectangle Margin="4" Fill="White"
                            Grid.Column="1" Width="20" />
                        <TextBlock
                            Text="{Binding Card1}" HorizontalAlignment="Center"
                            VerticalAlignment="Center" Grid.Column="0" />
                        <TextBlock
                            Text="{Binding Card2}" HorizontalAlignment="Center"
                            VerticalAlignment="Center" Grid.Column="1" />
                    </Grid>

                    <StackPanel Orientation="Vertical">
                        <TextBlock
                            Text="{Binding Nickname}"
                            FontSize="16"
                            FontWeight="Bold" />
                        <TextBlock
                            Text="{Binding Notes}" />
                    </StackPanel>

</StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

The only thing left to do is to wire up the ListBox to the data source. To do this, navigate to the page.xaml.cs code behind, and add an event handler for the Page Loaded event. Then, within that Loaded event handler, add the following code to set the ListBox's ItemsSource to the return value from the StartingHands.GetHands() method, as you did earlier in the DataGrid example.

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();
        this.Loaded += new RoutedEventHandler(Page_Loaded);
    }

    void Page_Loaded(object sender, RoutedEventArgs e)
    {
        list.ItemsSource = StartingHands.GetHands();
    }
}

Run the application. If all goes well, you will see the ListBox shown in Figure 5-16.