WPF tutorial: HOW TO style and change WPF ListBox (ComboBox, TreeView…) highlighting colors
How to change color of selected (highlighted) item in your WPF ListBox (or ComboBox, ListView or TreeView) in Expression Blend? WPF allows you to do this and much more by using Styles and Templates. I this tutorial I will show you how to achieve that. (added source code)
Often, you need to restyle default style of your WPF controls. In this tutorial, I will show you how to change highlighting color of your WPF List Box in Expression Blend. That way you can customize your controls and provide better user experience.
Basically we will go from this:
…to something like this:
ListBox (and everything I will show you in this tutorial is applicable to ComboBox, TreeView nad ListView WPF controls) is common control used widely across all different kind of applications. Customization is, however, rarely seen and I hope to show that changing something like highlight color of your ListBox control is very simple.
1. Start your Expression Blend and draw ListBox control on workspace.
2. Right click on your ListBox in Objects and Timeline pane and click on Add ListBoxItem. Repeat that procedure several times – just enough to populate your ListBox with 5 or 6 items.
3. Press F5 to start your project. Click on some item in your list box and it should look something like this:
That is the default highlight for selected item in your ListBox control. And we are going to change it right now.
4. Close your window and return to Blend.
5. Select your ListBox and from Object menu choose Edit Other Styles then Edit ItemContainerStyle and finally Edit Copy…
6. Create Style Resource dialog shows. Enter name for your style – for example – NewHighlightStyle and select Define in Application (this basically just tells if this style will be able to all objects in application or this document only or in resource dictionary).
Click on OK when you are done.
7. Right-click on Style in Objects and Timeline pane and then select Edit Control Parts (Template) and Edit Template after that.
8. Now we are ready for some serious job. Take a look at Trigger section in Interaction pane. You can notice that there are several defined triggers and that they are connected with some specific actions.
Click on IsSelected = True and you will notice that your ListBoxItem changes its color to blue – color that it usually has when it is highlighted.
8. Select the border control called Bd in your Objects and Timeline pane.
9. Take a look at Properites pane.
You can see under Brushes section that Background is set to HighlightBrushKey - which is one of predefined resources.
10. Click on Advanced property options (little green square) and after that click on Reset.
You will now notice that your ListBoxItem looks transparent.
11. Now we will add some colors and make that ListBoxItem look nicer. Click on Gradient Brush, add few stops and create whatever background you want. (You can tell I am from Croatia just by looking on my choice of colors) 
12. If you go now again and press F5 to start your project and click on ListBoxItem you should see that it now sports highlight style that you’ve just defined.
In this way you can easily change look of de facto all WPF controls without worrying if you will change default behaviors.
In future tutorials on UXPassion.com I will go and show you numerous other possibilities for creating and customizing controls.
Please note that this process can be used for styling your Silverlight controls as well.
If you have some questions, leave them in comments, I’d be glad to try to help you out.
You can also download source code from here.
Resources
20 Responses to “ WPF tutorial: HOW TO style and change WPF ListBox (ComboBox, TreeView…) highlighting colors ”
Trackbacks
- WPF: Vista Blue Highlight Brush » Green and Simple
- WPF Stílusok - Turóczy Attila szakmai blogja - devPortal
Tranks, good job, I spend a lot of hours searching this and now I found to resolve my problem.
Muchas Gracias, articulo muy bien explicado, las fotos correctas, es justo lo que estaba buscando después de 2 días batallando con el listbox y los solidbrush highLight and GreyLight de los items del listbox.
Salut.
No problem Pere, feel free to suggest other tutorials you might need.
Thanks! Have been trying to solve this issue for a couple of hours now.
No problem MrSpock I’m happy that this was helpful. Also, if you have any other suggestions for other tutorials, feel free to share your ideas and I will se what can I do.
Great article! This is exactly what I’m looking for. Would you please please please send me a copy of the source? I will be very grateful if you would.
Sure, I will upload it today during day here and provide a link. I am glad that this was helpful for you! Thanks for taking time to visit blog and comment!
hiiiiiiiiii
Hi..
Its amazhing, I had spent hell lot of time checking various options and did not work.
But this one worked… I was able to apply to the data that was pulled from XML file too.
Thanks Vibor,
That was really educational. Exactly what I was looking for! I’m happy to provide a trackback from my blog.
I wanna append to combobox, two buttons(next and previous) at the end of items visible, how i can do that? thanks in advance.
You mean to have two buttons as a ComboBox items, at the end of all items in the ComboBox?
Thank you so much for this tutorial. Like a lot of other people it seems, I had exactly the same issue where I’ve been looking for function for hours. Not as intuitive as Flash possibly, but nice to have found it. Thanks again man, back to the drawing board
Thank you for nice words and support! I’m really glad you find it useful! Thanks so much!
Many thanks for this good lesson , Plz keep up.
And of course if you can add a lesson about how to
shape controls ( Cutting areas of a button for example )
that would be great .
hi,
I am developinf one application through GWT. What is happening in IE8 browser is that when i select something in listbox, then after continuing the selected item is not reflected with different color as it gets disabled. This is there in earlier version if IE
Could you please make a Video Tutorial on this, for ItemTabs etc. This is really needed.
Thanks
You mean how to change and style Tabs or what exactly? Can you please elaborate?
No problem. I’m happy you liked it and that it has worked well for you!