WPF tutorial: HOW TO style and change WPF ListBox (ComboBox, TreeView…) highlighting colors
Dear visitor: Please keep in mind that this post is originally from Vibor Cipan's personal blog, the name of which we eventually adopted as our company name together with its conveniently-named URL. We're keeping the posts on our official company blog for all the subscribers to Vibor's blog who have read and commented on his previous posts. Please be aware that this post represents Vibor's personal thinking few years ago and doesn't necessarily represent the opinions of the UX Passion as a company today.
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:
Simple WPF ListBox control
…to something like this:
Customizes WPF ListBox control
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.
Adding new ListBox items
3. Press F5 to start your project. Click on some item in your list box and it should look something like this:
Simple WPF ListBox control
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…
Editing ItemContainerStyle
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).
Create Style Resource dialog
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.
Template editing
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.
Trigger section in Interaction panel
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.
Border control called Bd in Objects and Timeline panel
9. Take a look at Properites pane.
Background is set to HighlightBrushKey – which is one of predefined resources.
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.
Advanced property options
You will now notice that your ListBoxItem looks transparent.
ListBoxItem now 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) :)
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.
Customizes WPF ListBox control
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
Specifying the Selection Color, Content Alignment, and Background Color for items in a ListBox
Comments (21)
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.
Oh yeah I know GWT has been around for copule of years. I think why this discussion started now is because of new stuff that was demoed in Wave and that should make it into the GWT.I’d love to have GWT equivalent in C#. I am disappointed that Microsoft did not make that View part of ASP.NET MVC. Now THAT would be a killer.
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.
No problem. I’m happy you liked it and that it has worked well for you!
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
Hi Ash Thanks wjj4832 five? R video, right? CASE WHEN correct the code you see my hand here on yubutoe to my project the compiler errors, I mark the following line of code: ufselections. ListBox2. Clear Thanks valid for your help!.
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?
hy, your tutorial was very helpfull…but i need to make a three menu, i mean when click Category->it appears a Subcategory->and then appears a Product.
do you have any idea how i can do that?
I am now learning Blend…and is not so very easy :).
Thanks,
Gina
Trackbacks
Pingback: WPF: Vista Blue Highlight Brush » Green and Simple
Pingback: WPF Stílusok – Turóczy Attila szakmai blogja – devPortal
Pingback: Customized Listbox in WPF at Priyanka's Design Booth