Compartilhar via

Create or modify a data template

  • Artigo

This page applies to WPF and Silverlight 2

A data template defines the structure and format in which you would like your data to be represented. For more information, see the "Data templates" section of Data handling overview. For a complete example, see Try it: Create an RSS news reader.

To create a data template

  1. On the artboard or under Objects and Timeline in the Interaction panel, click the object that you want to create a binding on—this is where the data will flow into from the data source.

  2. In the Properties panel, click the Advanced property options Cc294682.d6ba8f4a-b8a2-445a-af0b-a267dfade6e1(en-us,Expression.10).png button next to the property that you want to serve as the target for the binding—this is the specific property that will hold the data. In the pop-up window, click Data Binding.

    The Create Data Binding dialog box opens.

    Note

    The property you select must support data templates. If it does not, the Define Data Template button will not be present in the Create Data Binding dialog box. Properties that represent lists of items (the ItemsSource property of items controls) and content (Content property) support data templates.

  3. Select one of the tabs at the top of the Create Data Binding dialog box, depending on the type of data binding that you want to create. For information about these tabs, see the "Data binding" section of Data handling overview.

  4. Do one of the following to enable the Define DataTemplate button:

    • If you selected the Data Field tab, select a data source and then select the field that you want. If there are no data sources, you need to create one by clicking one of the buttons below the Data sources window. For an example, see Add or remove a data source or Try it: Create an RSS news reader.

    • If you selected the Element Property tab, select an element from the list that is displayed on the left, and then select one of the properties of the element that is displayed on the right

    • If you selected the Explicit Data Context tab, select a field. If no fields are displayed, you need to use the Data Field tab, or you need to define the DataContext property first, either on this object or on an object that is higher up in the object hierarchy. For more information, see Bind data to a property or element or Try it: Create an RSS news reader.

  5. Click the Define DataTemplate button near the bottom of the dialog box.The Create Data Template dialog box opens.

  6. In the Create Data Template dialog box, you have the following three options:

    • Default control Styling   Use the default styling for the control. In the case of binding to a list of items, the default styling is most often a sequence of text boxes. For more information, see the Data template overview on MSDN.

    • Current or Predefined Data Template   Select a current or predefined data template resource from the drop-down box. This option is disabled if no suitable data template resource already exists for the control.

    • New Data Template and Display Fields   This option allows you to choose which data fields are included in the template and to select the type of control that should be assigned to each data field. For example, if you have a String data field, the default control that is used to display the field is a TextBlock. You can click the drop-down arrow next to the TextBlock to select a different control to display the data field. You can also use this method to choose what type of container element is wrapped around all of the fields, by clicking the drop-down arrow next to the control that is listed for the top-most item. Use the arrow buttons to determine the order in which the data fields appear. If you do not have a live data binding, select the Generate sample data check box so that you can view your control with sample data on the artboard to determine whether you like the look of your template.

    Use the Preview pane to determine whether you like the look of your template. When you have finished setting options for the data template, click OK. The data will be displayed in the object on the artboard with the template applied.

Cc294682.7e183f1f-37d8-4dcb-980c-19a5d61ca087(en-us,Expression.10).gifBack to top

To modify a data template

  1. Under Objects and Timeline in the Interaction panel, right-click the object, point to Edit Other Templates, point to Edit Generated Items, and then click Edit Template. Expression Blend will enter template editing mode, and you can see your template structure under Objects and Timeline.

    Note

    If you try to modify an existing data template by clicking the Advanced property options Cc294682.d6ba8f4a-b8a2-445a-af0b-a267dfade6e1(en-us,Expression.10).png button next to the property for which you already created a data template, clicking Data Binding, and then clicking the Define Data Template button, you will actually create a new data template.

    Expression Blend enters template editing mode and displays the structure of your data template under Objects and Timeline. In this editing mode, you can add controls to your template and use data binding from the Properties panel to bind the properties of those controls to new items from the data source.

  2. Double-click the root panel object to activate it so that you can add more child objects.

  3. From the Toolbox, select a control to add to the template. For example, if there is another String data element that you want to display, select a text control such as the TextBlock Cc294682.42165963-00f7-4a33-abcd-b0849edebada(en-us,Expression.10).png from the Toolbox, and then double-click its icon to add the control to your template.

  4. With the new control selected under Objects and Timeline, locate the property in the Properties panel to which you want to bind data. For a TextBlock, this would be the Text property.

    Note

    When you add a text control to the artboard, Expression Blend enters the editing mode for the control. This means that you can immediately type content into the control, but you cannot access all of the properties for the control. To exit the editing mode for the control, press ESC or click the Selection tool.

  5. Click the Advanced property options Cc294682.d6ba8f4a-b8a2-445a-af0b-a267dfade6e1(en-us,Expression.10).png button next to the property you have chosen, and click Data Binding.

    The Create Data Binding dialog box opens.

  6. Select the data item to which you want to bind the property, and then click Finish.

  7. To exit the editing mode for the template, click the Scope UpCc294682.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(en-us,Expression.10).png button under Objectsand Timeline.

Cc294682.7e183f1f-37d8-4dcb-980c-19a5d61ca087(en-us,Expression.10).gifBack to top