Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: XAML WPF combobox
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 2:43am
Comments
Matej Hlatky at 25-Mar-13 8:21am
   
Do you want icon on each list item, or only on the selected one?
desmondos at 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 at 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 at 26-Mar-13 10:39am
   
I agree with Matej. You need to have a control template for that.
Rate this: bad
good
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.
 
Thanks
  Permalink  
Comments
Nelek at 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
good
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. http://msdn.microsoft.com/en-us/library/ms752094%28v=vs.85%29.aspx[^]
 
Here is an toggle button example with an icon.
 
<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.
  Permalink  

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

  Print Answers RSS
0 OriginalGriff 230
1 PIEBALDconsult 150
2 DamithSL 125
3 BillWoodruff 108
4 Garth J Lancaster 90
0 OriginalGriff 5,790
1 DamithSL 4,601
2 Maciej Los 4,012
3 Kornfeld Eliyahu Peter 3,480
4 Sergey Alexandrovich Kryukov 3,195


Advertise | Privacy | Mobile
Web01 | 2.8.141220.1 | Last Updated 6 Nov 2013
Copyright © CodeProject, 1999-2014
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