- 追加された行はこの色です。
- 削除された行はこの色です。
&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"/>
<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>
}}