WPF DataGrid 中的水平虚线网格线
有没有办法在 WPF 数据网格中的水平网格线上显示虚线?我到处搜索,似乎找不到具体的方法。可以解决此问题的一种解决方案是设置 Datagrid.RowStyle。我已经尝试过这个,它会导致错误。我已将数据网格绑定到数据表。 2 列只是文本,第 3 列是图像列。对于此列,我使用了 DataGridTemplateColumn。文本块和图像。我希望你们能帮助我...如果你们想要我的代码示例,这里就是。
<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>
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>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
最简单的方法是简单地使用具有绝对映射模式的渐变画笔:
结果:
The easiest way to do this is to simply use gradient brushes with absolute mapping modes:
Result:
您可以通过在
DataGrid
中指定GridLinesVisibility="Vertical"
来禁用在代码中绘制的水平网格线。然后,您可以重新模板DataGridRow
并在每行末尾添加虚线,如下所示:
编辑:这是工具包中 3.5
DataGrid
的模板You can disable the Horizontal Grid Lines which are drawn in code by specifying
GridLinesVisibility="Vertical"
in theDataGrid
. You could then re-templateDataGridRow
and add the dashed line at the end of each rowLooks like this:
Edit: Here is the Template for the 3.5
DataGrid
in the toolkit