Question

I have some very simple code that ‘correctly’ draws a short vertical black line on a 1024×768 blue canvas in WPF (well in Silverlight 4).

            <UserControl x:Class="SimpleCanvas.MainPage"
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                mc:Ignorable="d"
                Loaded="UserControl_Loaded">
                <Grid x:Name="LayoutRoot" Background="White">
                    <Canvas x:Name="PathCanvas" Width="1024" Height="768" Background="Blue"/>
                </Grid>
            </UserControl>

and here’s the code-behind

            private void UserControl_Loaded(object sender, RoutedEventArgs e)
            {
                var myPathFigure = new PathFigure
                {
                    StartPoint = new Point(492, 748)
                };

                var line1 = new LineSegment
                {
                    Point = new Point(492, 708)
                };

                myPathFigure.Segments.Add(line1);

                var myPathGeometry = new PathGeometry();
                myPathGeometry.Figures.Add(myPathFigure);

                var myPath = new Path
                {
                    Data = myPathGeometry,
                    Stretch = Stretch.Fill,
                    Stroke = new SolidColorBrush(Color.FromArgb(0xFF, 0x0, 0x0, 0x0)),
                    StrokeThickness = 10
                };

                PathCanvas.Children.Add(myPath);
            }

Now if I change the end-point of the line segment, so that instead of just changing the Y from the start-point I also change the X, albeit by only one pixel, the whole line is rendered in the top left of the canvas. Here’s the revised code-behind.

            private void UserControl_Loaded(object sender, RoutedEventArgs e)
            {
                var myPathFigure = new PathFigure
                {
                    StartPoint = new Point(492, 748)
                };

                var line1 = new LineSegment
                {
                    Point = new Point(491, 708)
                };

                myPathFigure.Segments.Add(line1);

                var myPathGeometry = new PathGeometry();
                myPathGeometry.Figures.Add(myPathFigure);

                var myPath = new Path
                {
                    Data = myPathGeometry,
                    Stretch = Stretch.Fill,
                    Stroke = new SolidColorBrush(Color.FromArgb(0xFF, 0x0, 0x0, 0x0)),
                    StrokeThickness = 10
                };

                PathCanvas.Children.Add(myPath);
            }

If both rendered in the centre-bottom of the canvas, or both rendered in the top left of the canvas, I could understand. But I do not understand why the first code block causes the line to render centre-bottom and the second code block causes the line to render top-left.

Note that I’m not using Canvas.Top or Canvas.Left.

Any insight gratefully received!

Answer 1

The problem here is that you are creating the Path with the Stretch property set to Stretch.Fill. I imagine you want to leave the Path with Stretch set to the default, Stretch.None.

The reason why the first code-block causes the line to be rendered in the centre of the canvas is because both points in its single LineSegment have the same X-coordinate, and hence the Path has a width of 0. Clearly an element with width 0 can’t be stretched horizontally. Silverlight could attempt to stretch your Path vertically, since it has nonzero height, but it seems it chooses not to.

Similarly, if you draw a horizontal line (so the Path has height 0), Silverlight doesn’t stretch the line either.

In your second code-block, when you’ve change the X-coordinate, even by 1 pixel, you give the Path a non-zero width and height. Silverlight can then stretch it to fill the entire Canvas.

Note that the Path control itself, as the container for the various path segments, is being stretched, not the individual line segments that comprise it.