问题
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>
回答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>
回答2:
The easiest way to do this is to simply use gradient brushes with absolute mapping modes:
<DataGrid ItemsSource="{Binding People}">
<DataGrid.HorizontalGridLinesBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="3,0" MappingMode="Absolute" SpreadMethod="Repeat">
<GradientStop Offset="0" Color="Black"/>
<GradientStop Offset="0.5" Color="Black"/>
<GradientStop Offset="0.5" Color="Transparent"/>
<GradientStop Offset="1" Color="Transparent"/>
</LinearGradientBrush>
</DataGrid.HorizontalGridLinesBrush>
<DataGrid.VerticalGridLinesBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,3" MappingMode="Absolute" SpreadMethod="Repeat">
<GradientStop Offset="0" Color="Black"/>
<GradientStop Offset="0.5" Color="Black"/>
<GradientStop Offset="0.5" Color="Transparent"/>
<GradientStop Offset="1" Color="Transparent"/>
</LinearGradientBrush>
</DataGrid.VerticalGridLinesBrush>
<DataGrid.Columns>
<DataGridTextColumn Header="First Name" Binding="{Binding FirstName}"/>
<DataGridTextColumn Header="Last Name" Binding="{Binding LastName}" />
</DataGrid.Columns>
</DataGrid>
Result:
来源：https://stackoverflow.com/questions/7310695/dotted-horizontal-grid-lines-in-wpf-datagrid