WPF Combo Box With Icon

Question

0.00/5 (No votes)

See more:

Hi,

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. http://i49.tinypic.com/dq40hf.png[^]

Any ideas ?

Thank you.

Posted 25-Mar-13 1:43am

desmondos

Add a Solution

Comments

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, http://i49.tinypic.com/dq40hf.png 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 - http://msdn.microsoft.com/en-us/library/ms752094.aspx

Lance Contreras 26-Mar-13 10:39am

I agree with Matej. You need to have a control template for that.

2 solutions

Solution 1

Which form are you using?

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

Thanks

Posted 26-Mar-13 21:24pm

Mukherjee Arijit

Comments

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.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

desmondos · Accepted Answer · 2013-11-06T02:18:00

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. http://msdn.microsoft.com/en-us/library/ms752094%28v=vs.85%29.aspx[^]

Here is an toggle button example with an icon.

XML

<controltemplate x:key="ComboBoxToggleButtonIcon" targettype="ToggleButton" xmlns:x="#unknown">
        <grid>
            <grid.columndefinitions>
                <columndefinition width="0" />
                <columndefinition />
            </grid.columndefinitions>
            <border x:name="Border" grid.columnspan="2" cornerradius="2" borderthickness="1">
                <border.background>
                    <imagebrush imagesource="/images/icon.png" stretch="None" />
                </border.background>
            </border>
            <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" />
        </grid>
        <controltemplate.triggers>
            <trigger property="ToggleButton.IsMouseOver" value="true">
                ...
            </trigger>
            <trigger property="ToggleButton.IsChecked" value="true">
                ...
            </trigger>
            <trigger property="IsEnabled" value="False">
                ...
            </trigger>
        </controltemplate.triggers>
    </controltemplate>

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