- A+
所属分类：.NET技术
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" />
<!-- 重写Slider的模板 --> <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 RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Value}">
<!-- 给TextBox绑定上下命令 --> <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>
<!-- 由于Slider的内部实现要求存在这些必要组件,所以必须保留,但是设置为隐藏即可 --> <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 实现方式和本文方式相同，但是内部源码链接已经失效了
