Dela via

Use the TreeView control

  • Artikel

The TreeView control can display a hierarchical (or nested, or recursive) collection of data in a tree of expandable nodes.

For more information about the TreeView control, see TreeView Class (System.Windows.Controls) on MSDN.

To create sample data to display in a TreeView control

You can use any type of collection in the TreeView control, but hierarchical collections make full use of the functionality of the TreeView control. If you don't already have data that you can use in the procedure "To populate a TreeView control," later in this topic, follow this procedure to set up sample data that will fully illustrate the features of the TreeView control:

  1. If you do not already see the Data panel, click the Window menu, and then click Data.

  2. In the Data panel, click Add sample data source Ee371155.30540d76-7256-43ce-b5d9-4b2edf3d339f(en-us,Expression.30).png, and then click Define New Sample Data.

  3. In the Define New Sample Data dialog box, you can change the default name for the data set, and then select the part of your project to which you want the data made available.

  4. Select the Enable sample data when application is running box.

    Tip

    The Enable sample data when application is running box lets your project display the sample data when you run your application. When the box is not selected, Microsoft Expression Blend will display the sample data only on the artboard.

    For more information, see Make your application display sample data when it runs.

  5. Click OK.

    A sample data source that includes a collection Ee371155.94dad06c-7ddb-4c5e-b2ee-74b394c713ff(en-us,Expression.30).png of three types of properties (string Ee371155.0baebca0-a722-4aa2-ad58-a96325a0536d(en-us,Expression.30).png, number Ee371155.3a9d424b-3e04-443e-8c96-2bcb744fd037(en-us,Expression.30).png, and Boolean Ee371155.b09651ed-c8ae-4f66-b10c-d8478c5337c7(en-us,Expression.30).png) is created.

    Ee371155.496d7ebc-fe46-42f6-95a8-57b0e5be5d49(en-us,Expression.30).png

  6. Next to Ee371155.94dad06c-7ddb-4c5e-b2ee-74b394c713ff(en-us,Expression.30).png Collection, click the drop-down arrow next to Add simple property Ee371155.203a14a5-0db2-486e-9b94-4fdf658d531b(en-us,Expression.30).png, and then click Convert to Hierarchical Collection.

    The flat collection is converted to nested collections. The collection is converted to provide properties that are nested five levels deep. The name of the second-level collection becomes editable.

You now have a sample data collection ready to display in a TreeView control.

For information about modifying sample data and adding more data properties, see Modify sample data.

To populate the TreeView control

There are multiple ways to bind data to a control on the artboard. The following procedure shows you the fastest way when you are using a TreeView control.

For other options, see Bind an object to data.

  1. In the Tools panel, click Assets Ee371155.0d8b8d29-1af9-418f-8741-be3097d76eab(en-us,Expression.30).png.

    Tip

    Alternatively, you can display the Assets panel by clicking Assets on the Window menu.

  2. In the Assets panel, expand Controls, click All, and then click the TreeView control Ee371155.7ecbf7de-e46f-44e9-b931-98c8c12c0b2a(en-us,Expression.30).png.

    The button underneath the Assets button Ee371155.0d8b8d29-1af9-418f-8741-be3097d76eab(en-us,Expression.30).png in the Tools panel displays the icon for the TreeView control and is selected.

  3. Using your pointer, draw a large TreeView object on the artboard in your main document.

  4. In the Data panel, drag the top-level collection (Ee371155.94dad06c-7ddb-4c5e-b2ee-74b394c713ff(en-us,Expression.30).png Collection) onto the new TreeView object.

    The TreeView object displays the collection in the sample data source, converting image properties to image objects, and Boolean properties to check boxes.

  5. Press F5 to run your application.

    If you are using the sample data from the previous procedure, and you enabled the sample data when testing your application, you should see the following:

    Ee371155.b4ccdfe0-38ac-486f-a617-bd0044bce42b(en-us,Expression.30).png

Change the appearance of the TreeView control

You can change the appearances of controls by modifying their properties or by modifying the templates that are used to style them. You can modify the overall template, the templates that arrange items in each row, and others.

For more information, see Create or modify a template.

To change the layout and appearance of items in each row

  1. In the Objects and Timeline panel, or on the artboard, right-click the TreeView object, point to Edit Additional Templates, point to Edit Generated Items (ItemTemplate), and then click Edit a Copy.

  2. In the Create Data Template Resource dialog box, click OK.

    Expression Blend enters template-editing mode. The breadcrumb bar at the top of the artboard shows that you are editing a template inside the TreeView object. You can use the breadcrumb bar to exit template-editing mode by clicking the TreeView button.

  3. In the Objects and Timeline panel, you can see that items are arranged in a StackPanel object. You can change the stack orientation and the stacking order. You can also change the StackPanel to a different layout panel, such as the Grid or Canvas layout panel.

    For more information, see the following topics:

  4. In the Objects and Timeline panel, add other objects to the template, or modify the properties of existing objects in the Properties panel.

To change the color of the selected item

  1. In the Objects and Timeline panel, or on the artboard, right-click the TreeView object, point to Edit Additional Templates, point to Edit Generated Item Container (ItemContainerStyle), and then click Edit a Copy.

  2. In the Create Style Resource dialog box, click OK.

    Expression Blend enters template-editing mode. The breadcrumb bar at the top of the artboard shows that you are editing a template inside the TreeView object. You can use the breadcrumb bar to exit template-editing mode by clicking the TreeView button.

    Tip

    When you first enter template-editing mode, the appearance of your template reflects the appearance of the control while there is no user interaction with the control. To modify the appearance of the control when a user interacts with it, you have to select a trigger (in Windows Presentation Foundation [WPF] projects) or a state (in Microsoft Silverlight projects) while in template-editing mode. For example, when users select an item in a TreeView control, they are interacting with the control, and causing a Selected event to occur. To modify the appearance of the control when an item is selected, you have to modify the template while the trigger or state that corresponds to the Selected event is selected.

  3. Do one of the following:

    • For a WPF project: In the Triggers panel, click the IsSelected = True trigger to enter template-editing mode for the Selected event. In the Objects and Timeline panel, click the Bd object. In the Properties panel, under Brushes, change the Background color of the Bd object. When you are done, click Default in the Triggers panel to turn off trigger recording.

    • For a Silverlight project: In the States panel, click the Selected state to enter template-editing mode for the Selected event. In the Objects and Timeline panel, click the Selection object. In the Properties panel, under Brushes, change the Fill and Stroke colors of the Selection object. When you are done, click Base in the States panel to turn off state recording.

    For information about opening panels, see Add or remove a workspace panel.

    For information about changing brush colors, see Setting colors, brushes, and masks.

  4. Press F5 to run your application and select an item in the tree.

To change the appearance of the expand button

  1. In the Objects and Timeline panel, or on the artboard, right-click the TreeView object, point to Edit Additional Templates, point to Edit Generated Item Container (ItemContainerStyle), and then click Edit a Copy.

    Tip

    If you have already created this template, the Edit Current command will be enabled, and you can select that instead of Edit a Copy.

  2. In the Create Style Resource dialog box, click OK.

    Expression Blend enters template-editing mode. The breadcrumb bar at the top of the artboard shows that you are editing a template inside the TreeView object. You can use the breadcrumb bar to exit template-editing mode by clicking the [TreeView] button.

  3. In the Objects and Timeline panel, right-click the Expander object (WPF projects) or the ExpandButton object (Silverlight projects), point to Edit Template, and then click Edit Current.

  4. In the Objects and Timeline panel, expand the nodes to see the Path object that represents the expand button for the TreeView control. In WPF projects, the path object is named ExpandPath. In Silverlight projects, there are two path objects, named UncheckedVisual and CheckedVisual. You can use the Pen Ee371155.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(en-us,Expression.30).png and Direct Selection Ee371155.6dd6571f-c116-451d-8dd2-1f88b8406362(en-us,Expression.30).png tools to modify the shapes of these paths. In WPF projects, the name and type of the ExpandPath object must be preserved because there are triggers that depend on it.

    For more information, see Using triggers to define the behavior of a WPF control.

    In Silverlight projects, you can change the appearance of the path objects changes in the Checked state, so you can modify that change.

    For more information, see Defining different visual states for a control.

See also

Other resources

Creating sample data

Connecting to live data

Displaying data in controls