Example WinRT/Metro App: How to edit default template in Visual Studio 2012 and Blend

Based on a question I answered on Stackoverflow I’ve decided to just quickly show how you can generate the default template for a control, so you then can change it as you please. Let’s face it, the default templates will only take you so far, you will want to edit that purple selected item color at some point, or like me- remove all selection animations and just use the panel to simply display data as a collection.

Here is two ways to generate the template in Visual Studio 2012:

Select the control you want to edit in the designer, right-click and select edit template, edit copy, then select where you want the code to go.

In the document outline find the control you want to edit, right-click and select edit template, edit copy, then select where you want the code to go.

Here is two ways to generate the template in Blend:

Select the control you want to edit in the designer, right-click and select edit template, edit copy, then select where you want the code to go.

In the document outline find the control you want to edit, right-click and select edit template, edit copy, then select where you want the code to go.

This will generate the template, add an x:key to the style, and add this style as astatic resource to the control you selected.

To just make minor/simple changes you can just override some style properties within the controls style (localy)- you can’t do both as the style property can only be set once. When defined locally you don’t need to reference the style.

Notice the ItenContainerStyle- this is where we made the style changes!

[sourcecode language=“XML”]

<ListView.ItemsPanel>



</ListView.ItemsPanel>
<ListView.ItemContainerStyle>




</ListView.ItemContainerStyle>

hej


hej


[/sourcecode]

Comments

This doesn't seem to work in VS2013 on the standard WinRT Button control.  This is all that's generated:



Useless.  Suggestions? 

Last modified on 2012-07-22