Blend tip: finding default styles using “Edit a Copy”

If you’ve spent much time re-templating controls in Silverlight, WPF, or the Windows Phone, it’s clear that sometimes you want to understand the essence of a control through its template… but that XAML doesn’t feel easy to find at first glance.

Silverlight has the default styles and templates published on MSDN… for example, list boxes, content control, and auto complete box. You’ll find nice documentation with the actual template parts, visual states, and then the style that is built into the control library’s Themes\Generic.xaml resource dictionary.

However if you talk to an Expression Blend voodoo master, you will learn that it’s easier than searching on MSDN. Easy as in like 10 seconds.

Here’s a quick tutorial to something that comes up pretty often on discussion lists. I’m going to grab the <Button /> default style & control template from the beta Windows Phone developer tools.

Getting started

Open Expression Blend.

Create a new application project.

Add the control that you’d like the template or style of

In my example, I’m dragging the standard Button from the Assets library on to the design surface.

Use the Edit Template menu right-click option

Right-click on the newly created button, then select the Edit Template menu, and “Edit a Copy…”

This will open up the “Create Style Resource” window. You can keep the defaults: it should place a copy of the default control style (which contains the control template) inside the current page’s resources (near the top of the file).

Click OK.

Now your button will look the same, though technically you’re in template editing mode. We’re just interested in the XAML now that will be in the resources.

View the XAML

To the top right of the design surface (next to Properties in the standard layout) are 3 little icons, from top to bottom they are “Design”, “XAML”, and “Split”. Click on the middle “XAML” button for our use.

Now the page is opened, and in the resources you will see the default style for the control, with an x:Key added. Easy to see, examine, and re-use. It will have also connected the Button instance from earlier up to use that static style resource.

Note: Nested styles and templates

If you need to get a nested style, such as ListBoxItem within the ListBox, when you’re in the template editing mode above, you can actually select other controls and templates and edit copies of them, too.

Note: Windows Phone developer tools theme XAML

Another quick way to find the Windows Phone XAML is to open up the various files you will find at your 32-bit Program Files under “Microsoft SDKs\Windows Phone\v7.0\Design\”.

Hope this helps.