Understanding Border's properties

Question

I have a Border (contains a Canvas inside) defined as follows where I want to dynamic show the position of mouse when moving over the Canvas :

In .xmal :

<Border x:Name="cwgLayoutDesignBorder" BorderThickness="0"
        Width="600" Height="800" BorderBrush="Yellow">
    <ItemsControl x:Name="linecontrol">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas  Background="Green" MouseMove="Canvas_MouseMove"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Canvas>
                    ... 
                </Canvas>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Border>

In .cs :

private void Canvas_MouseMove(object sender, MouseEventArgs e)
{
    Point p = e.GetPosition(linecontrol);

    this.Title = "(" + Convert.ToInt32(p.X) + ", " + Convert.ToInt32(p.Y) + ")";
}

I found that the position returned by the mouse turned out to be: x in [0, 600] and y in [1, 800] . However, given my definition, I thought the result should be [0, 599] and y in [0, 799] instead. Why are they inconsistent? Or how should I get the correct position of the mouse?

Answer 1

It's x[0,599] and y[0,799] . If you try and draw a pixel at 0,0 it will be the top left pixel and if you draw at 600,800 it will draw outside the Canvas. Draw a simple 50x50 canvas and run this against it to see:

for (int x = 0; x < 51; x++)
{
    for (int y = 0; y < 51; y++)
    {
        var rect = new Rectangle
        {
            Stroke = Brushes.White,
            StrokeThickness = 1,
            Width=1,
            Height=1
        };

        if (x == 0 & y == 0)
        {
            rect.Stroke = Brushes.LimeGreen;
        }

        if (x == 50 & y == 50)
        {
            rect.Stroke = Brushes.LimeGreen;
        }

        Canvas.SetLeft(rect, x);
        Canvas.SetTop(rect, y);
        youCanvasNameHere.Children.Add(rect);
    }
}

You might need to use magnify.exe to see it though.

Answer 2

You are getting the correct mouse position and using the correct method to do so. If your Border element has a Width of 600 and its Height is set to 800 , then any contained UI element will inherit those same values . That means that your linecontrol ItemsControl element will also be 600 x 800 . Only if your Border.BorderThickness or Border.Padding (or other size changing property) is set to a positive value will the size of the contained control change.

Even then, if your Border.BorderThickness property was set to 1 , then your ItemsControl.Width would be 598 and not 599 , so I suspect that you may have misread your values. I used your code to run your experiment and found that Width and Height values went from 0 to 600 and 0 to 800 respectively. So, either you've read your values incorrectly, or you need to edit your question to provide all relevant code required to successfully reproduce your problem .