http://d.hatena.ne.jp/CoMo/20110316/
http://zawapro.com/?p=988
上記を参考に以下のようにしました。
グリッド模様は表示されるのですが、「ドラッグ対象のオブジェクト」が表示されません。
グリッド模様を構築処理によって「ドラッグ対象のオブジェクト」が上書きされているのだと思うのですが、
ドラッグ対象のオブジェクトを再度描画させるにはどのようにすべきなのでしょうか?
MainWindow.xamlファイル
<Canvas Grid.Row="2" Name="canvas" SnapsToDevicePixels="True" Loaded="canvas_Loaded" SizeChanged="canvas_SizeChanged">
<Thumb DragDelta="Thumb_DragDelta" Canvas.Left="0" Canvas.Top="0">
<Thumb.Template>
<ControlTemplate>
<!--ドラッグ対象のオブジェクトを定義する-->
<Grid Width="100" Height="30">
<Ellipse Fill="LightBlue" Stroke="Blue" />
<TextBlock Text="動く物体" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</Canvas>
MainWindow.xaml.csファイル
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
//Thumbコントロールのドラッグイベント処理
private void Thumb_DragDelta(object sender, DragDeltaEventArgs e)
{
var thumb = sender as Thumb;
if (thumb == null) return;
//ドラッグ量に応じてThumbコントロールを移動する
Canvas.SetLeft(thumb, Canvas.GetLeft(thumb) + e.HorizontalChange);
Canvas.SetTop(thumb, Canvas.GetTop(thumb) + e.VerticalChange);
}
private const int GRID_SIZE = 50;
private ScaleTransform scaleTransform = new ScaleTransform();
private void canvas_Loaded(object sender, RoutedEventArgs e)
{
BuildView();
}
private void canvas_SizeChanged(object sender, SizeChangedEventArgs e)
{
BuildView();
}
// グリッド模様の構築
private void BuildView()
{
canvas.Children.Clear();
// 縦線
for (int i = 0; i < canvas.ActualWidth; i += GRID_SIZE)
{
Path path = new Path()
{
Data = new LineGeometry(new Point(i, 0), new Point(i, canvas.ActualHeight)),
Stroke = Brushes.Aqua,
StrokeThickness = 1
};
path.Data.Transform = scaleTransform;
canvas.Children.Add(path);
}
// 横線
for (int i = 0; i < canvas.ActualHeight; i += GRID_SIZE)
{
Path path = new Path()
{
Data = new LineGeometry(new Point(0, i), new Point(canvas.ActualWidth, i)),
Stroke = Brushes.Aqua,
StrokeThickness = 1
};
path.Data.Transform = scaleTransform;
canvas.Children.Add(path);
}
}
}