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

 

源代码下载