WPF Diagram Designer Part 1 の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• WPF Diagram Designer Part 1 へ行く。
• WPF Diagram Designer Part 1 の差分を削除

&tag(WPF Diagram Designer Part 1);
*目次 [#l515f891]
#contents
*参考情報 [#cd2710e2]
-[[WPF Diagram Designer: Part 1 - CodeProject:http://www.codeproject.com/Articles/22952/WPF-Diagram-Designer-Part-1]]

*前準備 [#fa904c33]
-単にCanvasに青の円を表示する。ControlTemplateを使って抽象化している。
#pre{{
 <Canvas>    
   <Canvas.Resources>
      <ControlTemplate x:Key="DesignerItemTemplate" TargetType="ContentControl">
         <ContentPresenter Content="{TemplateBinding ContentControl.Content}"/>
      </ControlTemplate>
   </Canvas.Resources>  
   <ContentControl Name="DesignerItem"
                   Width="100"
                   Height="100"
                   Canvas.Top="100"
                   Canvas.Left="100"
                   Template="{StaticResource DesignerItemTemplate}">
      <Ellipse Fill="Blue"/>
   </ContentControl>
</Canvas>
}}

*動かす [#v22b9f0d]
-ドラッグで動かすためにMoveThumbというクラスを導入する。このクラスはThumbを継承(ドラッグ＆ドロップの元として適している)。
#pre{{
        public MoveThumb()
        {
            DragDelta += new DragDeltaEventHandler(this.MoveThumb_DragDelta);
        }

        private void MoveThumb_DragDelta(object sender, DragDeltaEventArgs e)
        {
            //ドラッグ&ドロップされたときのイベントハンドラー
            Control item = this.DataContext as Control;

            if (item != null)
            {
                //DataContextにセットされたアイテムの現在位置を取得し、デルタ分移動させる。
                double left = Canvas.GetLeft(item);
                double top = Canvas.GetTop(item);

                Canvas.SetLeft(item, left + e.HorizontalChange);
                Canvas.SetTop(item, top + e.VerticalChange);
            }
        }
}}
-XAMLを変更。MoveThumbが青い円に重なって表示される。MoveThumbはDataContextにセットされたContentControlを移動させるが、中に含まれる自分も移動することになる。
#pre{{
        <Canvas>
            <Canvas.Resources>
                <ControlTemplate x:Key="DesignerItemTemplate" TargetType="ContentControl">
                    <Grid>
                        <s:MoveThumb DataContext="{Binding RelativeSource={RelativeSource TemplatedParent} }" Cursor="SizeAll"/>
                        <ContentPresenter Content="{TemplateBinding ContentControl.Content}"/>
                    </Grid>
                </ControlTemplate>
            </Canvas.Resources>
            <ContentControl Name="DesignerItem" 
                            Width="100"
                            Height="100"
                            Canvas.Top="100"
                            Canvas.Left="100"
                            Template="{StaticResource DesignerItemTemplate}"
                            >
                <Ellipse Fill="Blue"/>
            </ContentControl>
        </Canvas>
}}

*リサイズする [#rabedcff]
-次のようなControlTemplateを作ればリサイズ用のデコレーターを表示できる(ただし何の動作もなし)
#pre{{
        <Canvas>
            <Canvas.Resources>
                <ControlTemplate x:Key="MoveThumbTemplate" TargetType="{x:Type s:MoveThumb}">
                    <Rectangle Fill="Transparent"/>
                </ControlTemplate>
                <ControlTemplate x:Key="ResizeDecoratorTemplate" TargetType="Control">
                    <Grid>
                        <Thumb Height="3" Cursor="SizeNS" Margin="0 -4 0 0" VerticalAlignment="Top" HorizontalAlignment="Stretch"/>
                        <Thumb Width="3" Cursor="SizeWE" Margin="-4 0 0 0" VerticalAlignment="Stretch" HorizontalAlignment="Left"/>
                        <Thumb Width="3" Cursor="SizeWE" Margin="0 0 -4 0" VerticalAlignment="Stretch" HorizontalAlignment="Right"/>
                        <Thumb Height="3" Cursor="SizeNS" Margin="0 0 0 -4" VerticalAlignment="Bottom"  HorizontalAlignment="Stretch"/>
                        <Thumb Width="7" Height="7" Cursor="SizeNWSE" Margin="-6 -6 0 0" VerticalAlignment="Top" HorizontalAlignment="Left"/>
                        <Thumb Width="7" Height="7" Cursor="SizeNESW" Margin="0 -6 -6 0" VerticalAlignment="Top" HorizontalAlignment="Right"/>
                        <Thumb Width="7" Height="7" Cursor="SizeNESW" Margin="-6 0 0 -6" VerticalAlignment="Bottom" HorizontalAlignment="Left"/>
                        <Thumb Width="7" Height="7" Cursor="SizeNWSE" Margin="0 0 -6 -6" VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
                    </Grid>
                </ControlTemplate>
                <ControlTemplate x:Key="DesignerItemTemplate" TargetType="ContentControl">
                    <Grid>
                        <s:MoveThumb 
                            Template="{StaticResource MoveThumbTemplate}"
                            DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" Cursor="SizeAll"/>
                            DataContext="{Binding RelativeSource={RelativeSource TemplatedParent} }" Cursor="SizeAll"/>
                        <Control Template="{StaticResource ResizeDecoratorTemplate}"/>
                        <ContentPresenter Content="{TemplateBinding ContentControl.Content}"/>
                    </Grid>
                </ControlTemplate>
            </Canvas.Resources>
            <ContentControl Name="DesignerItem" 
                            Width="100"
                            Height="100"
                            Canvas.Top="100"
                            Canvas.Left="100"
                            Template="{StaticResource DesignerItemTemplate}"
                            >
                <Ellipse Fill="Blue"/>
            </ContentControl>
        </Canvas>
}}