Customize the appearance of the expander button in a SimpleComboBox
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.
The simple style controls are available from the Simple Styles category of the Controls tab in the Asset Library 
.
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.
To exit the template-editing mode and return to the scope of your document: click the Scope up button 
,
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.
- 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
to adjust points on the path.
Or, you can delete the Arrow element and then create a new element by using the
Pen tool
on the Toolbox.
To zoom in on the artboard, you can use the Zoom text box 
at the bottom of the artboard, or you can use the scroll button on
your mouse while holding down the CTRL key.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 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.
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.