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

This page applies to WPF projects only

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.

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

    Cc295254.alert_tip(en-us,Expression.30).gifTip:

    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.

    Cc295254.alert_tip(en-us,Expression.30).gifTip:

    To exit template-editing mode and return to the scope of your document, click Return scope toCc295254.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(en-us,Expression.30).png, which is above the element 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 element 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.

    Cc295254.alert_tip(en-us,Expression.30).gifTip:

    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 toCc295254.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(en-us,Expression.30).png to return to the editing scope for your document, double-click the list box element 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.

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

    Cc295254.alert_tip(en-us,Expression.30).gifTip:

    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 RectangleCc295254.ae750268-92e8-403a-9e07-b662da4e9e1e(en-us,Expression.30).png or other control into the list box on the artboard. Alternatively, you can right-click the list box element and click Add SimpleListBoxItem.

    Cc295254.alert_tip(en-us,Expression.30).gifTip:

    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 elements, so to edit the template of the ListBoxItem, right-click the Style element in the Objects and Timeline panel, point to Edit Template, and then click Edit Current.

    Cc295254.alert_note(en-us,Expression.30).gifNote:

    You click Edit Current here instead of Edit a Copy because control templates are wrapped in style elements 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 element named Bd, a ContentPresenter element, 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 element.

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

Community Additions

ADD
Show: