欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

四、效果图如下
[WPF 学习] 8.极简ComboBox的内容模板