DiagramDesigner的学习心得一

DiagramDesigner是CodeProject上关于WPF的控件模板，移动拖放，改变控件大小，旋转的很好的文章。

在博客园博主周金根的博客上也有相应的介绍。它总共分四部分，每部分都循序渐进。

首先我们来讲第一部分，关于控件的移动，和改变大小,MoveAndResize.

MoveResize项目运行起来的效果如下：

在MoveResize项目的window1.xaml中：

  <ContentControl Width="130"
                    MinWidth="50"
                    Height="130"
                    MinHeight="50"
                    Canvas.Top="150"
                    Canvas.Left="470"
                    Template="{StaticResource DesignerItemTemplate}">
      <Ellipse Fill="Red"
               IsHitTestVisible="False"/>
    </ContentControl>
    <ContentControl Width="130"
                    MinWidth="50"
                    Height="130"
                    MinHeight="50"
                    Canvas.Top="150"
                    Canvas.Left="150"
                    Template="{StaticResource DesignerItemTemplate}">
      <Path Fill="Blue"
            Data="M 0,5 5,0 10,5 5,10 Z"
            Stretch="Fill"
            IsHitTestVisible="False"/>
    </ContentControl>

这两个ContentControl控件一个是左边的菱形，另一个则是一个圆形。样式都采用了DesignerItemTemplate.

 <!-- Designer Item Template-->
    <ControlTemplate x:Key="DesignerItemTemplate" TargetType="ContentControl">
      <Grid DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">
        <s:MoveThumb Template="{StaticResource MoveThumbTemplate}" Cursor="SizeAll"/>
        <Control Template="{StaticResource ResizeDecoratorTemplate}"/>
        <ContentPresenter Content="{TemplateBinding ContentControl.Content}"/>
      </Grid>
    </ControlTemplate>

对上面的两段xaml里的TemplateBinding和ContentPresenter我们可以引用周金根博主里面的解释:

• 限制目标类型
  ControlTemplate和Style一样，也有一个TargetType属性来限制模板可以被应用到的类型上，如果没有一个显示的TargetType，则目标类型将被隐式的设置为Control。由于没有默认的控件模板，所以它与Style是不同的，当使用TargetType时不允许移除模板的x:Key。
• 模板绑定TemplateBinding
  在控件模板中，从目标元素插入属性值的关键是数据绑定，我们可以通过一个简单、轻量级的模板绑定TemplateBinding来处理。TemplateBinding的数据源总是目标元素，而Path则是目标元素的任何一个依赖属性。使用方式如上例的{TemplateBinding ContentControl.Content}，如果我们设置了TargetType，可以更简单的使用为{TemplateBinding Content}
  TemplateBinding仅仅是一个便捷的设置模板绑定的机制，对于有些可冻结的属性（如Brush的Color属性）时绑定会失败，这时候我们可以使用常规的Binding来达到同样效果，通过使用一个RelativeSource，其值为{Relative Source TemplatedParent}以及一个Path。
• ContentPresenter
  在控件模板中应该使用轻量级的内容显示元素ContentPresenter，而不是ContentControl。ContentPresenter显示的内容和ContentControl是一样的，但是ContentControl是一个带有控件模板的成熟控件，其内部包含了ContentPresenter。
  如果我们在使用ContentPresenter时忘记了将它的Content设置为{TemplateBinding Content}时，它将隐式的假设{TemplateBinding Content}就是我们需要的内容
• 与触发器交互
  在模板内部可以使用触发器，但是在进行绑定时需要注意只能使用Binding，因为触发器位于控件可视树模板外部

我们看到在DesignerItemTemplate里还有两个MoveThumbTemplate 和 ResizeDecoratorTemplate .

MoveThumbTemplate其实就是一个Rectangle搞定。我们把它的Fill改成Blue看下：

ResizeDecoratorTemplate就是四个角上的

我们来看看ResizeThumb这个类是怎么实现的：

  public class ResizeThumb : Thumb
    {
        public ResizeThumb()
        {
            //当有逻辑焦点或鼠标捕获时，随着鼠标位置改变一次或多次
            DragDelta += new DragDeltaEventHandler(this.ResizeThumb_DragDelta);
        }

        private void ResizeThumb_DragDelta(object sender, DragDeltaEventArgs e)
        {
            Control designerItem = this.DataContext as Control;//获取父控件，通过DataContext

            if (designerItem != null)
            {
                double deltaVertical, deltaHorizontal;

                switch (VerticalAlignment)
                {
                    case VerticalAlignment.Bottom:
                        deltaVertical = Math.Min(-e.VerticalChange, designerItem.ActualHeight - designerItem.MinHeight);//计算减小的高度
                        designerItem.Height -= deltaVertical;//减小高度
                        break;
                    case VerticalAlignment.Top:
                        deltaVertical = Math.Min(e.VerticalChange, designerItem.ActualHeight - designerItem.MinHeight);
                        Canvas.SetTop(designerItem, Canvas.GetTop(designerItem) + deltaVertical);//重新设置相对于相对于Canvas的上边距
                        designerItem.Height -= deltaVertical;
                        break;
                    default:
                        break;
                }

                switch (HorizontalAlignment)
                {
                    case HorizontalAlignment.Left:
                        deltaHorizontal = Math.Min(e.HorizontalChange, designerItem.ActualWidth - designerItem.MinWidth);
                        Canvas.SetLeft(designerItem, Canvas.GetLeft(designerItem) + deltaHorizontal);//重新设置相对于Canvas的左边距
                        designerItem.Width -= deltaHorizontal;//减小宽度
                        break;
                    case HorizontalAlignment.Right:
                        deltaHorizontal = Math.Min(-e.HorizontalChange, designerItem.ActualWidth - designerItem.MinWidth);
                        designerItem.Width -= deltaHorizontal;
                        break;
                    default:
                        break;
                }
            }

            e.Handled = true;
        }
    }

MoveThumbTemplate是基于MoveThumb类的：

 public class MoveThumb : Thumb
    {
        public MoveThumb()
        {
            DragDelta += new DragDeltaEventHandler(this.MoveThumb_DragDelta);
        }

        private void MoveThumb_DragDelta(object sender, DragDeltaEventArgs e)
        {
            Control designerItem = this.DataContext as Control;//获取父控件，通过DataContext

            if (designerItem != null)
            {
                double left = Canvas.GetLeft(designerItem);//获取现在相对于Canvas画布的左边距
                double top = Canvas.GetTop(designerItem);//获取现在相对于Canvas画布的上边距

                Canvas.SetLeft(designerItem, left + e.HorizontalChange);//e.HorizontalChange 水平改变大小，有可能为负
                Canvas.SetTop(designerItem, top + e.VerticalChange);//e.VerticalChange 垂直改变大小，有可能为负
            }
        }
    }

下篇我们来分析下旋转 还有 根据Adorner来怎么实现。