WPF Diagram Designer 的 Silverlight 版本

WPF Diagram Designer 是codeproject上一个开源例子，讲WPF的图形设计，非常适合学习。 在实现Silverlight流程设计器时，我也看了参考了例子的实现思路。周末在家将Part 1中的 WPF 例子转换成了Silverlight版本。原文的链接如下：

WPF Diagram Designer: Part 1

Part 1 中主要讲了移动、改变大小和旋转三个功能，下图是我在Silverlight版本中的截图。

在转化为Silverlight版本中，主要由2方面的差异：

第一个:  原例子中继承了Thumb， Silverlight中Thumb是Sealed类型的，无法继承。

原例子中MoveThumb, ResizeThumb, RotateThumb类都是直接继承了Thumb，Silverlight的实现中都是继承Control，并在模板中添加一个Thumb，将操作给Thumb即可。

第二个：Silverlight中没有Adorner类，也没有AdornerLayer。

原例子中有两个装饰类，我在例子中实现了一个。示例代码如下：

代码 public class ResizeRotateChrome : Control
{
        public ResizeRotateChrome()
        {
            this.DefaultStyleKey = typeof(ResizeRotateChrome);
        }

        public void Decorator(FrameworkElement element)
        {
            if (element != null)
            {
                this.DataContext = element;

                this.SetBinding(RenderTransformProperty, new System.Windows.Data.Binding("RenderTransform"));
                this.SetBinding(WidthProperty, new System.Windows.Data.Binding("Width") );
                this.SetBinding(HeightProperty, new System.Windows.Data.Binding("Height"));
                this.SetBinding(Canvas.LeftProperty, new System.Windows.Data.Binding("(Canvas.Left)"));
                this.SetBinding(Canvas.TopProperty, new System.Windows.Data.Binding("(Canvas.Top)"));
            }
        }

}

思路是这样的，装饰类直接附加到元素上，绑定长宽，位置，变化，并将用附加对象给DataContext 赋值。 其它的拖拽等操作由MoveThumb, ResizeThumb, RotateThumb三个类实现，直接对附加对象进行操作， ResizeRotateChrome 仅仅在显示时绑定即可。

源代码下载