(WPF ListView/ TreeView)Get rid of that default (blue) selection colour!!

This next blog covers a very trivial but important problem. Important because i think almost everyone would want to override this default behavior of WPF and trivial because the solution is actually pretty simple.Atleast its simple now that i know it. It wasn’t so simple for me earlier though;-)

For this blog i feel pictorial rep is going to be the easiest to follow .OK so the problem is this.

I have a List View with ListView Items and everytime i select an item it turns Blue with a white foreground. Customer says i want Gray background and Blue font (weird choice i know..but then Customer is the King!). So how do we do this??

We basically need to tweak the control template of a ListViewItem. Yeah..ListViewItem.. believe me the ListView is not at fault so changing the background, foreground , selection colour etc of the ListView doesn’t help (you can try it if you have the time :-)).

I think Expression Blend is the easiest way to tweak the control template and though as a developer i swear by VS but Blend does get an extra brownie point for this one.. so the following steps help us here. Open Expression Blend, create a new WPF application and put a ListView control on it. Then go on to add a few ListViewItems as follows.

Do this 2-3 times to add 2-3 List view Items.

Next get the control template of the ListViewItem.

This will create a new style for the ListViewItem. It will ask you where you want to create the style. Since this really isn’t your project the hierarchy doesn’t matter, so keep it in the Window itself

OK. Now Open the Window.xaml. You will find a new style under the Resources section.

The Lines i have highlighted are our culprit. You can see a trigger defined for Selection which sets the background and foreground based on dynamic resources picked up depending on the theme of the OS the app is running on.

So change the trigger values to what YOU want

<Trigger Property=”IsSelected” Value=”true”>
        <Setter Property=”Background” TargetName=”Bd” Value=”Gray”/>
        <Setter Property=”Foreground” Value=”Blue”/>
  </Trigger>

But this is not enough. You have created a style and given it a key. Which means that this style is applicable only to those ListViewItems to specifically subscribe to it saying Style={StaticResource ListViewItemStyle1}. This is not what we want. We want all the Items to follow this style. So remove the “x:key= ListViewItemStyle1” from the style definition.

This will make the style applicable to all the UI elements of Target Type= “ListViewItem”(lower in the heirarchy ofcourse)

Now run the app (f5) and select any ListView Item

Now pick up this style definition and paste it in your app.xaml/ window.xaml depending on the heirarchy you want!

This works for ListView/ TreeView … hope it helps you somehow!

Till next time!

Cennest

Advertisements

About Cennest
Cennest is the brainchild of a group of IT Professionals keen to try their hand in the world of IT Freelancing. After working in the corpora

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: