c#,使用WPF实现iPhone的短信框效果
先来看看iPhone的短信界面,就当是麻豆了 ^-^。
刚看到这个界面,口水就止不住啊。
擦干口水,赶紧模仿。
最初做法:
基于UserControl,自己做一个用户控件,内含TextBolck可以实现多行显示文本,
使用Path和Geometry将带有小尾巴的图形画出来,然后再画上光照效果,就大功
告成了。
虽然效果能做出来,但是细细想来,还是有不妥。
问题就在于,自己作的这个控件,只能显示文字,为了要显示图片,还得写一堆代码,
太过死板,为什么就不能利用WPF的框架或特点,让这个控件变的灵活一些,只要些
绘图效果和控制布局的效果就OK了,至于内部包含的是文字还是图片,就交给WPF去
完成好了。
基于此,立马想到为TextBlock控件写个Template,但稍稍一定神发现,用Template
完成复杂图形的绘制有些虚无缥缈,结果放弃。
思路:
在老大的点化之下,采用Decorater。乍看之下,有点摸不着北,细细看来,发现,
Border就是从此类继承而来,说白了就是包含一个子元素的容器,自定义的Decorater
负责绘制图形背景和管理子元素的显示,至于显示的是图片还是文字就交给子元素去
完成。
为什么不用Border而用它,道理就是用它就足够了,干净。
(当然了,容器还有Panel,ContentControl,在这里用Decorater就够了)。
先看一下最终效果:
主要就是用到基类的方法:
MeasureOverride:通过测量子元素来计算需要的空间的大小。
ArrangeOverride:排列子元素的显示位置。
OnRender:自绘函数,带小尾巴的图形绘制就在这里了,等价于OnPaint。
自定义IDecorator类:
public class iDecorator : Decorator {
public iDecorator() {
this.HorizontalAlignment = System.Windows.HorizontalAlignment.Right;
}
public bool Direction {
get { return (bool)GetValue(DirectionProperty); }
set { SetValue(DirectionProperty, value); }
}
protected override Size MeasureOverride(Size constraint) {
Size result = new Size();
if (Child != null) {
Child.Measure(constraint);
result.Width = Child.DesiredSize.Width + padding.Left + padding.Right;
result.Height = Child.DesiredSize.Height + padding.Top + padding.Bottom;
if (result.Height < 35) {
result.Height = 35;
padding.Top = padding.Bottom = (result.Height - Child.DesiredSize.Height) / 2;
}
}
return result;
}
protected override Size ArrangeOverride(Size arrangeSize) {
if (Child != null) {
Child.Arrange(new Rect(new Point(padding.Left, padding.Top),
Child.DesiredSize));
}
return arrangeSize;
}
protected override void OnRender(DrawingContext dc) {
if (Child != null) {
Geometry cg = null;
Brush brush = null;
Pen pen = new Pen();
pen.Brush = new SolidColorBrush(Colors.Black);
pen.Thickness = 1;
if (Direction) {
//生成小尾巴在右侧的图形和底色
cg = CreateGeometryTailAtRight();
brush = CreateBrushTailAtRight();
}
else {
//生成小尾巴在左侧的图形和底色
cg = CreateGeometryTailAtLeft();
brush = CreateBrushTailAtLeft();
}
dc.DrawGeometry(brush, pen, cg);
//绘制光照效果
GradientStopCollection gscLight = new GradientStopCollection();
gscLight.Add(new GradientStop(Color.FromArgb(0xDA, 0xFF, 0xFF, 0xFF), 0));
gscLight.Add(new GradientStop(Color.FromArgb(0x68, 0xFF, 0xEF, 0xFF), 1));
Brush lightBrush = new LinearGradientBrush(gscLight, new Point(0, 0), new Point(0, 1));
dc.DrawRoundedRectangle(lightBrush, nul
补充:软件开发 , C# ,