Matthias Shapiro

I need fewer hobbies

Styling the ComboBox Dropdown (popup)

 This tutorial derives from the general “How to Style the ComboBox” set of tutorials.

First let’s make sure you’re in the right place. In this tutorial, we’re going to style the comboBox drop down (also known as the ComboBox popup) seen highlighted in red below.

CB_Image_1

We will not be styling the items inside the dropdown (highlighted in blue). You can learn how to do that here.

So… let’s just go after some of the basics in styling the dropdown. We’ll give it a new background, a new border and we’ll round the edges to make it just a little more bubbly.

To start out, we’ll need to get to our comboBox control template, so right click on the comboBox in the Objects and Timeline window and go to “Edit Control Parts (Template) -> Edit a Copy…

CB_Image_2

Name it something you like and we’re on our way. 

We’ll be editing the PART_Popup. Whatever you do, don’t change the name to this sucker. Whenever you see a “PART_Something”, it is a necessary part of that specific control (hence the naming convention).

The ComboBox dropdown (which we’ll be calling a popup for the remainder of this post)  is made up of a low cost drop shadow (see more on that here), a border, a scrollviewer and the itemsPresenter.

CB_Image_3

Most of the standard styling we might want to do is probably going to happen in the Border titled DropDownBorder. We can alter the background and the border brushes easily enough by just changing them in the Properties window. But you may notice some quirky behavior from our scrollviewer when we change the CornerRadius. Below, I’ve changed the CornerRadius to “0,0,10,10” and we can see that we lose part of the corner under the scrollviewer.

CB_Image_4

CB_Image_5

We can solve this easily enough by adding some padding through the Border. Below I’ve added a padding of “0,0,2,6“.

CB_Image_6

Better, but not really ideal. In a perfect world, we would be able to say that the border us able to cut off its content in that nice pretty rounded manner.  (If anyone knows how to do that… let me know, I haven’t given it hours of thought yet, but I’d love to know). In this case, however, this sub-optimization is the price we’re going to have to pay if we don’t want to have to go in and mess with the scrollbar style and template.

This entry was posted in Blend, combobox and tagged , , , , . Bookmark the permalink.

5 Responses to Styling the ComboBox Dropdown (popup)

  1. I really like your blog, thanks!

  2. 4 Online Payday Loans Direct Lenders S [url=http://paydayloanshut1b.com/]http://paydayloansonlinehut.com[/url] 2 http://paydayloansonlinehut.com/ 3 The experts provide valuable information and marketing tips that prove beneficial in enhancing the customer base.In doing so we aim to be a valued partner each of our associates will be proud to represent!I don’t know anyone who has not righteous people need companies (within the next 90 days). 1

  3. This series of posts I’m sure I’ll find a useful reference over the next couple of years. 🙂 I’m wondering though if you’re thinking of tackling the Menu and MenuItem controls as they are quite tricky sods to get right as I’ve been finding out. If not then I might have a go at doing one of these myself for them on my blog when I next have the time. 🙂

  4. You can clip is using the Clip property of any UI Element. You specify a Path, and BOOM, it’s clipped.

  5. Pingback: Designer WPF » Blog Archive » The WPF Designers Guide to Styling The ComboBox