Нарисуйте диагональную линию в сетке WPF

Question

Я думаю, что пытаюсь сделать что-то относительно простое в WPF, но никак не могу понять, как; и думаю, что я, вероятно, на грани его усложнения.

Если бы у меня была сетка, состоящая из 3 строк и 3 столбцов, и я хотел соединить углы двух ячеек, чтобы создать диагональную границу, каков был бы лучший способ сделать это?

Линии должны в идеале изменить размер, если размер элемента управления изменен (таким образом, привязан к углам ячейки?).

По сути, я хотел бы создать красные линии на схеме, размещенной здесь: Пример Pic http://imm.io/7A4L

Answer 1

Вы можете использовать Path с Stretch = Fill. Для верхней правой ячейки в вашем примере вы должны использовать:

<Path Grid.Row="2" Grid.Column="0" Stroke="Red" StrokeThickness="2" Stretch="Fill">
    <Path.Data>
        <LineGeometry StartPoint="0,0" EndPoint="1,1" />
    </Path.Data>
</Path>

Растяжение «Заливка» приводит к растягиванию Path для заполнения его родителя, что создает впечатление, что координаты LineGeometry являются относительными (X = 0, Y = 0 слева вверху, X = 1, Y = 1 снизу справа).

Answer 2

Я создал образец для рисования линии из кода, который даст вам больше контроля ... Я создал сетку, которая содержит холст в каждой ячейке, и при загрузке холста я создаю путь и добавляю его на тот же холст ...

Как ответ @ Mathieu Garstecki, мы можем достичь этого пути в xaml ... если вы хотите добавить логику перед созданием пути, вы можете использовать мой ответ XAML

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <Canvas Grid.Row="0" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="AliceBlue" Loaded="Canvas_Loaded"></Canvas>
        <Canvas Grid.Row="1" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="AliceBlue" Loaded="Canvas_Loaded"></Canvas>
        <Canvas Grid.Row="2" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="AliceBlue" Loaded="Canvas_Loaded"></Canvas>
        <Canvas Grid.Row="0" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="AliceBlue" Loaded="Canvas_Loaded"></Canvas>
        <Canvas Grid.Row="1" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="AliceBlue" Loaded="Canvas_Loaded"></Canvas>
        <Canvas Grid.Row="2" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="AliceBlue" Loaded="Canvas_Loaded"></Canvas>
        <Canvas Grid.Row="0" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="AliceBlue" Loaded="Canvas_Loaded"></Canvas>
        <Canvas Grid.Row="1" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="AliceBlue" Loaded="Canvas_Loaded"></Canvas>
        <Canvas Grid.Row="2" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="AliceBlue" Loaded="Canvas_Loaded"></Canvas>

    </Grid>

Код сзади

private void Canvas_Loaded(object sender, RoutedEventArgs e)
        {
            var g = new StreamGeometry();
            var context = g.Open();
            context.BeginFigure(new Point(0, 0), true, true);
            context.LineTo(new Point((sender as Canvas).ActualHeight, (sender as Canvas).ActualWidth), true, true);
            context.Close();
            System.Windows.Shapes.Path path = new System.Windows.Shapes.Path();
            path.Data = g;
            path.Stroke = new SolidColorBrush(Colors.Red);
            path.StrokeThickness = 1.4;
            (sender as Canvas).Children.Add(path);
        }

Выход