使 Frozen Column 看起来像一个单独的 DataGrid答案

【问题标题】：Make a Frozen Column look like a separate DataGrid使 Frozen Column 看起来像一个单独的 DataGrid
【发布时间】：2013-07-15 08:35:08
【问题描述】：

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

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

【问题讨论】：

我建议修改您的文本，以便提出明确的问题。你是在问如何实现你的形象所暗示的东西吗？或者只是如何在“冻结列”的右侧添加“排水沟”？还是别的什么？
感谢您更改标题和文本以使其清晰。您是否考虑过布局的水平堆栈面板：DataGrid 1（冻结列），然后是带有渐变的 WPF Rectangle，然后是 DataGrid 2。所有这些都一起出现并呈现单个控件的外观？
感谢您的建议，但我不知道如何添加。我最初的想法是只增加第一列的宽度以使其看起来像一个单独的网格，但我运气不佳
我知道您来自哪里，并且可能有一个解决方案，其中装订线是没有标题或行的模板列。但你目前的策略看起来像是去模板丛林探险。我建议首先使用堆栈面板方法:)
你能举个例子吗

标签： wpf wpf-controls wpfdatagrid wpf-4.0

【解决方案1】：

作为使单个列“冻结”并在其右侧提供令人愉悦的装订线的策略的替代方案，您可以考虑使用由装订线分隔的两个数据网格的策略。在这种情况下，并按照您的评论，它会给您一些东西，这里有一些 Xaml 来看看......

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

这个 sn-p 有很多不同的颜色，这样你就可以更快地找到哪个元素做什么。但如图所示，它是一个包含两个 DataGrid 和一个 Rectangle 的 Stack Panel。如上所述，您需要将细致的样式分成两部分，并将它们分别应用于两个 DataGrid。如果您需要同步选择和/或滚动，您可以使用绑定，但这是另一天的另一个问题。 :)

另外，如果将第一个 DataGrid 设置为 CanUserResizeColumns，则可以水平拖动大小并给出拆分器的效果。

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

【讨论】：