Create the Expression Blend Project and the Windows Embedded Silverlight Tools Subproject (Compact 7)

3/12/2014

To create an application that can display data from a data source, you must create a XAML UI that supports data from a data source collection. Then, you use Windows Embedded Silverlight Tools to create an application subproject that is founded on your XAML project so that you can add it to your OS design.

In this step, you design a list box UI element for the data-bound elements by using Microsoft Expression Blend 3. The Expression Blend project must include the following XAML elements:

• A ListBox XAML element to contain the data-bound elements
• A DataTemplate XAML element that defines the presentation and appearance of the data-bound elements

Before you create the project and subproject, you must determine the data source properties that will populate UI elements with data. To populate the list with data, you add names of properties from the C++ data-source object to Binding Markup Extensions.

To determine which data-source properties will populate UI elements with data

1. Determine the type of data to display in your application. For example, an application that displays employee information for a human resources application might display the following data for each item in a data source collection:

   • The first name of the employee
   • The employee's ID number
   • The employee's date of hire
   • A list of an employee's direct reports

2. Choose property names for the data. For example, the media application described earlier might use the following property names:

   • FirstName
   • ID
   • DOH
   • DirectReports

   Note

   You will reuse these property names when you register properties with data source objects in the collection.

To create an Expression Blend 3 project for a UI that you will populate with collections of data

1. In Expression Blend, on the File menu, click New Project.

2. In Project types, select Windows Embedded.

3. Type a project name, and then click OK.

4. Add a ListBox element.

5. Add a DataTemplate element based on how you want to bind data:

   • To bind data to items in one element, such as a ListBox, add the DataTemplate element to the UserControl root element in MainPage.xaml.
   • To bind data to several different elements on the page, define the DataTemplate element as an application resource in App.xaml.

6. In the ListBox element, add an ItemTemplate attribute and set its value as the name of the DataTemplate. For more information, see Data Templating Overview on MSDN.

7. Transform elements into data-bound elements by doing the following:

   1. Identify the element attribute to populate with data.
   2. For the attribute value, add a binding markup extension with the property name that you chose earlier in this section. For more information, see Binding Declarations Overview on MSDN.

8. (Optional) To support displaying hierarchical data, you can define another ListBox element and transform it into a data-bound element. Add an ItemsSource attribute to the additional ListBox element, and use a binding markup extension that has a property name. Later, you will register the property name of the hierarchical data with a TBoundPointerProperty object.

   For example, in the employee data application described earlier, the hierarchical data would be represented as the DirectReports property. In order to display the individual members of the DirectReports collection, you need a data template. The following shows a data template that displays the employee ID and first name in a horizontal stack panel.

   <UserControl.Resources>
       <DataTemplate x:Key="EmployeeDataTemplate">
           <StackPanel x:Name="DisplayListData" Orientation="Horizontal" VerticalAlignment="Top">
               <TextBlock x:Name="ID" Text="{Binding Path=ID}" />
               <TextBlock x:Name="FirstName" Text="{Binding Path=FirstName}" />
           </StackPanel>
       </DataTemplate>
   </UserControl.Resources>
   <ListBox x:Name="EmployeeListBox" ItemTemplate="{StaticResource EmployeeDataTemplate}" ItemsSource="{Binding DirectReports, Mode=OneWay}" />
   

   For an example in XAML, see How to: Use the Master-Detail Pattern with Hierarchical Data on MSDN.

9. On the File menu, click Save.

To create a Windows Embedded Silverlight Tools subproject that is founded on your Expression Blend project

• For instructions on how to create a Windows Embedded Silverlight Tools subproject, see Getting Started with Silverlight for Windows Embedded.

See Also

Concepts

Populate a Silverlight for Windows Embedded UI with Collections of Data