im new wpf application. need customize combobox image.
i have tried example http://www.eidias.com/blog/2012/2/20/customizing-wpf-combo-box-style
<window x:class="win.window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" title="window1" height="300" width="300" background="red"> <window.resources> <controltemplate x:key="customtogglebutton" targettype="togglebutton"> <grid> <border name="border" /> <border name="smallborder" /> <path name="arrow" /> </grid> </controltemplate> <style targettype="{x:type comboboxitem}"> <setter property="frameworkelement.overridesdefaultstyle" value="true" /> <setter property="control.template"> <setter.value> <controltemplate targettype="{x:type comboboxitem}"> <border> <contentpresenter /> </border> </controltemplate> </setter.value> </setter> </style> <style targettype="{x:type combobox}"> <setter property="frameworkelement.overridesdefaultstyle" value="true" /> <setter property="control.template"> <setter.value> <controltemplate targettype="combobox"> <grid> <togglebutton template="{staticresource customtogglebutton}" /> <contentpresenter /> <textbox /> <popup> <grid> <border> <scrollviewer> <itemspresenter /> </scrollviewer> </border> </grid> </popup> </grid> </controltemplate> </setter.value> </setter> </style> </window.resources> <grid> <combobox grid.column="1" height="40" width="200" > <comboboxitem name="item1">item1</comboboxitem> <comboboxitem name="item2">item2</comboboxitem> <comboboxitem name="item3">item3</comboboxitem> </combobox> </grid> </window> this output works textbox.please me guys!
i liked format , decided plagiarise/reproduce it. please find xaml below. hope helps someone...
<window x:class="combostyle.mainwindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" title="mainwindow" height="350" width="525"> <window.resources> <controltemplate x:key="comboboxtogglebutton" targettype="{x:type togglebutton}"> <grid> <grid.columndefinitions> <columndefinition /> <columndefinition width="20" /> </grid.columndefinitions> <border x:name="border" grid.columnspan="2" cornerradius="0" background="#ff3f3f3f" borderbrush="#ff97a0a5" borderthickness="1" /> <border grid.column="0" cornerradius="0" margin="1" background="#ff3f3f3f" borderbrush="#ff97a0a5" borderthickness="0,0,1,0" /> <path x:name="arrow" grid.column="1" fill="white" horizontalalignment="center" verticalalignment="center" data="m0,0 l0,2 l4,6 l8,2 l8,0 l4,4 z" /> </grid> <!--<controltemplate.triggers> <trigger property="togglebutton.ismouseover" value="true"> <setter targetname="border" property="background" value="#808080" /> </trigger> <trigger property="togglebutton.ischecked" value="true"> <setter targetname="border" property="background" value="#e0e0e0" /> </trigger> <trigger property="isenabled" value="false"> <setter targetname="border" property="background" value="#eeeeee" /> <setter targetname="border" property="borderbrush" value="#aaaaaa" /> <setter property="foreground" value="#888888"/> <setter targetname="arrow" property="fill" value="#888888" /> </trigger> </controltemplate.triggers>--> </controltemplate> <controltemplate x:key="comboboxtextbox" targettype="{x:type textbox}"> <border x:name="part_contenthost" focusable="false" background="{templatebinding background}" /> </controltemplate> <style x:key="{x:type combobox}" targettype="{x:type combobox}"> <setter property="snapstodevicepixels" value="true"/> <setter property="overridesdefaultstyle" value="true"/> <setter property="scrollviewer.horizontalscrollbarvisibility" value="auto"/> <setter property="scrollviewer.verticalscrollbarvisibility" value="auto"/> <setter property="scrollviewer.cancontentscroll" value="true"/> <setter property="minwidth" value="120"/> <setter property="minheight" value="20"/> <setter property="foreground" value="white"/> <setter property="template"> <setter.value> <controltemplate targettype="{x:type combobox}"> <grid> <togglebutton name="togglebutton" template="{staticresource comboboxtogglebutton}" grid.column="2" focusable="false" ischecked="{binding path=isdropdownopen,mode=twoway,relativesource={relativesource templatedparent}}" clickmode="press"> </togglebutton> <contentpresenter name="contentsite" ishittestvisible="false" content="{templatebinding selectionboxitem}" contenttemplate="{templatebinding selectionboxitemtemplate}" contenttemplateselector="{templatebinding itemtemplateselector}" margin="3,3,23,3" verticalalignment="center" horizontalalignment="left" /> <textbox x:name="part_editabletextbox" style="{x:null}" template="{staticresource comboboxtextbox}" horizontalalignment="left" verticalalignment="center" margin="3,3,23,3" focusable="true" background="#ff3f3f3f" foreground="green" visibility="hidden" isreadonly="{templatebinding isreadonly}"/> <popup name="popup" placement="bottom" isopen="{templatebinding isdropdownopen}" allowstransparency="true" focusable="false" popupanimation="slide"> <grid name="dropdown" snapstodevicepixels="true" minwidth="{templatebinding actualwidth}" maxheight="{templatebinding maxdropdownheight}"> <border x:name="dropdownborder" background="#ff3f3f3f" borderthickness="1" borderbrush="#888888"/> <scrollviewer margin="4,6,4,6" snapstodevicepixels="true"> <stackpanel isitemshost="true" keyboardnavigation.directionalnavigation="contained" /> </scrollviewer> </grid> </popup> </grid> <controltemplate.triggers> <trigger property="hasitems" value="false"> <setter targetname="dropdownborder" property="minheight" value="95"/> </trigger> <trigger property="isenabled" value="false"> <setter property="foreground" value="#888888"/> </trigger> <trigger property="isgrouping" value="true"> <setter property="scrollviewer.cancontentscroll" value="false"/> </trigger> <trigger sourcename="popup" property="popup.allowstransparency" value="true"> <setter targetname="dropdownborder" property="cornerradius" value="0"/> <setter targetname="dropdownborder" property="margin" value="0,2,0,0"/> </trigger> <trigger property="iseditable" value="true"> <setter property="istabstop" value="false"/> <setter targetname="part_editabletextbox" property="visibility" value="visible"/> <setter targetname="contentsite" property="visibility" value="hidden"/> </trigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> <style.triggers> </style.triggers> </style> <!-- simplestyles: comboboxitem --> <style x:key="{x:type comboboxitem}" targettype="{x:type comboboxitem}"> <setter property="snapstodevicepixels" value="true"/> <setter property="foreground" value="white"/> <setter property="overridesdefaultstyle" value="true"/> <setter property="template"> <setter.value> <controltemplate targettype="{x:type comboboxitem}"> <border name="border" padding="2" snapstodevicepixels="true"> <contentpresenter /> </border> <controltemplate.triggers> <trigger property="ishighlighted" value="true"> <setter targetname="border" property="background" value="#ff4f4f4f"/> </trigger> <trigger property="isenabled" value="false"> <setter property="foreground" value="#888888"/> </trigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> </style> </window.resources> <grid> <border padding="10" background="#ff3f3f3f"> <combobox grid.column="1" height="30" width="250" > <comboboxitem name="item1">item1</comboboxitem> <comboboxitem name="item2">item2</comboboxitem> <comboboxitem name="item3">item3</comboboxitem> <comboboxitem name="item4">item4</comboboxitem> <comboboxitem name="item5">item5</comboboxitem> <comboboxitem name="item6">item6</comboboxitem> </combobox> </border> </grid> 
Comments
Post a Comment