Jul 272012
 
 July 27, 2012  Posted by at 2:18 pm WinRT  Add comments

I am not overly fond of the default selected item color which is a dark purple (noting wrong with the color, it is just hard to make it work with otehr colors as it 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 could remove the x:Key and then the massice template with few changes would override the default. I would like to show you how to ONLY change the selection color by defining the color of the four brushes involved. Sorry about the ugly color-combo,- it’s just to make it clear which brush is used when 🙂

The brush that is green indicates selected item for a few milliseconds

After the item is selected it turns to the yellow brush from green (and black border). When hovering with the mouse over an item it turns red. If selected it turns green, then yellow.

Here is the code I’ve used, change the brushes as you like and add these brushes as a resource

[sourcecode language=”XML”]
<ResourceDictionary x:Key="Default">

// After selection – Background
<SolidColorBrush x:Key="ListViewItemSelectedBackgroundThemeBrush" Color="Yellow"></SolidColorBrush>

// When pointer hovers over an item – Background
<SolidColorBrush x:Key="ListViewItemPointerOverBackgroundThemeBrush" Color="Red"></SolidColorBrush>

// When the item is selected (first few milliseconds) – Background
<SolidColorBrush x:Key="ListViewItemSelectedPointerOverBackgroundThemeBrush" Color="Green"></SolidColorBrush>

// When the item is selected (first few milliseconds) – Border
<SolidColorBrush x:Key="ListViewItemSelectedPointerOverBorderThemeBrush" Color="Black"></SolidColorBrush>

</ResourceDictionary>

[/sourcecode]

  5 Responses to “Example Metro app /WinRT: How to change default selected item colors when using Listview?”

  1. […] Example Metro app /WinRT: How to change default selected item colors when using Listview? and ‘Stupid’ Question 9: How does reflection affect performance, and should I avoid using it? and ‘Stupid’ Question 10: What does a Software Architect do? (Iris Classon) […]

  2. […] WinRT was very similar but (as with everything in WinRT) has its own nuances…”Example Metro app /WinRT: How to change default selected item colors when using Listview? (Iris Classon)“I am not overly fond of the default selected item color which is a dark purple […]

  3. Thanks Works great 🙂

  4. I found it! Yahoo!

  5. Is there a way to make the border disappear?

    I want to create a treeview similar to the one in the Official Mail App for the folder listings. Each item, when selected does not have any visible border.

    Thanks

    David

 Leave a Reply

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>

(required)

(required)

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