Question

Say I have a very simple WPF grid (6 rows x 6 columns) defined as follows:

<Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>

I want the following grid lines (one solid line and two dashed lines) drawn as follows (I drew this in Excel so ignore the light Excel grid lines):

How might I go about doing this in XAML?

Answer 1

You can place Lines at the tops of the required cells, by setting VerticalAlignment="Top", the appropriate Grid.ColumnSpan, and set StrokeDashArray to get the dashed line.

Edit: The above was just off the top of my head, and I apparently forgot about a few ‘features’ of WPF.

Here is the sample I got working. I put it in a Grid with 5 rows and columns, star-sized.

<Line Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="2"
    VerticalAlignment="Center" Stroke="Black" StrokeThickness="1"
    X2="{Binding Path=ActualWidth, RelativeSource={RelativeSource Self}}" />
<Line Grid.Row="1" Grid.Column="2" Grid.RowSpan="2" Grid.ColumnSpan="2"
    VerticalAlignment="Center" Stroke="Black" StrokeThickness="2" StrokeDashArray="5,3"
    X2="{Binding Path=ActualWidth, RelativeSource={RelativeSource Self}}" />

Note: If rows will vary in size, that won’t work, since it centers the line in the two rows. If they will vary in size, you will need VerticalAlignment="Top", but beware, the top half of the line will be clipped.