Walkthrough: Creating a Data Binding by Using the Silverlight Designer


This walkthrough shows you how to use the Silverlight Designer for Visual Studio 2010 to create data bindings that connect data to a control.

In this walkthrough, you perform the following tasks:

  • Create the project.

  • Create a Student class and a StudentList collection.

  • Create a ListBox control that displays the StudentList collection through a data binding.

  • Create a custom DataTemplate which uses an IValueConverter to customize the appearance of a Boolean property.

When you are finished, you will have a list box that is bound to a list of students. For each list box item, a colored square is displayed that indicates whether the student is currently enrolled.

Note Note:

To bind to data from a data connection, use the Data Sources window. For more information, see Binding Silverlight Controls to Data in Visual Studio.

You need the following components to complete this walkthrough:

  • Visual Studio 2010.

The first step is to create the Silverlight Application project and add the data source. The data source is an ObservableCollection<T> that contains instances of a simple Student class. The project also has an IValueConverter and a custom DataTemplate to style the ListBox control.

To create the project

  1. Create a new Silverlight Application project in Visual Basic or Visual C# named DataBindingDemo. For more information, see How to: Create a New Silverlight Project.

    MainPage.xaml opens in the Silverlight Designer.

  2. Add a new class named Student to the project. For more information, see How to: Add New Project Items.

  3. Replace the automatically generated code with the following code.

    using System.Collections.ObjectModel;
    namespace DataBindingDemo
        // Student is a simple class that stores a name and an
        // IsEnrolled value.
        public class Student 
            // The default constructor is required for creation from XAML.
            public Student()
            // The StudentName property is a string that holds the first and last name.
            public string StudentName { get; set; }
            // The IsEnrolled property gets or sets a value indicating whether
            // the student is currently enrolled.
            public bool IsEnrolled { get; set; }
        // The StudentList collection is declared for convenience,
        // because declaring generic types in XAML is inconvenient.
        public class StudentList : ObservableCollection<Student>
  4. Add a new class named BoolToBrushConverter to the project.

  5. Replace the automatically generated code with the following code.

    using System;
    using System.Globalization;
    using System.Windows.Data;
    using System.Windows.Media;
    namespace DataBindingDemo
        // The BoolToBrushConverter class is a value converter
        // that helps to bind a bool value to a brush property.
        public class BoolToBrushConverter : IValueConverter
            public object Convert(
                object value, 
                Type targetType, 
                object parameter, 
                CultureInfo culture)
                Brush b = null;
                // Only apply the conversion if value is assigned and
                // is of type bool.
                if (value != null &&
                    value.GetType() == typeof(bool))
                    // true is painted with a green brush, 
                    // false with a red brush.
                    b = (bool)value ? 
                        new SolidColorBrush(Colors.Green) : 
                        new SolidColorBrush(Colors.Red);
                return b;
            // Not used.
            public object ConvertBack(
                object value, 
                Type targetType, 
                object parameter, 
                CultureInfo culture)
                return null;
  6. Build the project.

  7. Open MainPage.xaml in the Silverlight Designer.

  8. Replace the automatically generated XAML with the following XAML.

    <UserControl x:Class="DataBindingDemo.MainPage"
      d:DesignHeight="300" d:DesignWidth="400">
        <local:StudentList x:Key="studentCollection" >
          <local:Student StudentName="Syed Abbas" IsEnrolled="false" />
          <local:Student StudentName="Lori Kane" IsEnrolled="true" />
          <local:Student StudentName="Steve Masters" IsEnrolled="false" />
          <local:Student StudentName="Tai Yee" IsEnrolled="true" />
          <local:Student StudentName="Brenda Diaz" IsEnrolled="true" />
        <local:BoolToBrushConverter x:Key="boolToBrushConverter" />
        <DataTemplate x:Key="listBoxTemplate">
          <StackPanel Orientation="Horizontal" >
            <Rectangle Fill="{Binding Path=IsEnrolled, 
              Converter={StaticResource boolToBrushConverter}}"
              Height="10" Width="10" Margin="0,0,5,0" />
            <TextBlock Text="{Binding Path=StudentName}" />
      <Grid x:Name="LayoutRoot" Background="White">

You use a Binding to display the studentCollection in the ListBox control. The Silverlight Designer enables data binding without writing any code or XAML.

To bind the ListBox to the data source

  1. From the Toolbox, drag a ListBox control onto the design surface.

  2. In the Properties window, scroll to the ItemsSource property.

  3. At the edge of the left column, click the property marker (property marker).

    A menu appears.

    Tip Tip:

    You can also right-click the row to display the menu.

  4. Click Apply Data Binding.

    The data binding builder appears.

    data binding builder
  5. On the Source pane, in the left panel, click StaticResource.

  6. In the middle panel, click UserControl.Resources.

  7. In the right panel, click studentCollection.

    The ListBox control is populated with items.

  8. In the Properties window, scroll to the DisplayMemberPath property and set its value to StudentName.

    The ListBox control displays the StudentName property for each Student instance in studentCollection.

    ListBox data binding

You create a DataTemplate to format your data in the ListBox control. In this project, the DataTemplate uses a value converter to display a Boolean property as a colored square.

To create a data binding with a value converter

  1. In the Properties window, clear the DisplayMemberPath property.

  2. Scroll to the ItemTemplate property.

  3. Click the property marker (property marker).

  4. Click Apply Resource.

    The resource picker appears.

  5. In the Local section, click listBoxTemplate.

    The ListBox control displays a red or green square next to each student name that indicates whether the student is enrolled.

    ListBox data binding with a value converter

Community Additions