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, null, new Rect(22, 1, this.ActualWidth - 45, 20), 10, 10);

        }
       
        //省略部分代码。。。

        public static void OnDirectionPropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e) {
            var self = d as iDecorator;
            self.HorizontalAlignment = (bool)e.NewValue ?
                HorizontalAlignment.Right : HorizontalAlignment.Left;
        }

        private Thickness padding = new Thickness(25, 6, 25, 6);

        public static readonly DependencyProperty DirectionProperty =
            DependencyProperty.Register("Direction", typeof(bool), typeof(iDecorator),
            new FrameworkPropertyMetadata(true, FrameworkPropertyMetadataOptions.AffectsRender, OnDirectionPropertyChangedCallback));

        }

调用处：

短信框的小尾巴在右侧：

                <local:iDecorator HorizontalAlignment="Right" Direction="True">
                    <TextBlock MaxWidth="200" Foreground="Black" TextWrapping="Wrap">前两天去哪儿了，听说去北京了？？？</TextBlock>
                </local:iDecorator>

短信框的小尾巴在左侧：

就是把Direction（方向）设成False即可。

                <local:iDecorator HorizontalAlignment="Right" Direction="False">
                    <TextBlock MaxWidth="200" Foreground="Black" TextWrapping="Wrap">前两天去哪儿了，听说去北京了？？？</TextBlock>
                </local:iDecorator>

调用是不是很方便，把它当成容器用就行了。

大功告成！

代码：http://download.csdn.net/download/kongxh_1981/9161495