Drawing a shape at clicked point on viewbox in wpf - wpf-controls

Question

I am trying to draw a rectangle at the point in a canvas where the user clicks. I want my window to be scale- able so I have placed the Canvas in a viewbox but this doesn't draw the rectangle on the specified point but is variable based on the scaling of the viewbox.
here is my code
<Viewbox MouseLeftButtonDown="Viewbox_MouseLeftButtonDown" Width="300" Height="300">
<Canvas Name="Surface" MouseLeftButtonDown="Surface_MouseRightButtonDown" Background="Transparent" Width="300" Height="300"></Canvas>
</Viewbox>
here is the viewbox mouse down event
private void Viewbox_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
Rectangle rect = new Rectangle { Width = 10, Height = 10, Fill = Brushes.Black };
Surface.Children.Add(rect);
Canvas.SetLeft(rect, e.GetPosition(this).X);
Canvas.SetTop(rect, e.GetPosition(this).Y);
}
The result is the same even if I call the Canvas mouse event.

Answer 1

The Viewbox control has no background, so it can't receive mouse events. I would wrap the Canvas in a Border with the Background set to transparent, and attach my event handler there, instead. It also doesn't make much sense to set the width and height of the Viewbox, since you presumably want it to scale with the content.
<Viewbox Width="300" Height="300">
<Border Background="Transparent"
MouseLeftButtonDown="Border_MouseLeftButtonDown"
<Canvas Name="Surface" Background="Transparent" Width="300" Height="300"/>
</Border>
</Viewbox>
Your other problem is that you are getting the mouse position relative to this. I have no idea what this is, but you want to get the mouse position relative to the Canvas.
private void Border_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
var rect = new Rectangle { Width = 10, Height = 10, Fill = Brushes.Black };
Surface.Children.Add(rect);
Canvas.SetLeft(rect, e.GetPosition(Surface).X);
Canvas.SetTop(rect, e.GetPosition(Surface).Y);
}