WPF自定义控件的制作

　　因为有时候需要定制化的控件，需要多个控件的组合及复杂功能的集成，这样可以考虑自定义用户控件。下面分享一个简单的数值增减功能的自定义控件作为说明。

效果图如下：

 

1、创建自定义用户控件（添加->新建项->用户控件）

 

2、编写xaml

<usercontrol x:class="xxx.自定义控件.mynumericupdown"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:xxx.自定义控件"
             mc:ignorable="d" 
             d:designheight="30" d:designwidth="120">
    <grid>
        <grid.columndefinitions>
            <columndefinition width="auto"/>
            <columndefinition width="40*"/>
            <columndefinition width="40*"/>
        </grid.columndefinitions>

        <textbox name="textbox_num" grid.column="0" text="1" fontsize="20" textalignment="center" minwidth="40" verticalcontentalignment="center"/>
        <button name="button_add" grid.column="1" content="加" click="button_add_click" background="aqua"/>
        <button name="button_sub" grid.column="2" content="减" click="button_sub_click" background="aqua"/>
        
    </grid>
</usercontrol>

ui比较简单，我就不解释了...

 

2、编写后台代码

 /// <summary>
    /// mynumericupdown.xaml 的交互逻辑
    /// </summary>
    public partial class mynumericupdown : usercontrol
    {

        /// <summary>
        /// 当前值
        /// </summary>
        public int num
        {
            get
            {
                int value = 0;
                this.dispatcher.invoke(new action(() =>
                    value = convert.toint32(this.textbox_num.text.trim())
                ));
                return value;
            }
            set
            {
                this.dispatcher.invoke(new action(() =>
                {
                    this.textbox_num.text = value.tostring();
                }));                
            }
        }

        public mynumericupdown()
        {
            initializecomponent();
        }
        
        private void button_add_click(object sender, routedeventargs e)
        {
            int num = int.parse(this.textbox_num.text.trim());
            if (num > 0)
            {
                this.textbox_num.text = (num + 1).tostring();
            }
        }

        private void button_sub_click(object sender, routedeventargs e)
        {
            int num = int.parse(this.textbox_num.text.trim());
            if (num > 0)
            {
                if ((num - 1) == 0)
                    return;
                this.textbox_num.text = (num - 1).tostring();
            }
        }
    }

逻辑也比较简单，两个按键的点击事件，每次加一或减一。值得说明的是公开的属性(该例只有一个公开属性就是控件的数值num)，属性需要进行读写器的包装，读取器和设置器操作控件textbox时最好需要invoke回调ui线程进行操作，否则其他线程操作时就会报错(当然也可以在外部invoke)。

 

3、控件调用

用户控件继承usercontrol，usercontrol继承于contentcontrol，所以可以和一般控件一样调用，但是由于命名空间不一致，需要声明命名空间。

xmlns:z="clr-namespace:xxx.自定义控件"　　//windows标签中声明命名空间
<z:mynumericupdown x:name="mynumericupdown_pagenum" width="120" height="30"></z:mynumericupdown>

 

其实最好可以把对外需要进行数据绑定的属性写成依赖项属性，这样就能拥有依赖项属性的特点(如绑定)，不过比较复杂，下次再具体说明。