Tag: WPF Diagram Designer Part 1
<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>
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); } }
<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>
<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"/> <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>