[WPF 学习] 8.极简ComboBox的内容模板

一、设置内容模板如下

 <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;

四、效果图如下