存档

帖子标记'的NumericUpDown“

NumericUpDown控件在Silverlight工具包

11月16日,2008年 8评论

介绍

我写的NumericUpDown控制 图像 Silverlight工具包 ,到CodePlex上发布了三个星期前。 有在Win32,WinForm和其他平台的NumericUpDown或类似的控制,但它是新的WPF和Silverlight。 我们经历了轮设计,以确保它的接口和实现简单,可扩展性和可重复使用。 一些设计的好处可能不是很明显,所以它可能有助于编写有关的NumericUpDown和Microsoft.Windows.Controls.Input大会及其相关类型的职位。

概观

NumericUpDown控制项公开下列属性:

  • 最低最高和double类型的价值 :最小和值有默认值0,默认最大为100。 的NumericUpDown确保最低限度的<=值<=最大,不论如何设置这些属性(通过XAML代码,或由用户输入),或在什么样的顺序。
  • DecimalPlaces int类型:决定小数点后多少位显示。 它必须是一个介于0和15之间的值,默认为0。
  • IsEditable的bool类型:如果为true,用户可以键入NumericUpDown控制文本框的值直接进入;如果为false,用户仍然可以通过单击向上或向下重复按钮,或选择文本框改 ​​变值,然后打向上或向下箭头键,或通过代码。
  • 增量双类型:决定多少价值会改变,每次当用户点击向上/向下按钮或点击向上/向下箭头键。 它必须是一个积极的双重价值。

的NumericUpDown触发三个事件,通常按下列顺序:

  1. 的ParseError的EventHandler 类型<UpDownParseErrorEventArgs>时的事件处理程序有一个参数 e类型UpDownParseErrorEventArgs: UpDownParseErrorEventArgs
    e.Text是用户输入的字符串,e.Error试图解析为一个double值e.Text而抛出的异常。 当用户在一个无效的字符串控制的文本框中输入该事件被触发。 该的ParseError事件给客户端代码有机会做自己的错误处理。 如果事件处理程序处理的事件,它应设置e.Handled为true。 如果没有处理该事件的NumericUpDown,默认情况下会放弃用户输入,并刷新文本框中显示先前的值。 ParseError事件触发时,无论哪种方式,以下两个事件通常不会被解雇。
  2. ValueChanging的类型RoutedPropertyChangingEventHandler <double>类型的事件。 事件处理程序需要参数 e的类型RoutedPropertyChangingEventArgs <double>的
    RoutedPropertyChangingEventArgs <T>
    ValueChanging事件被触发控件的Value属性是即将改变从e.OldValuee.NewValue的时候。 这个事件给客户端代码修改或取消该事件的一个机会。 如果事件处理程序修改e.NewValue,以下ValueChanged事件将被解雇与修改e.NewValue。 如果e.IsCancelable是真实的,在事件处理程序可以取消e.Cancel设置为true值改变事件一起,然后NumericUpDown控件的Value属性将不会改变,并没有ValueChanged事件将被解雇。
  3. ValueChanged事件型RoutedPropertyChangedEventHandler <double>类型。 事件处理程序需要参数 e的类型RoutedPropertyChangedEventArgs <double>的
    RoutedPropertyChangedEventArgs <T>
    ValueChanged事件被触发时没有被取消前ValueChanging事件和控件的Value属性已经改变从e.OldValuee.NewValue。 这一事件给客户端代码响应值变化的一个机会。

的NumericUpDown有以下控制合同:

NumericUpDown控制项合同

预计两个模板部件:

  • 一个TextBox名为“文字”,它允许用户直接键入一个值;
  • 名为“微调”,它允许用户拿起值从一个范围,而不是直接键入一个微调。 在默认的模板,它是一个向上和向下重复按钮控制ButtonSpinner。

它也有1 StyleTypeProperty名为“SpinnerStyle”的,允许NumericUpDown控制视觉,而不需要重新模板定制。

设计与实现

下面是类图的NumericUpDown及其相关类型:

类图的NumericUpDown公司

  • UpDownBase <类的层次结构 - UpDownBase <T> < - 的NumericUpDown的目的是:
    • 重用在同类UPDOWN控制,如DomainUpDown控件模板/视觉,DateTimeUpDown等。
    • 重用UPDOWN控制之间的共同逻辑
  • 非通用UpDownBase类的实现各UPDOWN控制的模拟方差。
  • 通用UpDownBase <T>实现:
    • 控制合同文本和动态模板部件,普遍和集中的视觉状态组,和SpinnerStyle财产。
    • Value属性。
    • 的ParseError,ValueChanging的valueChanged事件的。
    • 的ApplyValue,ParseValue和FormatValue值输入和输出协议。
  • 在NumericUpDown类实现的NumericUpDown特定的语义,如最小和最大的性能和最低<=值<=最大胁迫逻辑; DecimalPlaces属性和显示逻辑等。
  • 微调器类是一个抽象,向上/向下按钮,提供更灵活的用户界面范式和控制的支持。
  • ValueChanging事件是试图提供WPF的预览事件。

场景

基本方案

NumericUpDown控制的最基本的情况是用它来允许用户输入或选择一个值从一个范围。 例如:

 Orientation ="Horizontal" > < TextBlock Text ="Age: " /> < input:NumericUpDown x:Name ="age" Width ="100" /> </ StackPanel > <StackPanel 取向 =“水平”> <TextBlock 的Text =“年龄:”/> < 输入:xNumericUpDown: 名称 =“年龄” 宽度 =“100”/> </ StackPanel中 > 
自定义Visual
NumericTextBox:没有微调的NumericUpDown

这可能是共同使用的NumericUpDown没有作为一个特殊的文本框输入一个数字微调(向上和向下按钮)。 WPF / Silverlight控件设计的优点在于控制行为和用户界面分开。 一个没有微调的NumericUpDown实例仍然是一个功能齐全的NumericUpDown:

  • 像最小,最大,价值,IsEditable等所有属性仍然存在,可以通过XAML或代码,如预期的功能设置。
  • 强制执行的逻辑最低<=值<=最大功能如预期。
  • 所有事件(ParseError,ValueChanging,的valueChanged)仍如预期触发。
  • 用户仍然可以使用向上/向下箭头键递增/递减价值。

有两个简单的方法来实现这一点:

  • 改变SpinnerStyle StyleTypedProperty,如下面的XAML隐藏微调:
     x:Name ="age" Width ="100" SpinnerStyle ="{StaticResource HideSpinner}" /> </ StackPanel > “/> < 输入的NumericUpDown X:名称 =”年龄“ 宽度=”100“SpinnerStyle =”{的StaticResource HideSpinner}“/> </ StackPanel中 > 

  • 重新模板:如下图所示,这是很容易使用Blend删除的NumericUpDown的默认模板的微调:

删除微调通过模板

删除微调通过模板

自定义布局

的NumericUpDown使用ButtonSpinner,,和ButtonSpinner [ContentProperty(“内容”)]属性标记的内容属性。 这是一个非常复杂的设计,使像那些的NumericUpDown:

顶/向下布局的NumericUpDown 的NumericUpDown左/右布局

关键是要作出的NumericUpDown的TextBox的ButtonSpinner的内容。 这其实是相当容易的事,与混合:

  • 首先,编辑的NumericUpDown的模板,拖动和拖放文本TextBox元素内微调元素,从而使微调的内容属性。 下面截图NudTopDown模板:

编辑的NumericUpDown模板,移动内部微调的文字。

  • 然后编辑微调细末关闭两个RepeatButton的相对布局到TextBox的模板。 下面的屏幕截图是为NudLeftRight模板,我们需要使StackPanel中的定位水平,使RepeatButton的的VerticalAlignment中心和Horizo​​ntalAlignment左或右。

的NumericUpDown左/右布局

定制行为

我们可以很容易地添加单元行为的NumericUpDown:价值始终捕捉到未来的整数倍递增。 这可以很容易地处理ValueChanging事件。 我们可以提供一个ValueChanging事件的事件处理程序,或覆盖OnValueChanging方法,修改的新的价值,是未来的整数倍递增。 编码是微不足道的,所以我这里不提供代码。

结论

这个职位迄今只集中的NumericUpDown,但实际上我们的设计允许上面的类图中所示的所有类的定制,扩展和重用,像旋转,ButtonSpinner,UpDownBase <T>等,我们可以提供的的DomainUpDown,DateUpDown等类未来版本的Silverlight工具包,这可能进一步证明了电源设计的NumericUpDown。

一如既往,欢迎反馈(意见,建议,更正等)!