
左がCanvas, 右がGrid
xaml
<Grid x:Name="LayoutRoot" Width="500" Height="250" Background="White">
<Canvas x:Name="canvas" HorizontalAlignment="Left" Height="250" VerticalAlignment="Top" Width="250" Background="#FFFFC7C7" MouseMove="canvas_MouseMove">
<TextBlock TextWrapping="Wrap" Text="Canvas" Canvas.Left="96" FontWeight="Bold"/>
<Ellipse x:Name="ellipse1" Height="50" Stroke="Black" Width="50">
<Ellipse.Fill>
<RadialGradientBrush Center="0.68,0.299" GradientOrigin="0.68,0.299">
<GradientStop Color="Red" Offset="1"/>
<GradientStop Color="White"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
<Grid x:Name="grid" Width="250" HorizontalAlignment="Right" VerticalAlignment="Top" Height="250" Background="#FFC7DFFF" MouseMove="grid_MouseMove">
<TextBlock TextWrapping="Wrap" Text="Grid" FontWeight="Bold" VerticalAlignment="Top" d:LayoutOverrides="Width" HorizontalAlignment="Center"/>
<Ellipse x:Name="ellipse2" Height="50" Stroke="Black" Width="50" HorizontalAlignment="Left" VerticalAlignment="Top">
<Ellipse.Fill>
<RadialGradientBrush Center="0.68,0.299" GradientOrigin="0.68,0.299">
<GradientStop Color="#FF003EFF" Offset="1"/>
<GradientStop Color="White"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Grid>
</Grid>
Canvasの場合
private void canvas_MouseMove(object sender, MouseEventArgs e)
{
Point point = e.GetPosition(canvas);
Canvas.SetLeft(ellipse1, point.X - ellipse1.Width / 2);
Canvas.SetTop(ellipse1, point.Y - ellipse1.Height / 2);
}
Gridの場合
Gridの場合は物体のMarginLeftとMarginTopを変化させるので、
動かす物体のHorizontalAlignmentをLeft, VerticalAlignmentをTopにしておく。
private void grid_MouseMove(object sender, MouseEventArgs e)
{
Point point = e.GetPosition(grid);
ellipse2.Margin = new Thickness(point.X - ellipse1.Width / 2, point.Y - ellipse1.Height / 2, 0 ,0);
}