2011-09-05 134 views
1

有没有办法在WPF数据网格中的水平网格线上有虚线?我到处搜索,似乎无法找到具体的做法。可以解决这个问题的一个解决方案是设置Datagrid.RowStyle。我已经试过这个,它会导致错误。我已将我的数据网格绑定到数据表。 2栏只是文字,第3栏是图像栏。对于这个列,我使用了DataGridTemplateColumn。文本块和图像。我希望你能帮助我......如果你想在我的代码示例是这样的。WPF DataGrid中的虚线水平网格线

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

回答

9

您可以禁用水平网格线,其通过在DataGrid中指定GridLinesVisibility="Vertical"而在代码中绘制。然后,您可以重新模板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> 
+0

我用尽你的示例代码,但它似乎有一个与“转换器有问题= {x:Static dg:DataGrid.RowDetailsS​​crollingConverter}“。该错误表示DataGrid没有静态成员“RowDetailsS​​crollingConverter”。我使用WPFToolkit,因为我使用.net 3.5和visual studio 2008.我也检查了MSDN并确认DataGrid有一个静态成员“RowDetailsS​​crollingConverter”。我错过了什么? – patlimosnero

+0

更新我的答案与'模板'的3.5工具包'DataGrid' –

+0

虽然这可能工作,他们有一个原因是在代码中绘制的原因。我建议你在使用这种方法之前,先在网格中测试一些重要的数据量 - 无论是否使用定制线。如果您改为“DataGridCell”的子类并在那里渲染行,则可能会看到更好的性能。 –

11

做到这一点,最简单的方法是简单地使用渐变画笔与绝对映射模式:

<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

+1

所以你倒下了我,因为你想出了另一个lution?谢谢 –

+1

@Meleak:试图删除我的downvote,但它不会让我,除非你的帖子被编辑。无论是谁提供的,我只想要更好的答案。与个人无关!投票并不意味着“你吸”,这意味着“这个答案有点误导/不理想”。 –

+2

是的,我知道,我只是觉得它不值得赞扬。您的解决方案确实很优雅,一旦OP更改了接受答案,我将删除我的答案。这里是+1 –