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 仅仅在显示时绑定即可。

 

源代码下载