WPF 纯XAML实现NumericUpDown 控件

本文由 飞羽流星(Flithor/毛茸茸松鼠先生/Squirrel.Downy)原创,欢迎分享转载,但禁止以原创二次发布
原文地址：https://www.cnblogs.com/Flithor/archive/2021/05/07/14737862.html

WPF的原生的NumericUpDown可以利用已存在的Slider控件来实现

因为Slider已经实现了NumericUpDown控件应有的所有功能(当前值,上下限,步值,Up/Down快捷键等等)

我们要做的其实就是用模板将Slider的外观改成NumericUpDown的模样即可

<Style TargetType="{x:Type Slider}">
    <Style.Resources>
        <Style x:Key="RepeatButtonStyle" TargetType="{x:Type RepeatButton}">
            <Setter Property="Focusable" Value="false" />
            <Setter Property="IsTabStop" Value="false" />
            <Setter Property="Padding" Value="0" />
            <Setter Property="Width" Value="20" />
        </Style>
    </Style.Resources>
    <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false" />
    <Setter Property="SmallChange" Value="1" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Slider}">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <TextBox Grid.RowSpan="2" Height="Auto"
                                Margin="0" Padding="0"
                                VerticalAlignment="Stretch" VerticalContentAlignment="Center"
                                Text="{Binding Value, RelativeSource={RelativeSource Mode=TemplatedParent}, Mode=TwoWay}">
                        <TextBox.InputBindings>
                            <KeyBinding Gesture="Up" Command="{x:Static Slider.IncreaseSmall}" />
                            <KeyBinding Gesture="Down" Command="{x:Static Slider.DecreaseSmall}" />
                            <KeyBinding Gesture="PageUp" Command="{x:Static Slider.IncreaseLarge}" />
                            <KeyBinding Gesture="PageDown" Command="{x:Static Slider.DecreaseLarge}" />
                        </TextBox.InputBindings>
                    </TextBox>
                    <RepeatButton Grid.Row="0" Grid.Column="1"
                                    Command="{x:Static Slider.IncreaseSmall}"
                                    Style="{StaticResource RepeatButtonStyle}">
                        <Path Data="M4,0 L0,4 8,4 Z" Fill="Black" />
                    </RepeatButton>
                    <RepeatButton Grid.Row="1" Grid.Column="1"
                                    Command="{x:Static Slider.DecreaseSmall}"
                                    Style="{StaticResource RepeatButtonStyle}">
                        <Path Data="M0,0 L4,4 8,0 Z" Fill="Black" />
                    </RepeatButton>
                    <Border x:Name="TrackBackground" Visibility="Collapsed">
                        <Rectangle x:Name="PART_SelectionRange" Visibility="Collapsed" />
                    </Border>
                    <Thumb x:Name="Thumb" Visibility="Collapsed" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

应用此样式后的Slider看起来就和NumericUpDown完全一致了

不过这个有一些小问题 - 比如不能限制文本框的输入，但是已经足够应付一些不需要太正式的场景了。

但是如果一定要限制输入的话，可以阅读我在Stack Overflow留下的答案，内含巧用绑定，用很少的代码实现文本框输入限制的方法！

---

 

后来搜索的时候发现了一篇日本开发者在2008年发出的博文：【WPF】【XAML】SliderでNumericUpDown 实现方式和本文方式相同，但是内部源码链接已经失效了

我是脚本盗传狗 我不知道有隐形文本