Question

我有一个DataGrid，我冻结了第一列。我试图使冻结列看起来像一个单独的DataGrid。我想在冻结列之后增加网格线，使其看起来像我下面的图像。我不确定如何在冻结列之后增加网格线宽度。

enter image description here

  <DockPanel Name="dpHistory" LastChildFill="True" sl:UIAudit.Drsarea="SuperBillHistory">
<Border Background="Blue" Grid.Column="3"/>
<DataGrid Name="dgData" CanUserAddRows="False" 
          Style="{DynamicResource DataGridRow}" 
          CellStyle="{StaticResource DataGridCellStyle}"
                  AutoGenerateColumns="False"
                         CanUserReorderColumns="False"
                         IsReadOnly="True"
                         EnableRowVirtualization="True"
                         EnableColumnVirtualization="True"
                         AlternationCount="2"
                         AlternatingRowBackground="LightSteelBlue"
                         CanUserSortColumns="False"
                         FrozenColumnCount="2"
                          BorderThickness="5">       
</DataGrid>

Answer 1

作为将单个列“冻结”并在其右侧提供令人愉悦的排水沟的策略的替代方案，您可以考虑使用由排水沟分隔的两个数据网格的策略。在那种情况下，并在你的评论之后，它会给你一些东西，这里有一些Xaml看看...... enter image description here

<Grid>
    <StackPanel Orientation="Horizontal">
        <StackPanel.Resources>
            <system:Double x:Key="HeaderHeight">26</system:Double>
            <LinearGradientBrush x:Key="GutterBrush" StartPoint="0,0" EndPoint="1,0">
                <GradientStop Color="DarkGray" Offset="0"/>
                <GradientStop Color="LightGray" Offset="1"/>
            </LinearGradientBrush>
        </StackPanel.Resources>
        <DataGrid Name="LeftMost"
                  Background="PaleTurquoise"
                  HeadersVisibility="Column"
                  ItemsSource="{Binding LeftHeaders}"
                  AutoGenerateColumns="False"
                  >
            <DataGrid.Columns>
               <DataGridTemplateColumn CanUserReorder="False" CanUserResize="False">
                   <DataGridTemplateColumn.Header>
                       <TextBlock Height="{StaticResource HeaderHeight}" Text=""/>
                   </DataGridTemplateColumn.Header>
                    <DataGridTemplateColumn.HeaderStyle>
                        <Style TargetType="DataGridColumnHeader">
                            <Setter Property="Background" Value="RosyBrown"/>
                            <Setter Property="Height" Value="{StaticResource HeaderHeight}"/>
                        </Style>
                    </DataGridTemplateColumn.HeaderStyle>
                    <DataGridTemplateColumn.CellTemplate>
                       <DataTemplate>
                           <TextBlock Width="70" Text="{Binding .}" Background="LightBlue"/>
                       </DataTemplate>
                   </DataGridTemplateColumn.CellTemplate>
               </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>
        <Rectangle Width="5" Fill="{StaticResource GutterBrush}"/>
        <DataGrid Name="RightMost"
                  Background="PowderBlue"
                  GridLinesVisibility="All"
                  >
            <DataGrid.Columns>
                <DataGridTextColumn Header="Column 1" >
                    <DataGridTextColumn.HeaderStyle>
                        <Style TargetType="DataGridColumnHeader">
                            <Setter Property="Height" Value="{StaticResource HeaderHeight}"/>
                        </Style>
                    </DataGridTextColumn.HeaderStyle>
                </DataGridTextColumn>
                <DataGridTextColumn Header="Column 2" >
                    <DataGridTextColumn.HeaderStyle>
                        <Style TargetType="DataGridColumnHeader">
                            <Setter Property="Height" Value="{StaticResource HeaderHeight}"/>
                        </Style>
                    </DataGridTextColumn.HeaderStyle>
                </DataGridTextColumn>
                <DataGridTextColumn Header="Column 3" >
                    <DataGridTextColumn.HeaderStyle>
                        <Style TargetType="DataGridColumnHeader">
                            <Setter Property="Height" Value="{StaticResource HeaderHeight}"/>
                        </Style>
                    </DataGridTextColumn.HeaderStyle>
                </DataGridTextColumn>
            </DataGrid.Columns>
        </DataGrid>
    </StackPanel>
</Grid>

此代码段有许多不同的颜色，以便您可以更快地找到哪个元素执行的操作。但如图所示，它是一个包含两个DataGrids和一个Rectangle的Stack Panel。如上所述，您需要将细致的样式分为两部分，并将它们分别应用于两个DataGrids。如果您需要同步选择和/或滚动，您可以使用绑定，但这是另一天的另一个问题。 :)

此外，如果将第一个DataGrid设置为CanUserResizeColumns，则可以水平拖动大小并赋予分割器效果。

这种方法提供了您所追求的视觉体验，并且在实施过程中比原始方式更直接。一旦实现了整个过程，您可以返回并将所有位应用于控件模板。我会将这种方法添加到我自己的技巧中。

使冻结列看起来像一个单独的DataGrid

1 个答案: