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 實現方式和本文方式相同,但是內部源碼鏈接已經失效了

我是腳本盜傳狗 我不知道有隱形文本


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM