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 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.
Add an item to the combo box, by right-clicking the combo box in the Objects and Timeline panel and then clicking Add SimpleComboBoxItem.
Add one or two additional items to the combo box by repeating the preceding step.
Right-click ComboBox 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 the template-editing mode and return to the scope of your document: click Return scope to
.png "Cc294708.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.
In the editing scope of the control template, expand all of the nodes in the Objects and Timeline panel.
Right-click the ToggleButton element in the Objects and Timeline panel, point to Edit Template, and then do one of the following:
If you selected Edit Current in step 4, click Edit Current now to edit the ExpanderToggleButton 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 ExpanderToggleButton 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 ExpanderToggleButton 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 in the Objects and Timeline panel 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.30).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.30).png")
in the Tools panel.Tip
To zoom in on the artboard, you can use the Zoom text box
.png "Cc294708.12524287-c48b-4cfc-b614-01951207239d(en-us,Expression.30).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, 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 in the Objects and Timeline panel, click IsChecked = True in the Triggers 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 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.
Test your application (F5) to see the effects.