WPF控件NumericUpDown
WPF控件NumericUpDown示例
（转载请注明出处）
工具：Expression Blend 2 + Visual Studio 2008
语言：C#
框架：.Net Framework 3.5
工程：WPF Windows Application
布局
设计预览
XAML代码：
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="Sample.NumericControl"
x:Name="UserControl"
Width="200" Height="23" MaxHeight="23" MinHeight="23" MinWidth="50" xmlns:Sample="clr-namespace:Sample">
<UserControl.Resources>
<Sample:DoubleValueConverter x:Key="MyValueConverter"/>
<Style x:Key="ArrowButtonStyle" BasedOn="{x:Null}" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Rectangle Stroke="#FFA0A0A0" d:LayoutOverrides="GridBox" RadiusX="1" RadiusY="1" Width="20" Height="8">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
<GradientStop Color="#FFDCDCDC" Offset="0"/>
<GradientStop Color="#FFDCDCDC" Offset="0.991"/>
<GradientStop Color="#FFC8C8C8" Offset="0.496"/>
<GradientStop Color="#FFDCDCDC" Offset="0.549"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Path Fill="#FF5A5A5A" Margin="7,2,7,2" Stretch="Fill" Stroke="{x:Null}" Data="M135.66667,4.6666667 L132.16599,9.4999781 139.16621,9.4999778 z" Width="5" Height="4" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True"/>
<Trigger Property="IsDefaulted" Value="True"/>
<Trigger Property="IsMouseOver" Value="True"/>
<Trigger Property="IsPressed" Value="True"/>
<Trigger Property="IsEnabled" Value="False"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot">
<Border x:Name="ControlBorder" CornerRadius="2,2,2,2" BorderThickness="1,1,1,1" BorderBrush="#FFA0A0A0" Background="#FFFFFFFF">
<Grid x:Name="ValueGrid" Width="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="26"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" BorderBrush="{x:Null}" BorderThickness="0,0,0,0" Margin="2,2,2,2" VerticalContentAlignment="Center" x:Name="ValueText" LostFocus="ValueText_LostFocus" Text="{Binding Path=Value, Converter={StaticResource MyValueConverter}, ElementName=UserControl, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, FallbackValue=0}"/>
<Button HorizontalAlignment="Right" Style="{DynamicResource ArrowButtonStyle}" Width="20" x:Name="UpButton" Grid.Column="1" Margin="0,2,3,0" Click="UpButton_Click" Height="8" VerticalAlignment="Top" />
<Button HorizontalAlignment="Right" Style="{DynamicResource ArrowButtonStyle}" VerticalAlignment="Bottom" Width="20" Height="8" RenderTransformOrigin="0.5,0.5" x:Name="DownButton" Grid.Column="1" Margin="0,0,3,2" Click="DownButton_Click">
<Button.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="-1"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</Button.RenderTransform>
</Button>
</Grid>
</Border>
</Grid>
</UserControl>
后台代码：
using System;
using System.IO;
using System.Net;
using System.ComponentModel;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Navigation;
namespace Sample
{
public partial class NumericControl : INotifyPropertyChanged
{
private double numericValue = 0;
public NumericControl()
{
this.InitializeComponent();
}
public double Value
{
get { return numericValue; }
set
{
numericValue = value;
NotifyPropertyChanged("Value");
}
}
public double Increment { get; set; }
public double MaxValue { get; set; }
public double MinValue { get; set; }
private void UpButton_Click(object sender, RoutedEventArgs e)
{
double newValue = (Value + Increment);
if (newValue > MaxValue)
{
Value = MaxValue;
}
else
{
Value = newValue;
}
}
private void DownButton_Click(object sender, RoutedEventArgs e)
{
double newValue = (Value - Increment);
if (newValue < MinValue)
{
Value = MinValue;
}
else
{
Value = newValue;
}
}
private void ValueText_LostFocus(object sender, RoutedEventArgs e)
{
try
{
Value = double.Parse(ValueText.Text);
}
catch (Exception)
{
Value = 0;
}
}
#region INotifyPropertyChanged Members
public event PropertyChangedEventHandler PropertyChanged;
public void NotifyPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
#endregion
}
[ValueConversion(typeof(double), typeof(string))]
public class DoubleValueConverter : IValueConverter
{
#region IValueConverter Members
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
try
{
return value.ToString();
}
catch (Exception)
{
return "0";
}
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
try
{
return double.Parse((string)value);
}
catch (Exception)
{
return 0;
}
}
#endregion
}
}
要点：
1． 灵活使用布局控件是良好设计的关键。
2． 尽量使用设计器来完成大部分XMAL代码。
3． 这里的Value属性是double型的。
4． 用属性MaxValue，MinValue和Increment来控制最大值、最小值和增量。
5． 实现InotifyPropertyChanged接口，这样当属性Value的值改变时，能够通知与之绑定的ValueText控件。这样做的目的是实现数据的双向绑定。
6． 实现一个IvalueConverter接口的类DoubleValueConverter，用于为数据绑定进行格式转换。
7． 对错误的输入进行适当处理。
预览
将NumericControl放到一个Window或Page中，可以在属性管理器中设置MaxValue，MinValue和Increment，然后开始测试项目：
更多请访问
http://sites.google.com/site/sistudiodev/
http://blog.163.com/tianshi_17th/
http://blog.163.com/tianshi_17th/blog/static/48564189200917337274/