Bind an object to data

Data is displayed by binding an item of data to an object on the artboard.

A data binding consists of two parts:

• Data context   The data context identifies the data source from which to get data. A data context is inheritable, so you can assign a data context to a parent object so that all child objects have access to the same data. This is useful when binding multiple objects to data in the same data source, and when creating a list-details design.

  For more information, see Create a list-details data binding.

• Property binding   The property binding identifies the specific item of data that a property is bound to. For example, you can bind the Text property of a TextBlock object to a string item in the data source, or you can bind the ItemsSource property of a ListBox to a collection in the data source. The property binding might not exist on the same object as the data context, but it will work as long as the data context is set on an object higher up in the tree.

To create data bindings, you can drag data items from the Data panel, or you can manually create a data binding by using the Properties panel to set the data context and the property binding.

To bind data by dragging items from the Data panel

1. In the Data panel, do one of the following:

   • Click List Mode  to display data in an items control, such as a ListBox, DataGrid, TreeView, ComboBox, and so on. List Mode is used to create a list from a collection.

   • Click Details Mode  to display data from one record in a collection, or to display a single item of data.

2. In the Data panel, select one or more items of data, and then drag your selection onto the artboard. You can drag your selection to an empty area of the artboard or onto an existing object.

   Blend for Visual Studio 2012 determines what action to take based on the type of data that you are dragging. The following table lists how Blend interprets data selections:

   Action	While in List Mode	While in Details Mode
   Drag a collection, or items in a collection, onto an empty area of the artboard.	A ListBox object is created to display the data, one record per row. The ItemsSource property of the ListBox is set to the name of the collection. The DataContext property is set in the parent layout panel. For an example, see Create a list-details data binding.	Objects are created to display all the selected items for a single record of the data collection. If you do this after having dragged items from the same collection while in List Mode, a list-details relationship is automatically set up. For more information, see Create a list-details data binding. If you did not previously create a binding while in List Mode, only data from the first record in the collection is displayed.
   Drag a hierarchical collection, or items in a hierarchical collection, onto an empty area of the artboard.	A TreeView object is created to display the data, one record per row. The ItemsSource property of the TreeView is set to the name of the collection. The DataContext property is set in the parent layout panel. For an example, see Use the TreeView control.	Objects are created to display all the selected items for a single record of the data collection. If you do this after having dragged items from the same collection while in List Mode, a list-details relationship is automatically set up. For more information, see Create a list-details data binding. If you did not previously create a binding while in List Mode, only data from the first record in the collection is displayed.
   Drag a collection, or items in a collection, onto an existing items control, such as a ListBox, DataGrid, TreeView, ComboBox, and so on.	The items control displays the data, one record per row. The ItemsSource property of the items control is set to the name of the collection. The DataContext property is set in the parent layout panel. For an example, see Use the DataGrid control.	Objects are created to display all the selected items for a single record of the data collection. If you do this after having dragged items from the same collection while in List Mode, a list-details relationship is automatically set up. For more information, see Create a list-details data binding. If you did not previously create a binding while in List Mode, only data from the first record in the collection is displayed.
   Drag a single item of data that is not in a collection onto an empty area of the artboard.	An object is created to display the data. For example, if the data is a string or a number, a TextBlock is created. If the data is a Boolean value, a CheckBox is created. If the data is the path of an image file, the image is displayed in an Image object.	Same as in List Mode.
   Drag a single item of data that is not in a collection onto an existing object.	Blend tries to determine which property on the object the data should be bound to. For example, if the data is a string or a number, it is bound to a Content or Text property. If the data is a Boolean value, it is bound to an IsEnabled or IsChecked or other Boolean property. If the data is the path of an image file, the data is bound to a Source property. If no appropriate property can be found, the Create Data Binding dialog box appears. In the Property of drop-down list Create Data Binding dialog box, in the Property of drop-down list, you can choose the property to bind the data to. For example, if the data is a string that represents a hexadecimal value for a color, you could drag the data item onto the root object of your document while holding Shift, and select the Background property in the Create Data Binding dialog box to change the background color of your document.	Same as in List Mode.

To bind data by using the Properties panel

1. In the Objects and Timeline panel, select the object in which you want to display or to which you want to bind data, or select an object higher up in the tree, such as the parent layout panel.

   This is where you will set the data context.

   팁
   Alternatively, you can right-click an object in the Objects and Timeline panel. If the element is a content control, select Data bind Content to Data. If the element is an items control, select Data bind ItemsSource to Data. If you follow this tip, skip to step 3 to continue.

2. In the Properties panel, next to the DataContext property, click Advanced options, and then click Data Binding.

3. In the Create Data Binding dialog box, click the Data Field tab.

4. Under Data sources, select the data source from which you want to bind data.

5. Click OK to close the Create Data Binding dialog box.

   You can now bind the properties of this object or any child object to items of data in the data source you selected.

6. Select the object in which you want to display or to which you want to bind data.

7. In the Properties panel, locate the property that you want to bind to data. Make sure the type of the property is compatible with the type of the data item you want to bind. For example, to bind to data items in a collection, select the ItemsSource property (available in items controls such as a ListBox, DataGrid, TreeView, ComboBox, and so on). To bind to a string or number data item, select a string property.

8. Next to the property, click Advanced options, and then click Data Binding.

9. In the Create Data Binding dialog box, click the Explicit Data Context tab.

10. Under Fields, select the data item to which you want to bind the property.

    팁
    Only compatible data items will be displayed. To display all items, select All Properties in the Show drop-down list.

11. Optionally set other fields in the Create Data Binding dialog box. For example, you might have to select a value converter if the type of data does not match the property type. Blend tries to convert data, but if a conversion cannot be made, the data will not be displayed. In that case, you will have to create a value converter and select it in the Create Data Binding dialog box.

    For more information, see Try it: Convert data from one type to another.

12. Click OK to close the Create Data Binding dialog box.

13. If you are using sample data, the data will be displayed on the artboard. If you are using live data, press F5 to view the data.

    팁
    You can bind the same data to more than one object. You can also set up a list-details design where one object is updated to display the details of an item that is selected in a list. For more information, see Create a list-details data binding.

참고 항목

작업

Switching from sample data to live data

Create a list-details data binding

개념

Style a control that displays data