Try it: Customize the SimpleTabItem using a bitmap effect

This page applies to WPF projects only

Using the SimpleTabItem template makes it easy to customize the appearance of a tab control.

To add a bitmap effect to the SimpleTabItem

  1. Draw a SimpleTabControl on the artboard. The SimpleTabControl includes two SimpleTabItem templates by default.


    The simple style controls are available from the Simple Styles category of the Controls tab in the Asset LibraryCc294648.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. Right-click one of the tab 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.


    To exit the template-editing mode and return to the scope of your document: click the Scope upCc294648.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(en-us,Expression.10).png 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.

  3. In the editing scope of the control template, select the Border element under Objects and Timeline, and then in the advanced section Cc294648.81e110f1-4068-4299-957d-0693cea95088(en-us,Expression.10).png of the Appearance category of the Properties panel, click the drop-down arrow beside the BitmapEffect property, and click Bevel. By default, the BevelWidth property is 5.

  4. In the Triggers panel, select the IsPressed state to turn on recording for the trigger. In the Properties panel, click the drop-down arrow next to the BitmapEffect property again, click Bevel, and then change the BevelWidth property to 25.

    A new line appears under Properties when active under Triggers, reflecting the property change that will occur when the mouse moves clicks the tab item.

  5. Click the Scope UpCc294648.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(en-us,Expression.10).png button to return to the editing scope of your document.

  6. To apply the custom template to the other tab item in your tab control, right-click the other tab item under Objects and Timeline, point to Edit Control Parts (Template), point to Apply Resource, and then click the name of your custom template.

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

See also


SimpleTabControl and SimpleTabItem