[WPF 学习] 8.极简ComboBox的内容模板
程序员文章站
2023-03-26 17:04:11
一、设置内容模板如下 二、前端调用(xaml) 三、代码调用(cs) 四、效果图如下 ......
一、设置内容模板如下
<style x:key="comboboxtogglebutton" targettype="{x:type togglebutton}"> <setter property="overridesdefaultstyle" value="true"/> <setter property="istabstop" value="false"/> <setter property="focusable" value="false"/> <setter property="clickmode" value="press"/> <setter property="template"> <setter.value> <controltemplate targettype="{x:type togglebutton}"> <!--绑定背景色、边框颜色及粗细、圆角5--> <border x:name="templateroot" background="{templatebinding background}" borderthickness="{templatebinding borderthickness}" borderbrush="{templatebinding borderbrush}" snapstodevicepixels="true" cornerradius="5"> <border x:name="splitborder" borderthickness="1" borderbrush="transparent" horizontalalignment="right" margin="0" snapstodevicepixels="true" width="{dynamicresource {x:static systemparameters.verticalscrollbarwidthkey}}"> <!--绑定箭头的颜色为边框颜色--> <path x:name="arrow" data="f1 m 0,0 l 2.667,2.66665 l 5.3334,0 l 5.3334,-1.78168 l 2.6667,0.88501 l0,-1.78168 l0,0 z" fill="{templatebinding borderbrush}" horizontalalignment="center" margin="0" verticalalignment="center"/> </border> </border> </controltemplate> </setter.value> </setter> </style> <controltemplate x:key="comboboxtemplate1" targettype="{x:type combobox}"> <grid x:name="templateroot" snapstodevicepixels="true"> <grid.columndefinitions> <columndefinition width="*"/> <columndefinition minwidth="{dynamicresource {x:static systemparameters.verticalscrollbarwidthkey}}" width="0"/> </grid.columndefinitions> <popup x:name="part_popup" allowstransparency="true" grid.columnspan="2" isopen="{binding isdropdownopen, mode=twoway, relativesource={relativesource templatedparent}}" margin="1" placement="bottom" popupanimation="{dynamicresource {x:static systemparameters.comboboxpopupanimationkey}}"> <theme:systemdropshadowchrome x:name="shadow" color="transparent" minwidth="{binding actualwidth, elementname=templateroot}" maxheight="{templatebinding maxdropdownheight}"> <!--绑定下拉框的背景色、框颜色及粗细、圆角5--> <border x:name="dropdownborder" background="{templatebinding background}" borderthickness="{templatebinding borderthickness}" borderbrush="{templatebinding borderbrush}" cornerradius="5"> <scrollviewer x:name="dropdownscrollviewer"> <grid x:name="grid" renderoptions.cleartypehint="enabled"> <canvas x:name="canvas" horizontalalignment="left" height="0" verticalalignment="top" width="0"> <rectangle x:name="opaquerect" fill="{binding background, elementname=dropdownborder}" height="{binding actualheight, elementname=dropdownborder}" width="{binding actualwidth, elementname=dropdownborder}"/> </canvas> <itemspresenter x:name="itemspresenter" keyboardnavigation.directionalnavigation="contained" snapstodevicepixels="{templatebinding snapstodevicepixels}"/> </grid> </scrollviewer> </border> </theme:systemdropshadowchrome> </popup> <togglebutton x:name="togglebutton" background="{templatebinding background}" borderthickness="{templatebinding borderthickness}" borderbrush="{templatebinding borderbrush}" grid.columnspan="2" ischecked="{binding isdropdownopen, mode=twoway, relativesource={relativesource templatedparent}}" style="{staticresource comboboxtogglebutton}"/> <contentpresenter x:name="contentpresenter" contenttemplate="{templatebinding selectionboxitemtemplate}" content="{templatebinding selectionboxitem}" contenttemplateselector="{templatebinding itemtemplateselector}" contentstringformat="{templatebinding selectionboxitemstringformat}" horizontalalignment="{templatebinding horizontalcontentalignment}" ishittestvisible="false" margin="{templatebinding padding}" snapstodevicepixels="{templatebinding snapstodevicepixels}" verticalalignment="{templatebinding verticalcontentalignment}"/> </grid> </controltemplate>
二、前端调用(xaml)
<combobox template="{dynamicresource comboboxtemplate1}" background="red" borderbrush="blue" borderthickness="2" > <comboboxitem isselected="true"> <textblock foreground="white">aaa</textblock> </comboboxitem> <comboboxitem > <textblock foreground="green">bbb</textblock> </comboboxitem> </combobox>
三、代码调用(cs)
combobox cb = new combobox() { background=brushes.red,borderbrush=brushes.blue,borderthickness=new thickness(2)}; cb.items.add( new textbox { text = "aaa" ,foreground=brushes.white} ); cb.items.add(new textbox { text = "bbb", foreground = brushes.green }); cb.selectedindex = 0; cb.template = resources["comboboxtemplate1"] as controltemplate;
四、效果图如下
上一篇: shell常用命令