Try it: Customize a SimpleTabItem style using an effect

This page applies to WPF projects only

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

To add an effect to a SimpleTabItem style

  1. Draw a SimpleTabControl object on the artboard. By default, the SimpleTabControl object includes two SimpleTabItem templates.

    tip noteTip

    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.

  2. Right-click one of the tab items 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 noteTip

    To exit template-editing mode and return to the scope of your document, click Return scope to Cc294648.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(en-us,Expression.40).png, which is above the object 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 object whose template you want to edit, point to Edit Template, and then click Edit Current.

  3. In the editing scope of the control template, select the Border object in the Objects and Timeline panel, and then, in the Appearance category of the Properties panel, click New next to the Effect property.

  4. In the Select Object dialog box, select DropShadowEffect, and then click OK.

    The area under the Effect property displays the subproperty editor, containing the properties that you can set for the DropShadowEffect effect (such as the BlurRadius property). Subproperty editors are identified by a dark border. You can expand and collapse the subproperty editor to modify your settings by using the drop-down arrow that appears on the left side of the Effect property.

  5. In the Triggers panel, select the IsPressed state to turn on recording for the trigger. In the Properties panel, expand the Effect property, and then change the BlurRadius property to 15.

    A new line appears under Properties when active in the Triggers panel, reflecting the property change that will occur when you click the tab item.

  6. To apply the custom template to the other tab item in your tab control, right-click the other tab item in the Objects and Timeline panel, point to Edit 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

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.