通过WPF的按钮、文本输入框实现了一个简单的SpinBox数字输入用户组件并可以通过数据绑定数值和步长。本文中介绍了通过Xaml代码实现自定义组件的布局，依赖属性的定义和使用等知识点。

完整代码见Github

组合Xaml组件实现基本的组件功能

SpinBox由一个文本输入框和两个箭头按钮组成，我们在Xaml 代码中先把基本的布局做好。其实可以发现自定义用户控件布局和普通的窗体布局的Xaml代码差不多，只不过Xaml的根标签从Window变成了UserControl 。

<UserControl x:Class="SpinBox.MySpinBox"
             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:SpinBox"
             mc:Ignorable="d" 
             d:DesignHeight="36" d:DesignWidth="92">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

        <TextBox x:Name="txtBoxValue" Grid.Column="0"
                 TextAlignment="Center" VerticalContentAlignment="Center"/>
        <Grid Grid.Column="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="5*"/>
                <RowDefinition Height="5*"/>
            </Grid.RowDefinitions>
            <Button Grid.Row="0" x:Name="btnPlus">&#x25B2;</Button>
            <Button Grid.Row="1" x:Name="btnMinor">&#x25BC;</Button>
        </Grid>
    </Grid>
</UserControl>

Nll3jiH1UUQiW1C5qe0cjgf_s3Gd3rOzvK1c_1JFJ4M.png

增加依赖属性

因为我们是WPF中制作的用户组件，因此希望输入的数值、步长的配置等可以在Xaml中实现。因此我们需要给我们新建的用户组件增加依赖属性。这里我们直接通过依赖属性值变化的回调函数来实现文本框信息的更新。

    /// <summary>
    /// SpinBox.xaml 的交互逻辑
    /// </summary>
    [ContentProperty("Value")]
    public partial class MySpinBox : UserControl
    {

        /// <summary>
        /// DepedencyProperty for Step
        /// </summary>
        public static readonly DependencyProperty StepProperty
            = DependencyProperty.Register("Step", typeof(double),
                typeof(MySpinBox), new PropertyMetadata(1.0));

        /// <summary>
        /// DepedencyProperty for Value
        /// </summary>
        public static readonly DependencyProperty ValueProperty
            = DependencyProperty.Register("Value", typeof(double),
                typeof(MySpinBox), new FrameworkPropertyMetadata(0.0,
                     FrameworkPropertyMetadataOptions.BindsTwoWayByDefault
                    | FrameworkPropertyMetadataOptions.Journal
                    | FrameworkPropertyMetadataOptions.AffectsRender,
                    new PropertyChangedCallback(OnValueChanged))
                );


        public double Value
        {
            get => (double)GetValue(ValueProperty);
            set
            {
                if (Value != value)
                {
                    SetValue(ValueProperty, value);
                }
            }
        }

        public double Step
        {
            get => (double)GetValue(StepProperty);
            set
            {
                if (Step != value)
                {
                    SetValue(StepProperty, value);
                }
            }
        }

        private static void OnValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var spinBox = d as MySpinBox;
            if (spinBox != null)
            {
                spinBox.txtBoxValue.Text = e.NewValue.ToString();
            }
        }
    }

接下来我们在MainWindow.xaml中增加刚刚编写好的MySpinBox组件

<Window x:Class="SpinBox.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:SpinBox"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <local:MySpinBox MaxHeight="64" MaxWidth="128" Step="2" Value="5"/>
    </Grid>
</Window>

aIby9fvsAzbREuM8AxH16P-YfQPKyeZZWv7W_xdoOhY.png

增加事件处理

我们在自定义组件中增加按钮组件的响应

<Button Grid.Row="0" x:Name="btnPlus" Click="btnPlus_Click">&#x25B2;</Button>
<Button Grid.Row="1" x:Name="btnMinor" Click="btnMinor_Click">&#x25BC;</Button>

在C#代码中增加对应的响应逻辑就能实现完整的效果

private void btnPlus_Click(object sender, RoutedEventArgs e)
{
    Value += Step;
}

private void btnMinor_Click(object sender, RoutedEventArgs e)
{
    Value -= Step;
}

最后需要说明下的是按钮的Unicode值得十六进制表示分别是0x25B2 和0x25BC 。Xaml本质是一种XML文本，因此在其中表示Unicode要使用XML对应的语法格式。

最终效果

0mXuWATdDulTh9cq3puJypQD824gtsmMleGRQOb-_Co.gif