博客园_Life Is Art

【WPF】自定义金额输入控件CurrencyEditor和限制输入控件FieldTextBox

2011-04-03T01:46:00Z

原来没有考虑到+/-输入的情况，已修改

由于项目的需要，我们在某些场合下需要对输入做限制，例如金额，需要靠右对齐，需要显示货币符号，需要显示分隔符号等等。相信大家都碰到过这种需求。上网找这种控件也很难找，要么就是收费的，要么就是不太符合国人的习惯。例如，原来用过一个第三方NetAdvantage控件，但是它是严格按照货币的格式化方式来格式化的，不适合国人的金额格式习惯。因为国人的金额格式习惯是类似于 $#,###,###.##，但是某些币种，小数点是','，分组符号是'.'，是反过来的，很容易让人看错；而某些币种的输入方式是从右往左，就更不适应了。

因此，自己写了一个金额输入控件CurrencyEditor，可以根据不同的语言显示不同的货币符号和限制小数位数。没有直接用.Net的格式化decimal，而是自己调用.Net格式化之后，再处理为“货币符号+金额值”的形式。

CurrencyEditor继承自TextBox，要点是在OnTextChanged中去解析文本是否合法，并且将文本格式化，然后设置光标的位置。其实TextBox还有一个TextInput事件，但是在这个事件中处理的问题在于，复制粘贴操作不会触发TextInput，会导致用户可以用复制粘贴的方式录入非法文本。其次，就是在OnSelectionChanged中去检查光标的位置，要保证用户录入的舒适性。在OnPreviewKeyDown中处理一些非法录入，和控制光标位置，例如按下'.'直接跳到小数点之后，同时控制用户通过DEL和Backspace不会去删除掉货币符号和小数点。详情还是见代码吧，注释很详尽。

另外一个控件是限制输入的FieldTextBox，限制有两方面，一个是输入的内容，有Text和Digit两种。Text可以任意输入，Digit只能输入数字（例如，在输入卡号的时候很有用）。另一个是限制输入的字节长度，这个限制在输入一个报文中，按照字节有长度限制的字段时很有用。WPF的TextBox虽然有一个MaxLength，但是限制的是字符长度。例如，“我”是两个字节，却只是一个字符。FieldTextBox的处理逻辑与CurrencyEditor类似，但是要稍微简单一点。

附代码，跟大家分享一下:)

http://files.cnblogs.com/RMay/WpfInputs.zip

本文链接

【WPF】自定义GridLineDecorator给ListView画网格

2010-12-27T08:59:00Z

感谢 rgqancy 指出的Bug，已经修正

先给个效果图：

使用时的代码：

<l:GridLineDecorator>
<ListView ItemsSource="{Binding}">
<ListView.View>
<GridView>
<GridViewColumn Header="Id" DisplayMemberBinding="{Binding Id}"/>
<GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}"/>
</GridView>
</ListView.View>
</ListView>
</l:GridLineDecorator>

------------------------正文-------------------------------

经常看见有人问在使用WPF的ListView的时候，怎样能够有网格线的效果。例如http://www.bbniu.com/forum/thread-1090-1-1.html

对这个问题，首先能想到的解决办法是，在GridViewColumn的CellTemplate中，放上一个Border，然后设置Border的BorderBrush和BorderThickness。例如：

<GridViewColumn.CellTemplate>
<DataTemplate>
<Border BorderBrush="LightGray" BorderThickness="1" UseLayoutRounding="True">
<TextBlock Text="{Binding Id}"/>
</Border>
</DataTemplate>
</GridViewColumn.CellTemplate>

但是，很快你会发现，Border不能随着列宽的变化而变化，就像这样：

而且，即使将ListView的HorizontalContentAlignment置为Stretch，也不能起到作用。必须在ListViewItem上设置HorizontalContentAlignment="True"。因此，必须添加一个ListViewItem的样式，统一指定：

但问题还是没有解决，因为Border不能填满整个Cell，就像这样：

于是，你得小心的设置各个Border的Margin，来让它们“恰好”都连在一起，看上去就像是连续的线条。也许调整Margin还不够，还得修改ListViewItem的模板；模板修改好了，发现创建这么多的Border性能又跟不上；最头大的是，每个Column都要指定一次CellTemplate，万一哪天边线的颜色要统一调整一下……

因此，这种办法固然可行，操作起来其实麻烦的要死。

有没有一种方式，可以直接在ListView上“画线”呢？固然，我们可以自己写一个ListView，在OnRender里面画线什么的，但理想的情况还是能够在可以不改动任何现有控件的条件下，实现这个画网格的功能。同时，这个网格线的颜色可以随意调整就更好了。

因此，总的要求如下：

1、可以画网格

2、不用改动ListView，或者自己写ListView

3、可以调整网格的颜色

如果对设计模式熟悉的话，“不改动现有代码，增加新的功能”，应该马上能够想到装饰器模式。其实，WPF中本身就有Decorator这个控件，而常用的Border就是一个Decorator，可以帮助控件画背景色，画边线等等。

因此，如果能够有这么一个Decorator，把ListView往里面一放，就能有画线的功能，岂不快哉？不过，这里我并不打算直接继承Decorator来修改，因为WPF提供的Decorator是针对所有UIElment的，而我们只想针对ListView。

GridLineDecorator直接继承自FrameworkElement，并且通过重载VisualChild和LogicalChild相关的代码来显示其包装的ListView。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Markup;
using System.Windows.Media;
using System.Windows.Threading;

namespace ListViewWithLines
{
[ContentProperty("Target")]
public class GridLineDecorator : FrameworkElement
{
private ListView _target;
private DrawingVisual _gridLinesVisual = new DrawingVisual();
private GridViewHeaderRowPresenter _headerRowPresenter = null;

public GridLineDecorator()
{
this.AddVisualChild(_gridLinesVisual);
this.AddHandler(ScrollViewer.ScrollChangedEvent, new RoutedEventHandler(OnScrollChanged));
}

#region GridLineBrush

/// <summary>
/// GridLineBrush Dependency Property
/// </summary>
public static readonly DependencyProperty GridLineBrushProperty =
DependencyProperty.Register("GridLineBrush", typeof(Brush), typeof(GridLineDecorator),
new FrameworkPropertyMetadata(Brushes.LightGray,
new PropertyChangedCallback(OnGridLineBrushChanged)));

/// <summary>
/// Gets or sets the GridLineBrush property. This dependency property
/// indicates ....
/// </summary>
public Brush GridLineBrush
{
get { return (Brush)GetValue(GridLineBrushProperty); }
set { SetValue(GridLineBrushProperty, value); }
}

/// <summary>
/// Handles changes to the GridLineBrush property.
/// </summary>
private static void OnGridLineBrushChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
((GridLineDecorator)d).OnGridLineBrushChanged(e);
}

/// <summary>
/// Provides derived classes an opportunity to handle changes to the GridLineBrush property.
/// </summary>
protected virtual void OnGridLineBrushChanged(DependencyPropertyChangedEventArgs e)
{
DrawGridLines();
}

#endregion

#region Target

public ListView Target
{
get { return _target; }
set
{
if (_target != value)
{
if (_target != null) Detach();
RemoveVisualChild(_target);
RemoveLogicalChild(_target);

_target = value;

AddVisualChild(_target);
AddLogicalChild(_target);
if (_target != null) Attach();

InvalidateMeasure();
}
}
}

private void GetGridViewHeaderPresenter()
{
if (Target == null)
{
_headerRowPresenter = null;
return;
}
_headerRowPresenter = Target.GetDesendentChild<GridViewHeaderRowPresenter>();
}

#endregion

#region DrawGridLines

private void DrawGridLines()
{
if (Target == null) return;
if (_headerRowPresenter == null) return;

var itemCount = Target.Items.Count;
if (itemCount == 0) return;

var gridView = Target.View as GridView;
if (gridView == null) return;

// 获取drawingContext
var drawingContext = _gridLinesVisual.RenderOpen();
var startPoint = new Point(0, 0);
var totalHeight = 0.0;

// 为了对齐到像素的计算参数，否则就会看到有些线是模糊的
var dpiFactor = this.GetDpiFactor();
var pen = new Pen(this.GridLineBrush, 1 * dpiFactor);
var halfPenWidth = pen.Thickness / 2;
var guidelines = new GuidelineSet();

// 画横线
for (int i = 0; i < itemCount; i++)
{
var item = Target.ItemContainerGenerator.ContainerFromIndex(i) as ListViewItem;
if (item != null)
{
var renderSize = item.RenderSize;
var offset = item.TranslatePoint(startPoint, this);

var hLineX1 = offset.X;
var hLineX2 = offset.X + renderSize.Width;
var hLineY = offset.Y + renderSize.Height;

// 加入参考线，对齐到像素
guidelines.GuidelinesY.Add(hLineY + halfPenWidth);
drawingContext.PushGuidelineSet(guidelines);
drawingContext.DrawLine(pen, new Point(hLineX1, hLineY), new Point(hLineX2, hLineY));
drawingContext.Pop();

// 计算竖线总高度
totalHeight += renderSize.Height;
}
}

// 画竖线
var columns = gridView.Columns;
var headerOffset = _headerRowPresenter.TranslatePoint(startPoint, this);
var headerSize = _headerRowPresenter.RenderSize;

var vLineX = headerOffset.X;
var vLineY1 = headerOffset.Y + headerSize.Height;

foreach (var column in columns)
{
var columnWidth = column.GetColumnWidth();
vLineX += columnWidth;

// 加入参考线，对齐到像素
guidelines.GuidelinesX.Add(vLineX + halfPenWidth);
drawingContext.PushGuidelineSet(guidelines);
drawingContext.DrawLine(pen, new Point(vLineX, vLineY1), new Point(vLineX, totalHeight));
drawingContext.Pop();
}

drawingContext.Close();
}

#endregion

#region Overrides to show Target and grid lines

protected override int VisualChildrenCount
{
get { return Target == null ? 1 : 2; }
}

protected override System.Collections.IEnumerator LogicalChildren
{
get { yield return Target; }
}

protected override Visual GetVisualChild(int index)
{
if (index == 0) return _target;
if (index == 1) return _gridLinesVisual;
throw new IndexOutOfRangeException(string.Format("Index of visual child '{0}' is out of range", index));
}

protected override Size MeasureOverride(Size availableSize)
{
if (Target != null)
{
Target.Measure(availableSize);
return Target.DesiredSize;
}

return base.MeasureOverride(availableSize);
}

protected override Size ArrangeOverride(Size finalSize)
{
if (Target != null)
Target.Arrange(new Rect(new Point(0, 0), finalSize));

return base.ArrangeOverride(finalSize);
}

#endregion

#region Handle Events

private void Attach()
{
_target.Loaded += OnTargetLoaded;
_target.Unloaded += OnTargetUnloaded;
}

private void Detach()
{
_target.Loaded -= OnTargetLoaded;
_target.Unloaded -= OnTargetUnloaded;
}

private void OnTargetLoaded(object sender, RoutedEventArgs e)
{
if (_headerRowPresenter == null)
GetGridViewHeaderPresenter();
DrawGridLines();
}

private void OnTargetUnloaded(object sender, RoutedEventArgs e)
{
DrawGridLines();
}

private void OnScrollChanged(object sender, RoutedEventArgs e)
{
DrawGridLines();
}

#endregion
}
}

其中，Target是一个属性，类型是ListView，而有一个_guidLinesVisual，则是用于绘制网格的DrawingVisual。有人可能会问，为什么不直接重载OnRender方法，在里面画线呢？

理由是，重载OnRender方法画线，当ListView设置了背景后，会将我们画的线盖住。这是因为控件的背景是在模板中放了一个Border来绘制的，Border也是在OnRender中绘制的，它后绘制，我们的先绘制，会将我们画的线给盖住。同时，你会发现，当ListView的Column改变大小的时候，并不会引起GridLineDecorator重绘，所以网格线无法同步变化。

其实，GridLineDecorator里面的GetVisualChild重载也非常讲究：

protected override Visual GetVisualChild(int index)
{
if (index == 0) return _target;
if (index == 1) return _gridLinesVisual;
throw new IndexOutOfRangeException(string.Format("Index of visual child '{0}' is out of range", index));
}

首先返回的是ListView，接着才是_gridLinesVisual。
不过，即使是使用DrawingVisual，也会有Column宽度改变无法通知重绘的问题。解决这个问题有好几个思路：
1、监听一下GridViewColumn的宽度变化
2、监听CompositionTarget.Rendering事件
第一个办法，不可行，因为GridViewColumn的宽度变化事件你找不到，第二办法是可行，不过效率嘛……

在经过一番研究之后，终于找到了一个可行的办法，监听ScrollViewer的ScrollChanged事件，因为ListView内部是放置了两个ScrollViewer，一个用于显示Header，一个用于显示Items。当Column的宽度变化时，会触发ScrollViewer的ScrollChanged事件。

因此，在构造函数里面：

public GridLineDecorator()
{
this.AddVisualChild(_gridLinesVisual);
this.AddHandler(ScrollViewer.ScrollChangedEvent, new RoutedEventHandler(OnScrollChanged));
}

画线的逻辑，主要就是遍历所有的Container（其实是ListViewItem），计算其相对于GridLineDecorator的位移，算出横线和纵线的坐标和长度，画线。代码比较多，大家可以下载以后自己看。

细心的童鞋可能会发现，有时候底部的线条在ListViewItem显示不完整时，没有画到最下端，这是由于ListView做了Virtualize处理。大家可以设置VirtualizingStackPanel.IsVirtualizing="False"来强制绘制。

附代码：http://files.cnblogs.com/RMay/ListViewWithLines.zip

本文链接

【WPF】WPF 4.0 DatePicker 快速录入

2010-05-27T09:35:00Z

先发表在棒棒牛了，转过来吧。传送门：http://www.bbniu.com/forum/viewthread.php?tid=752&page=1&extra=#pid6692WPF 4.0的DatePicker在通过键盘录入日期的时候是非常让人郁闷的。必须按照日期的格式来完整输入例如，比如输入“2010/10/10”才能识别。而实际上在一些要求快速录入的...

【WPF】监听WPF的WebBrowser控件弹出新窗口的事件

2010-05-27T07:34:00Z

WPF中自带一个WebBrowser控件，当我们使用它打开一个网页，例如百度，然后点击它其中的链接时，如果这个链接是会弹出一个新窗口的，那么它会生生的弹出一个IE窗口来，而不是在内部跳到该链接。如果使用Winform的WebBrowser控件，我们可以监听它的NewWindow事件，在这个事件中做一些处理，例如，在新建一个Tab来打开，或者控制它在当前WebBrowser中跳转。很不幸的是，WPF...

【WPF】如何让弹出的窗口"阻塞"

2009-09-02T12:43:00Z

还存在一些问题，再研究一下1、ComponentDispatcher其实可以不用2、new一个DispatcherFrame其实是把一个消息循环（姑且称作嵌套消息循环）当做一个DispatchFrame来处理，在这个消息循环结束之前，原来的代码就是阻塞的3、正是因为第二个原因，如果再次弹出一个窗口，将是在前一个嵌套消息循环中，再次执行2，也就会导致第一个窗口关闭，并不会立即执行后面的代码。【场景描...

Michael去了，谁来让我Rock

2009-06-26T12:22:00Z

仅此纪念Michael.Jackson

PNG图片导致的WPF性能问题

2009-06-05T09:04:00Z

WPF,Performance,XPE

【WPF】用CustomControl打造WPF版的Marquee

2009-01-20T09:15:00Z

控件代码已经更新，支持上下左右四个方向。VS2010工程/Files/RMay/WPF_Marquee/WpfMarquee.zip我们知道在html中有一个marquee标签，可以很方便的实现文字滚动的效果，比如如下简单的声明：文本信息在WPF里面，当然，我们可以用Animation...

【WPF】在Style中设置ToolTip的问题

2009-01-14T07:17:00Z

更新：在网上找到更正规的解决方案http://thewpfblog.com/?p=61今天在群里有人问到：“怎样设置 TextBlock.ToolTip 的width，使得过长的字符串自动换行”其实ToolTip是一个object，我们可以在其中放置任何东西，所以要解决这个问题，其实很简单，只需要写如下的xaml代码：

【WPF】Binding's Little Trick

2008-12-10T09:39:00Z

今天为了帮别人解决一个3D的问题，需要将自己以前做的一个Demo发过去，结果，原来能正常运行的程序现在无法运行了。调试时报出的错误是：“无法将“System.Windows.Media.Media3D.PerspectiveCamera”值分配到对象“System.Windows.Controls.Viewport3D”的属性“...