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!

<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>

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

  1. Pingback: Windows 8 Developer Links – 2012-07-23Dan Rigby | Dan Rigby

  2. Pingback: Dew Drop – July 23, 2012 (#1,369) | Alvin Ashcraft's Morning Dew

  3. Pingback: Example Metro app /WinRT: How to change default selected item colors when using Listview? »

  4. Pingback: Example Metro app /WinRT: How to change the style of the radiobutton? »

  5. Chris Bordeman on said:

    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

Your email address will not be published. Required fields are marked *

*

HTML tags are not allowed.

What is 11 + 11 ?
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) :-)