Question

有没有办法在WPF数据网格中的水平网格线上有一条虚线？我到处搜索，似乎无法找到具体的方法。可以解决此问题的一个解决方案是设置Datagrid.RowStyle。我试过这个，它会导致错误。我已将datagrid绑定到数据表。 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>

Answer 1

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

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

结果：

enter image description here

Answer 2

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

看起来像这样：

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>

修改：以下是工具包中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>

WPF DataGrid中的虚线水平网格线

2 个答案: