Draw Diagonal Line in WPF Grid

Question

I think I am trying to do something relatively simple in WPF, but can't for the life of me figure out how; and think I am probably on the verge of overcomplicating it.

If I had a grid which was 3 rows and 3 columns, and I wanted to join the corners of two cells to create a diagonal border, what would be the best way of doing so?

The lines should ideally re-size if the control is resized (so bound to the corners of the cell?).

Essentially I would like to create the red lines in the diagram hosted here: Example Pic http://imm.io/7A4L

Answer 1

You could use a Path with Stretch=Fill. For the top right cell in your example, you would use:

<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>

The "Fill" stretch makes the Path stretch to fill its parent, which gives the impression that the coordinates of the LineGeometry are relative (X=0,Y=0 is top left, X=1,Y=1 is bottom right).

Answer 2

I have created a sample to draw line from code behind which will give you more control... I crated a grid which contains canvas in each cell and on canvas load i am creating a path and adding it to same canvas...

As @ Mathieu Garstecki answer we can achieve this crating path in xaml... if want to add some logic before creating path you can use my answer 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>

Code Behind

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

OutPut