上期教程讲了重复执行的按钮,这次用该按钮开发个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