Question

Is there a way to have a dotted line on the horizontal grid lines in WPF datagrid? I have googled everywhere and cannot seem to find a concrete way of doing so. One solution that may solve this is setting the Datagrid.RowStyle. I have tried this and it causes error. I have binded my datagrid to a datatable. 2 columns are just text and the 3rd one is an image column. For this columns, I used DataGridTemplateColumn. Textblock and Image. I hope you can help me guys…If you want a sample of my code here it is.

 <StackPanel>
                <dg:DataGrid Name="questionList"
                             HeadersVisibility="None"
                             AutoGenerateColumns="False"
                             Background="White"
                             Margin="42,32,43,0"
                             BorderThickness="0" 
                             GridLinesVisibility="Horizontal"
                             CanUserAddRows="False" 
                             HorizontalGridLinesBrush="#FFCCCCCC" 
                             MaxHeight="549" 
                             Cursor="Hand" 
                             PreviewMouseLeftButtonUp="questionnaireList_PreviewMouseLeftButtonUp">
                    <dg:DataGrid.CellStyle>
                        <Style TargetType="{x:Type dg:DataGridCell}">
                            <Setter Property="BorderThickness" Value="0"/>
                        </Style>
                    </dg:DataGrid.CellStyle>
                    <dg:DataGrid.RowStyle>
                        <Style TargetType="{x:Type dg:DataGridRow}">
                            <Setter Property="Background" Value="{Binding MyImage, Converter={x:Static my:StatusColorConverter.instance}}" />
                        </Style>
                    </dg:DataGrid.RowStyle>
                    <dg:DataGrid.Columns>
                        <dg:DataGridTemplateColumn Width="69*">
                            <dg:DataGridTemplateColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock Margin="12,16,0,17" 
                                               FontSize="18" 
                                               Foreground="#0891F1" 
                                               Text="{Binding Path=Number}" 
                                               TextWrapping="Wrap"/>
                                </DataTemplate>
                            </dg:DataGridTemplateColumn.CellTemplate>
                        </dg:DataGridTemplateColumn>
                        <dg:DataGridTemplateColumn Width="601*">
                            <dg:DataGridTemplateColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock FontSize="16" Foreground="#666666"
                                               Text="{Binding Path=Desc}"
                                               TextWrapping="Wrap"
                                               TextAlignment="Justify"
                                               Margin="0,16,0,17" />
                                </DataTemplate>
                            </dg:DataGridTemplateColumn.CellTemplate>
                        </dg:DataGridTemplateColumn>
                        <dg:DataGridTemplateColumn Width="117*">
                            <dg:DataGridTemplateColumn.CellTemplate>
                                <DataTemplate>
                                    <Image Source="{Binding Path=Imgs}" 
                                           Stretch="None" 
                                           VerticalAlignment="Top" 
                                           HorizontalAlignment="Right" 
                                           Margin="0,16,18,17" />
                                </DataTemplate>
                            </dg:DataGridTemplateColumn.CellTemplate>
                        </dg:DataGridTemplateColumn>
                    </dg:DataGrid.Columns>
                </dg:DataGrid>
            </StackPanel>

Answer 1

You can disable the Horizontal Grid Lines which are drawn in code by specifying GridLinesVisibility="Vertical" in the DataGrid. You could then re-template DataGridRow and add the dashed line at the end of each row

Looks like this:

<DataGrid GridLinesVisibility="Vertical">
    <DataGrid.RowStyle>
        <Style TargetType="DataGridRow">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type DataGridRow}">
                        <Border x:Name="DGR_Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                            <SelectiveScrollingGrid>
                                <SelectiveScrollingGrid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </SelectiveScrollingGrid.ColumnDefinitions>
                                <SelectiveScrollingGrid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </SelectiveScrollingGrid.RowDefinitions>
                                <DataGridCellsPresenter Grid.Column="1" ItemsPanel="{TemplateBinding ItemsPanel}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                                <DataGridDetailsPresenter Grid.Column="1" Grid.Row="1" SelectiveScrollingGrid.SelectiveScrollingOrientation="{Binding AreRowDetailsFrozen, ConverterParameter={x:Static SelectiveScrollingOrientation.Vertical}, Converter={x:Static DataGrid.RowDetailsScrollingConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" Visibility="{TemplateBinding DetailsVisibility}"/>
                                <DataGridRowHeader Grid.RowSpan="2" SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.Row}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
                                <Path Grid.Row="2" Grid.ColumnSpan="2"
                                      Data="M0,0.5 L1,0.5"
                                      Stretch="Fill" Stroke="Black" StrokeThickness="1"
                                      StrokeDashArray="1.0 2.0"/>
                            </SelectiveScrollingGrid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </DataGrid.RowStyle>
    <!-- ... -->
</DataGrid>

Edit: Here is the Template for the 3.5 DataGrid in the toolkit

<Custom:DataGrid GridLinesVisibility="Vertical">
    <Custom:DataGrid.RowStyle>
        <Style TargetType="Custom:DataGridRow">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Custom:DataGridRow}">
                        <Border x:Name="DGR_Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                            <Custom:SelectiveScrollingGrid>
                                <Custom:SelectiveScrollingGrid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Custom:SelectiveScrollingGrid.ColumnDefinitions>
                                <Custom:SelectiveScrollingGrid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Custom:SelectiveScrollingGrid.RowDefinitions>
                                <Custom:DataGridCellsPresenter Grid.Column="1" ItemsPanel="{TemplateBinding ItemsPanel}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                                <Custom:DataGridDetailsPresenter Grid.Column="1" Grid.Row="1" Visibility="{TemplateBinding DetailsVisibility}">
                                    <Custom:SelectiveScrollingGrid.SelectiveScrollingOrientation>
                                        <Binding Path="AreRowDetailsFrozen" RelativeSource="{RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type Custom:DataGrid}}">
                                            <Binding.ConverterParameter>
                                                <Custom:SelectiveScrollingOrientation>Vertical</Custom:SelectiveScrollingOrientation>
                                            </Binding.ConverterParameter>
                                        </Binding>
                                    </Custom:SelectiveScrollingGrid.SelectiveScrollingOrientation>
                                </Custom:DataGridDetailsPresenter>
                                <Custom:DataGridRowHeader Grid.RowSpan="2" Custom:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
                                    <Custom:DataGridRowHeader.Visibility>
                                        <Binding Path="HeadersVisibility" RelativeSource="{RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type Custom:DataGrid}}">
                                            <Binding.ConverterParameter>
                                                <Custom:DataGridHeadersVisibility>Row</Custom:DataGridHeadersVisibility>
                                            </Binding.ConverterParameter>
                                        </Binding>
                                    </Custom:DataGridRowHeader.Visibility>
                                </Custom:DataGridRowHeader>
                                <Path Grid.Row="2" Grid.ColumnSpan="2"
                                      Data="M0,0.5 L1,0.5"
                                      Stretch="Fill" Stroke="Black" StrokeThickness="1"
                                      StrokeDashArray="1.0 2.0"/>
                            </Custom:SelectiveScrollingGrid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Custom:DataGrid.RowStyle>
    <!-- ... -->
</Custom:DataGrid>