Click here to Skip to main content
13,044,428 members (118,748 online)
Rate this:
Please Sign up or sign in to vote.
See more:

I am new to WPF. I am trying to learn about wpf control templates. My question, how a custom combo box with icon can be made. Icon will be different for different combo boxes. So icon image source must be changeable. Here is an example combo box with icon.[^]

Any ideas ?

Thank you.
Posted 25-Mar-13 1:43am
Matej Hlatky 25-Mar-13 8:21am
Do you want icon on each list item, or only on the selected one?
desmondos 25-Mar-13 8:27am
Actually not on each or on selected one. Like in picture, icon will be for combo box and always same, not for combo box item.

Thank you.
Matej Hlatky 25-Mar-13 8:36am
In that case, you need to override ComboBox ControlTemplate by yourself -
Lance Contreras 26-Mar-13 10:39am
I agree with Matej. You need to have a control template for that.
Rate this: bad
Please Sign up or sign in to vote.

Solution 1

Which form are you using?

If you can tell that then, It would be easy to solve your query.

Nelek 27-Mar-13 3:56am
Please don't post solutions just to talk with people or ask for additional information. The messages are not always sorted by date, so it can be a bit difficult to follow them correctly.
The best option is to use the "Have a question or comment?". Another advantage is that the person you write to will get a notification, otherwise it could be that he/she doesn't see your additional question.
Rate this: bad
Please Sign up or sign in to vote.

Solution 2

Thank you all, for your answers. But i solved this with editing combo box control template.

Combo Box Control Template consist of three parts.

One is ToggleButton, second ComboBoxTextBox and ComboBox itself. To add an icon to combobox you must edit the ToggleButton control template.

At Microsoft site you can find the combo box control template.[^]

Here is an toggle button example with an icon.

<controltemplate x:key="ComboBoxToggleButtonIcon" targettype="ToggleButton" xmlns:x="#unknown">
                <columndefinition width="0" />
                <columndefinition />
            <border x:name="Border" grid.columnspan="2" cornerradius="2" borderthickness="1">
                    <imagebrush imagesource="/images/icon.png" stretch="None" />
            <border grid.column="0" cornerradius="0,0,0,0" margin="0" background="Transparent" borderbrush="Transparent" borderthickness="0,0,0,0" />
            <path x:name="Arrow" grid.column="1" fill="#444" horizontalalignment="Right" verticalalignment="Center" margin="0,0,10,0" data="M 0 0 L 4 4 L 8 0 Z" />
            <trigger property="ToggleButton.IsMouseOver" value="true">
            <trigger property="ToggleButton.IsChecked" value="true">
            <trigger property="IsEnabled" value="False">

You can use this toggle button in your combo box control template with name.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Mobile
Web01 | 2.8.170713.1 | Last Updated 6 Nov 2013
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100