Try it: Customize the appearance of the expander button in a SimpleComboBox
.png "This page applies to WPF projects only")
It is easy to customize the appearance of the expander button in a combo box in Microsoft Expression Blend, by using the ToggleButton control template of the SimpleComboBox.
To customize the expander button in a SimpleComboBox
Draw a SimpleComboBox 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 Library
.png "Cc294708.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.Add an item to the combo box, by right-clicking the combo box under Objects and Timeline and then clicking Add SimpleComboBoxItem.
Add one or two additional items to the combo box by repeating the preceding step.
Right-click ComboBox 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
.png "Cc294708.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.
In the editing scope of the control template, expand all of the nodes under Objects and Timeline.
Right-click the ToggleButton element under Objects and Timeline, point to Edit Control Parts (Template), and then do one of the following:
If you selected Edit Template in step 4, click Edit Template now to edit the ExpanderToggeButton control template that is stored in SimpleStyles.xaml.
If you selected Edit a Copy in step 4, click Edit a Copy now to create a copy of the ExpanderToggeButton control template and store it in the same place as the template for the ComboBox.
The look of the expander button is designed in the ExpanderToggeButton control template. Note that the Grid in the template extends the entire width of the combo box. This design enables the drop-down list to appear no matter where the user clicks inside the combo box.
Select the Arrow element under Objects and Timeline to identify it on the artboard. The Arrow element is a Path that represents the expander button for the ComboBox control.
You can modify the Arrow element by using the Direct Selection tool
.png "Cc294708.6dd6571f-c116-451d-8dd2-1f88b8406362(en-us,Expression.10).png")
to adjust points on the path. Or, you can delete the Arrow element and then create a new element by using the Pen tool .png "Cc294708.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(en-us,Expression.10).png")
in the Toolbox.Tip
To zoom in on the artboard, you can use the Zoom text box
.png "Cc294708.12524287-c48b-4cfc-b614-01951207239d(en-us,Expression.10).png")
at the bottom of the artboard, or you can use the scroll button on your mouse while holding down the CTRL key.Tip
As an alternative to drawing a path element by using the Pen tool, you can use an art resource that you import from Microsoft Expression Design 2, or an image file that you add to your project.
The rollover effect when the expander button is clicked is defined by property triggers that change the appearance of the Rectangle elements in the ToggleButton control template. You can add a new property change to the existing triggers that will make your Arrow element rotate when the expander button is clicked. With your Arrow element selected under Objects and Timeline, click IsChecked = True under Triggers in the Interaction panel, and then click the Rotate tab under Transform in the Properties panel, and enter 180 in the Angle text box.
When a user clicks the expander button to expand the combo box, the Arrow element will rotate 180 degrees, and will return to its original rotation when it is clicked again.
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.
Test your application (F5) to see the effects.