Question

我正在使用基本的训练设备作为WPF的介绍，在屏幕左侧向用户显示一列项目，右侧显示一列。他们的任务是绘制连接左侧相关项目与右侧项目的线条。我已经开始使用一个非常简单的3列网格，左边和右边的列有矩形，中间列没有任何内容，两个矩形之间有一条简单的静态线（我不认为我的第一次尝试太糟糕了，没有谷歌），但当我尝试将线设置为拉伸时，它从画布的左上角开始，而不是在原点的轨迹上。没有拉伸，它被正确定位，但在网格大小调整期间保持静止。这是我的尝试：

private Line _line;
private void DrawLink(int row1, int col1, int row2, int col2)
{
    // Find the locus of the Origin rectangle.
    var orig = (Rectangle)grid.Children[row1 * ColumnCount + col1];
    var x1 = orig.ActualWidth - orig.ActualHeight / 2 / 2;
    var y1 = orig.ActualHeight / 2;
    var gp1 = orig.TranslatePoint(new Point(x1, y1), grid);

    // Find the locus of the Target rectangle.
    var targ = (Rectangle)grid.Children[row2 * ColumnCount + col2];
    var x2 = targ.ActualHeight / 2 / 2;
    var y2 = targ.ActualHeight / 2;
    var gp2 = targ.TranslatePoint(new Point(x2, y2), grid);

    _line = new Line
                {
                    Stroke = new SolidColorBrush(Colors.Red),
                    StrokeThickness = 2,
                    // Think this isn't working because line is added dynamically.
                    Stretch = Stretch.Fill,
                    X1 = gp1.X,
                    Y1 = gp1.Y,
                    X2 = gp2.X,
                    Y2 = gp2.Y
                };
    gridCanvas.Children.Add(_line);
}

Answer 1

如果选择Stretch.Fill，则只能控制线条是水平，垂直，对角线下降还是对角线上升，但是您可以不同地定位端点，例如使用Margin。要使线条使用其容器调整大小，您需要选择一个转换其子级的面板，Canvas 不非常适合这种情况，您可以使用{{1相反。

以下是完整示例，其中说明了上述几点，请注意Grid以及Margins上Y1或Y2的设置（您可以使用{{}}之类的内容{3}}来测试它）：

Lines

如果内容在垂直轴上动态调整大小，您可能需要采用不同的方法。例如，您可以将行包装在<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Page.Resources> <Style TargetType="Rectangle"> <Setter Property="Width" Value="100"/> <Setter Property="Height" Value="20"/> </Style> </Page.Resources> <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition /> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <Rectangle Grid.Column="0" Grid.Row="0" Fill="Red"/> <Rectangle Grid.Column="0" Grid.Row="1" Fill="Yellow"/> <Rectangle Grid.Column="0" Grid.Row="2" Fill="Green"/> <Rectangle Grid.Column="0" Grid.Row="3" Fill="Blue"/> <Line Y2="1" X2="1" Margin="0,10,0,30" Stretch="Fill" Stroke="Red" Grid.RowSpan="4" Grid.Column="1"/> <Line Y1="1" X2="1" Margin="0,10,0,50" Stretch="Fill" Stroke="Yellow" Grid.RowSpan="4" Grid.Column="1"/> <Line Y2="1" X2="1" Margin="0,50,0,10" Stretch="Fill" Stroke="Green" Grid.RowSpan="4" Grid.Column="1"/> <Line Y1="1" X2="1" Margin="0,30,0,10" Stretch="Fill" Stroke="Blue" Grid.RowSpan="4" Grid.Column="1"/> <Rectangle Grid.Column="2" Grid.Row="2" Fill="Red"/> <Rectangle Grid.Column="2" Grid.Row="0" Fill="Yellow"/> <Rectangle Grid.Column="2" Grid.Row="3" Fill="Green"/> <Rectangle Grid.Column="2" Grid.Row="1" Fill="Blue"/> </Grid> </ScrollViewer> </Page>中，该行从相应的下一行开始，仅跨越它所跨越的行，它将包含ContentControl，然后Line具有相同的值Top边距和Bottom边距的一部分（一行高度的一半）。为了获得正确的值，保证金可以是Kaxaml，并且具有相应的bound。

如何在WPF中动态添加Line元素拉伸？

1 个答案: