WPF 编程技术递加减数字控件NumericUpDown

上期教程讲了重复执行的按钮，这次用该按钮开发个NumericUpDown，控件功能递加减数字，先演示看下效果。

<Style TargetType="{x:Type nb:NbNumericUpDown}">
        <Setter Property="Foreground" Value="{StaticResource Nb.Label.Foreground}" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Padding" Value="0" />
        <Setter Property="MinWidth" Value="160" />
        <Setter Property="FontSize" Value="{StaticResource Nb.FontSize.18}" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="TextWidth" Value="120" />
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type nb:NbNumericUpDown}">
                    <Border HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"
                            Padding="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <nb:NbRepeatButton Grid.Column="0" Content="-" Delay="0" Command="{x:Static nb:NbNumericUpDown.PageUpCommand}" />
                            <nb:NbTextBox x:Name="text" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Width="{TemplateBinding TextBoxWidth}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                Margin="5,0,5,0" Height="35" InputMode="Dialog" MinInt="{TemplateBinding Minimum}" MaxInt="{TemplateBinding Maximum}" 
                                Text="{Binding Value,UpdateSourceTrigger=PropertyChanged, RelativeSource={RelativeSource AncestorType={x:Type ScrollBar}}}" />
                            <nb:NbRepeatButton Grid.Column="2" Content="+" Delay="0" Command="{x:Static nb:NbNumericUpDown.PageDownCommand}" />
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    

public class NbNumericUpDown : ScrollBar
    {
        static NbNumericUpDown()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(NbNumericUpDown), new FrameworkPropertyMetadata(typeof(NbNumericUpDown)));
        }

        public NbNumericUpDown()
        {
            //this.SetResourceReference(NbScrollBar.StyleProperty, nameof(NbScrollBar));
        }

        public double TextBoxWidth
        {
            get { return (double)GetValue(TextBoxWidthProperty); }
            set { SetValue(TextBoxWidthProperty, value); }
        }

        // Using a DependencyProperty as the backing store for RadiusX.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty TextBoxWidthProperty =
            DependencyProperty.Register("TextBoxWidth", typeof(double), typeof(NbNumericUpDown), new PropertyMetadata(110d));
    }

调用控件实例代码：

<nb:NbNumericUpDown Margin="20,0,0,0" Maximum="500" TextBoxWidth="80" Value="{Binding BarCodeLength,FallbackValue=0}" />

在文本框控件中，加入枚举类型InputMode="Dialog",TextBox鼠标按钮处理事件。

 protected override void OnMouseDown(MouseButtonEventArgs e)
        {
            base.OnMouseDown(e);
            if (InputMode == TextBoxInputMode.Dialog)
            {                
                var result = NbNumericBox.Show((e.Source as TextBox).Text);
                if (result.DialogResult == NbNumberResult.Yes)
                {
                    this.Text = result.Value;
                }                
            }
        }

数字输入界面实现很简单

 推荐一款WPF MVVM框架开源项目：Newbeecoder.UI

Newbeecoder.UI开源项目

Demo下载：

Newbeecoder.UI开源项目https://share.weiyun.com/py6W1dcK