Compartilhar via

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

  • Artigo

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.

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 from the Simple Styles category of the Controls tab in the Asset LibraryCc295254.0224cabd-5da1-4e01-bddd-4a647401a098(en-us,Expression.10).png. 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 under Objects and Timeline and then clicking Add SimpleListBoxItem.

  3. Right-click one of the list box items under Objects and Timeline, point to Edit Control Parts (Template), and then click Edit Template. If you do not want to change the SimpleStyles.xaml resource dictionary, you can click Edit a Copy instead of Edit Template 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 the template-editing mode and return to the scope of your document: click the Scope up button Cc295254.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(en-us,Expression.10).png, which is above the element tree in the Interaction panel.

    To return to template editing mode for an existing template: under Objects and Timeline, right-click the element whose template you want to edit, point to Edit Control Parts (Template), and then click Edit Template.

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

    Tip

    When you have a property trigger selected under Triggers in the Interaction 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 under Triggers.

  5. To add more items to the list box that use the template that you just modified, you can click the Scope up button Cc295254.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(en-us,Expression.10).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 Local Styles tab of the Asset Library .

  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 from the Simple Styles category of the Controls tab in the Asset LibraryCc295254.0224cabd-5da1-4e01-bddd-4a647401a098(en-us,Expression.10).png. 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 under Objects and Timeline to select it and then drawing a RectangleCc295254.ae750268-92e8-403a-9e07-b662da4e9e1e(en-us,Expression.10).png or other control into the list box on the artboard. Alternatively, you can right-click the list box element 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 in this User Guide.

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

    The Create Style Resource window appears. To learn more about the options in the Create Style Resource window, see Create a resource. For the purposes of this procedure, accept the defaults and click OK.

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

  4. Templates are wrapped in style elements, so to edit the template of the ListBoxItem, right-click the Style element under Objects and Timeline, point to Edit Control Parts (Template), and then click Edit Template.

    Note

    You click Edit Template 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—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. Under Triggers in the Interaction 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.

See also

Concepts

SimpleListBox and SimpleListBoxItem