2011-09-05 133 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 –