Try it: Changing the look of the selected item in a SimpleListBox

It is easy to customize the appearance of a selected item in a list box in Microsoft Expression Blend, by using the SimpleListBoxItem control template.

To change the look of the selected item in a SimpleListBox

1. Draw a SimpleListBox on the artboard in Expression Blend.

   Tip

   The simple style controls are available under Simple Styles in the Styles category of the Assets panel. After you select a simple style control from the list, you can draw it on the artboard.

2. Add an item to the list box by right-clicking the list box in the Objects and Timeline panel and then clicking Add SimpleListBoxItem.

3. Right-click one of the list box items in the Objects and Timeline panel, point to Edit Template, and then click Edit Current. If you do not want to change the SimpleStyles.xaml resource dictionary, you can click Edit a Copy instead of Edit Current to create a new template and save it in the document.

   For more information about creating a copy, see Create a resource.

   Tip

   To exit template-editing mode and return to the scope of your document, click Return scope to, which is above the object tree in the Objects and Timeline panel.

   To return to template-editing mode for an existing template, in the Objects and Timeline panel, right-click the object whose template you want to edit, point to Edit Template, and then click Edit Current.

4. Click IsSelected = True in the Triggers panel. By default, the border background color is changed when an item is selected, as you can see under Properties when active in the Triggers panel. You can change the background to a different color by clicking Border in the Objects and Timeline panel, and then modifying the Background property under Brushes in the Properties panel.

   Tip

   When you have a property trigger selected in the Triggers panel, any edits that you make anywhere in Expression Blend will set a value to be changed on that trigger condition. Make sure that the right trigger is selected before you make your changes. If you want to make changes that affect the default state of the control template, click Default in the Triggers panel.

5. To add more items to the list box that use the template that you just modified, you can click Return scope to to return to the editing scope for your document, double-click the list box object to activate it, and then add your custom style from the Styles category of the Assets panel.

6. Test your application (F5) to see the effects.

To change the look of the selected item by using the ItemContainerStyle template

1. Draw a SimpleListBox on the artboard in Expression Blend.

   Tip

   The simple style controls are available under Simple Styles in the Styles category of the Assets panel. After you select a simple style control from the list, you can draw it on the artboard.

2. Add a few items to the list box by double-clicking the list box in the Objects and Timeline panel to select it and then drawing a Rectangle or other control into the list box on the artboard. Alternatively, you can right-click the list box object and click Add SimpleListBoxItem.

   Tip

   If you want to try data binding to automatically generate items for the list box, you can use the procedures in Try it: Create an RSS news reader.

3. Click the ListBox object in the Objects and Timeline panel. On the Object menu, point to Edit Additional Styles, point to Edit ItemContainerStyle, and then click Edit a Copy.

   The Create Style Resource window appears. For the purposes of this procedure, accept the defaults and click OK.

   Expression Blend enters the editing mode for the style of a ListBoxItem.

   To learn more about the options in the Create Style Resource window, see Create a resource.

4. Templates are wrapped in style objects, so to edit the template of the ListBoxItem, right-click the Style object in the Objects and Timeline panel, point to Edit Template, and then click Edit Current.

   Note

   You click Edit Current here instead of Edit a Copy because control templates are wrapped in style objects and you clicked Edit a Copy in step 3 to create a copy of the style.

   Expression Blend enters the editing scope of the ListBoxItemStyleTemplate, which is the template that the list box uses for every item. Inside this template is a Border object named Bd, a ContentPresenter object, and two triggers for the IsSelected state.

5. In the Triggers panel, click one of the IsSelected triggers to enter the recording mode for that trigger, and then change the properties of the Bd object.

6. Test your application (F5) to see the effects.

See also

Concepts

SimpleListBox and SimpleListBoxItem

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.