欢迎光临
我的个人博客网站

WPF 纯XAML实现NumericUpDown控件

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 实现方式和本文方式相同,但是内部源码链接已经失效了

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » WPF 纯XAML实现NumericUpDown控件
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏