为什么这个简单的LineSegment在Silverlight中从画布的中下角跳到左上角

Question

我有一些非常简单的代码，可以在WPF中的1024x768蓝色画布上"正确地"绘制一条短的垂直黑线（在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>

这是背后的代码

            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);
            }

现在，如果我更改线段的端点，使其不仅从起点更改Y，还更改X，尽管只更改了一个像素，那么整条线将在画布的左上角渲染。下面是修改后的代码。

            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);
            }

如果两者都在画布的中央底部渲染，或者都在画布左上角渲染，我可以理解。但我不明白为什么第一个代码块导致该行从中到下渲染，而第二个代码块则导致该行左上渲染。

请注意，我没有使用Canvas.Top或Canvas.Left.

感谢您的真知灼见！

Answer 1

这里的问题是创建的Path的Stretch属性设置为Stretch.Fill。我想您希望将"拉伸路径"设置为默认值Stretch.None。

第一个代码块导致线条在画布中心渲染的原因是，其单个LineSegment中的两个点都具有相同的X坐标，因此Path的宽度为0。显然，宽度为0的元素不能水平拉伸。Silverlight可以尝试垂直拉伸您的路径，因为它的高度为非零，但它似乎选择不这样做。

类似地，如果绘制一条水平线（因此Path的高度为0），Silverlight也不会拉伸该线。

在第二个代码块中，当您更改X坐标时，即使更改了1个像素，也会给Path一个非零的宽度和高度。Silverlight可以将其拉伸以填充整个画布。

请注意，Path控件本身，作为各种路径段的容器，正在被拉伸，而不是组成它的单个线段。