WPF DataGrid中的虚拟水平网格线 [英] Dotted Horizontal Grid Lines in WPF DataGrid

查看：275
本文介绍了WPF DataGrid中的虚拟水平网格线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

有没有办法在WPF数据网格中的水平网格线上有一条虚线？我已经在世界各地搜索，似乎找不到具体的做法。一个可以解决这个问题的解决方案是设置Datagrid.RowStyle。我已经尝试过这个错误。我把datagrid绑定到一个datatable。 2列只是文本，第3列是图像列。对于这些列，我使用DataGridTemplateColumn。文本块和图像。我希望你可以帮助我...如果你想在这里我的代码示例是。

 < StackPanel> 
< dg：DataGrid Name =questionList
 HeadersVisibility =None
 AutoGenerateColumns =False
 Background =White
 Margin =42， 32,43,0
 BorderThickness =0
 GridLinesVisibility =Horizo​​ntal
 CanUserAddRows =False
 Horizo​​ntalGridLinesBrush =＃FFCCCCCC
 MaxHeight = 549
 Cursor =Hand
 PreviewMouseLeftButtonUp =questionnaireList_PreviewMouseLeftButtonUp> 
< dg：DataGrid.CellStyle> 
< Style TargetType ={x：Type dg：DataGridCell}> 
< Setter Property =BorderThicknessValue =0/> 
< / Style> 
< / dg：DataGrid.CellStyle> 
< dg：DataGrid.RowStyle> 
< Style TargetType ={x：Type dg：DataGridRow}> 
< Setter Property =BackgroundValue ={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
前景=＃0891F1
 Text ={Binding Path = Number} 
 TextWrapping =Wrap/> 
< / DataTemplate> 
< / dg：DataGridTemplateColumn.CellTemplate> 
< / dg：DataGridTemplateColumn> 
< dg：DataGridTemplateColumn Width =601 *> 
< dg：DataGridTemplateColumn.CellTemplate> 
< DataTemplate> 
< TextBlock FontSize =16Foreground =＃666666
 Text ={Binding Path = Desc}
 TextWrapping =Wrap
 TextAlignment =对齐 
 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
 Horizo​​ntalAlignment =Right
 Margin = 0,16,18,17/> 
< / DataTemplate> 
< / dg：DataGridTemplateColumn.CellTemplate> 
< / dg：DataGridTemplateColumn> 
< / dg：DataGrid.Columns> 
< / dg：DataGrid> 
< / StackPanel>


解决方案

您可以禁用绘制的水平网格线在 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_BorderBorderBrush ={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 =1ItemsPanel ={TemplateBinding ItemsPanel}SnapsToDevicePixels ={TemplateBinding SnapsToDevicePixels}/> 
< DataGridDetailsPresenter Grid.Column =1Grid.Row =1SelectiveScrollingGrid.SelectiveScrollingOrientation ={Binding AreRowDetailsFrozen，ConverterParameter = {x：Static SelectiveScrollingOrientation.Vertical}，Converter = {x：Static DataGrid.RowDetailsS​​crollingConverter }，RelativeSource = {RelativeSource AncestorType = {x：Type DataGrid}}}Visibility ={TemplateBinding DetailsVisibility}/> 
< DataGridRowHeader Grid.RowSpan =2SelectiveScrollingGrid.SelectiveScrollingOrientation =VerticalVisibility ={Binding HeadersVisibility，ConverterParameter = {x：Static DataGridHeadersVisibility.Row}，Converter = {x：Static DataGrid.HeadersVisibilityConverter} RelativeSource = {RelativeSource AncestorType = {x：Type DataGrid}}}/> 
< Path Grid.Row =2Grid.ColumnSpan =2
 Data =M0,0.5 L1,0.5
 Stretch =FillStroke =BlackStrokeThickness =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_BorderBorderBrush ={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 =1ItemsPanel ={TemplateBinding ItemsPanel}SnapsToDevicePixels ={TemplateBinding SnapsToDevicePixels}/> 
< Custom：DataGridDetailsPresenter Grid.Column =1Grid.Row =1Visibility ={TemplateBinding DetailsVisibility}> 
< Custom：SelectiveScrollingGrid.SelectiveScrollingOrientation> 
< Binding Path =AreRowDetailsFrozenRelativeSource ={RelativeSource FindAncestor，AncestorLevel = 1，AncestorType = {x：Type Custom：DataGrid}}> 
< Binding.ConverterParameter> 
< Custom：SelectiveScrollingOrientation>垂直< / Custom：SelectiveScrollingOrientation> 
< /Binding.ConverterParameter> 
< / Binding> 
< / Custom：SelectiveScrollingGrid.SelectiveScrollingOrientation> 
< / Custom：DataGridDetailsPresenter> 
< Custom：DataGridRowHeader Grid.RowSpan =2自定义：SelectiveScrollingGrid.SelectiveScrollingOrientation =Vertical> 
< Custom：DataGridRowHeader.Visibility> 
< Binding Path =HeadersVisibilityRelativeSource ={RelativeSource FindAncestor，AncestorLevel = 1，AncestorType = {x：Type Custom：DataGrid}}> 
< Binding.ConverterParameter> 
<自定义：DataGridHeadersVisibility>行< / Custom：DataGridHeadersVisibility> 
< /Binding.ConverterParameter> 
< / Binding> 
< / Custom：DataGridRowHeader.Visibility> 
< / Custom：DataGridRowHeader> 
< Path Grid.Row =2Grid.ColumnSpan =2
 Data =M0,0.5 L1,0.5
 Stretch =FillStroke =BlackStrokeThickness =1
 StrokeDashArray =1.0 2.0/> 
< / Custom：SelectiveScrollingGrid> 
< / Border> 
< / ControlTemplate> 
< /Setter.Value> 
< / Setter> 
< / Style> 
< / Custom：DataGrid.RowStyle> 
<！ -  ...  - > 
< / Custom：DataGrid>


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>

解决方案

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>

这篇关于WPF DataGrid中的虚拟水平网格线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆