WPF DataGrid 中的水平虚线网格线

发布于 2024-12-03 13:04:47 字数 3989 浏览 0 评论 0原文

有没有办法在 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

今天小雨转甜 2024-12-10 13:04:47

最简单的方法是简单地使用具有绝对映射模式的渐变画笔:

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

结果:

在此处输入图像描述

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:

enter image description here

憧憬巴黎街头的黎明 2024-12-10 13:04:47

您可以通过在 DataGrid 中指定 GridLinesVisibility="Vertical" 来禁用在代码中绘制的水平网格线。然后,您可以重新模板 DataGridRow 并在每行末尾添加虚线,

如下所示:

“在此处输入图像描述”

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

编辑:这是工具包中 3.5 DataGrid 的模板

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

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:

enter image description here

<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>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文