Jul 222012
 
 July 22, 2012  Posted by at 8:57 am Uncategorized, WinRT  Add comments

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.


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.

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>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal" HorizontalChildrenAlignment="left"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Padding" Value="0"/>
<Setter Property="Margin" Value="0"/>
</Style>
</ListView.ItemContainerStyle>
<ListViewItem>
<TextBlock Foreground="Wheat">hej</TextBlock>
</ListViewItem>
<ListViewItem>
<TextBlock Foreground="Wheat">hej</TextBlock>
</ListViewItem>
</ListView>
[/sourcecode]

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

  1. […] (include.js)? You can do it by simply including a library in your Windows 8 project…”Example WinRT/Metro App: How to edit default template in Visual Studio 2012 and Blend (Iris Classon)“Based on a question I answered on Stackoverflow I’ve decided to just […]

  2. […] Example WinRT/Metro App: How to edit default template in Visual Studio 2012 and Blend and Example Metro app /WinRT: Out-of-the-box Icons for Buttons (XAML) (Iris Classon) […]

  3. […] is so ‘strong’ and unusual). I wrote a blog post showing how to edit default templates Example WinRT/Metro App: How to edit default template in Visual Studio 2012 and Blend , but maybe you just want to edit the selected item color- and set the new color as default. You […]

  4. […] To get more control you can generate the template for teh radiobuttons like I have shown in this pos… […]

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

    Useless. Suggestions?

 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

What is 10 + 8 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)