列 Headers 与 Wpf Datagrid 中数据的偏移量

Column Headers Offset From Data in Wpf Datagrid

早上好

我有一个显示自定义类型 collection 的 Wpf 数据网格

我使用 XAML 中的 collection 查看源在两个单独的属性上对数据进行分组,并将这些组设置为显示为扩展器的样式。

为了清楚起见,因为有很多数据,我觉得我必须使用边距和间距,否则看起来会很混乱。

我的问题是,使用两级分层扩展器,列数据现在与列 headers 有很大的偏移,这意味着它们没有正确排列。

我尝试了几种方法,比如设置列的边距 headers 和宽度(实际宽度和正常宽度)。然而,我所有的尝试最终都调整了整列的大小,使偏移量保持不变,但列移动了。

所以我的问题是:

如何更改列的可见宽度或偏移量 header 以确保 header 与数据对齐

编辑这就是我的意思

编辑 2 - 我的 Xaml 用于分组

<!--  Style for groups at top level.  -->
<GroupStyle>
    <GroupStyle.ContainerStyle>
        <Style TargetType="{x:Type GroupItem}">
            <Setter Property="Margin" Value="0" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type GroupItem}">
                        <Expander Margin="5,10,5,5"
                                  BorderBrush="{StaticResource BlackBrush}"
                                  BorderThickness="1"
                                  Header="{Binding Name}"
                                  IsExpanded="True">

                            <Expander.Template>
                                <!--  The basic expander  -->
                                <ControlTemplate TargetType="{x:Type Expander}">
                                    <!--  Put a border around the expander  -->
                                    <Border Background="{Binding Path=Name,
                                                                 Converter={StaticResource ColourConverter}}"
                                            BorderBrush="{StaticResource GreyBrush}"
                                            BorderThickness="2"
                                            CornerRadius="3">

                                        <!--  Use a dock panel so that the toggle button is docked to the top and the content is docked to the bottom  -->
                                        <DockPanel Margin="0">

                                            <!--  Add the toggle button  -->
                                            <ToggleButton x:Name="ExpanderButton"
                                                          Margin="0"
                                                          Content="{TemplateBinding Header}"
                                                          DockPanel.Dock="Top"
                                                          FontSize="14"
                                                          FontWeight="Bold"
                                                          Foreground="{StaticResource BlackBrush}"
                                                          IsChecked="{Binding Path=IsExpanded,
                                                                              RelativeSource={RelativeSource TemplatedParent}}"
                                                          OverridesDefaultStyle="True"
                                                          Template="{StaticResource AnimatedExpanderButton}" />

                                            <ContentPresenter x:Name="ExpanderContent"
                                                              Margin="5"
                                                              ContentSource="Content"
                                                              DockPanel.Dock="Bottom"
                                                              Visibility="{Binding ElementName=ExpanderButton,
                                                                                   Path=IsChecked,
                                                                                   Converter={StaticResource VisibilityConverter}}" />
                                        </DockPanel>
                                    </Border>
                                </ControlTemplate>
                            </Expander.Template>
                            <ItemsPresenter />
                        </Expander>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </GroupStyle.ContainerStyle>
</GroupStyle>

<!--  Style for groups under the top level.  -->
<GroupStyle>
    <GroupStyle.ContainerStyle>
        <Style TargetType="{x:Type GroupItem}">

            <Setter Property="Margin" Value="0,0,0,5" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type GroupItem}">
                        <Expander Margin="5"
                                  Background="{Binding Path=Name,
                                                       Converter={StaticResource ColourConverter}}"
                                  IsExpanded="True"
                                  Visibility="{Binding Items[0].IsSelectedInSidebar,
                                                       Converter={StaticResource VisibilityConverter}}">

                            <Expander.Template>
                                <!--  The basic expander  -->
                                <ControlTemplate TargetType="{x:Type Expander}">
                                    <!--  Put a border around the expander  -->
                                    <Border Background="{Binding Path=Name,
                                                                 Converter={StaticResource ColourConverter}}"
                                            BorderBrush="{StaticResource GreyBrush}"
                                            BorderThickness="2"
                                            CornerRadius="3">

                                        <!--  Use a dock panel so that the toggle button is docked to the top and the content is docked to the bottom  -->
                                        <DockPanel Margin="0">

                                            <!--  Add the toggle button  -->
                                            <ToggleButton x:Name="ExpanderButton"
                                                          Content="{Binding Path=Name}"
                                                          DockPanel.Dock="Top"
                                                          FontSize="12"
                                                          IsChecked="{Binding Path=IsExpanded,
                                                                              RelativeSource={RelativeSource TemplatedParent}}"
                                                          OverridesDefaultStyle="True"
                                                          Template="{StaticResource AnimatedExpanderButton}" />

                                            <ContentPresenter x:Name="ExpanderContent"
                                                              Margin="5"
                                                              ContentSource="Content"
                                                              DockPanel.Dock="Bottom"
                                                              Visibility="{Binding ElementName=ExpanderButton,
                                                                                   Path=IsChecked,
                                                                                   Converter={StaticResource VisibilityConverter}}" />
                                        </DockPanel>
                                    </Border>
                                </ControlTemplate>
                            </Expander.Template>
                            <Expander.Content>
                                <Border BorderBrush="{StaticResource BlackBrush}" BorderThickness="1">
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="*" />
                                            <RowDefinition Height="Auto" />
                                        </Grid.RowDefinitions>
                                        <ItemsPresenter Grid.Row="0" Margin="0" />

                                        <Border Grid.Row="1"
                                                Margin="0,10,0,0"
                                                BorderBrush="{StaticResource BlackBrush}"
                                                BorderThickness="0,1,0,0"
                                                Visibility="{Binding Data.SettingRepository.MainDataSummaryVisible,
                                                                     Source={StaticResource BindingProxy},
                                                                     Converter={StaticResource VisibilityConverter}}">
                                            <Grid Background="{StaticResource WhiteBrush}">
                                                <Grid.RowDefinitions>
                                                    <RowDefinition Height="Auto" />
                                                    <RowDefinition Height="Auto" />
                                                    <RowDefinition Height="Auto" />
                                                </Grid.RowDefinitions>

                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="Auto" />
                                                    <ColumnDefinition Width="Auto" />
                                                    <ColumnDefinition Width="Auto" />
                                                    <ColumnDefinition Width="Auto" />
                                                    <ColumnDefinition Width="Auto" />
                                                    <ColumnDefinition Width="Auto" />
                                                </Grid.ColumnDefinitions>

                                                <Grid Grid.Row="0" Grid.ColumnSpan="6">
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition Width="Auto" />
                                                        <ColumnDefinition Width="Auto" />
                                                        <ColumnDefinition Width="Auto" />
                                                        <ColumnDefinition Width="Auto" />
                                                        <ColumnDefinition Width="Auto" />
                                                        <ColumnDefinition Width="Auto" />
                                                        <ColumnDefinition Width="Auto" />
                                                        <ColumnDefinition Width="Auto" />
                                                        <ColumnDefinition Width="Auto" />
                                                        <ColumnDefinition Width="Auto" />
                                                    </Grid.ColumnDefinitions>

                                                    <TextBlock Grid.Column="0"
                                                               Margin="5"
                                                               FontWeight="Bold"
                                                               Text="{Binding Path=Items[0].Option1Title}"
                                                               Visibility="{Binding Data.SettingRepository.MainDataShowSampleOptions,
                                                                                    Source={StaticResource BindingProxy},
                                                                                    Converter={StaticResource VisibilityConverter}}" />
                                                    <TextBlock Grid.Column="1"
                                                               Margin="5"
                                                               Text="{Binding Path=Items[0].Option1Data,
                                                                              Mode=OneWay}"
                                                               Visibility="{Binding Data.SettingRepository.MainDataShowSampleOptions,
                                                                                    Source={StaticResource BindingProxy},
                                                                                    Converter={StaticResource VisibilityConverter}}" />

                                                    <TextBlock Grid.Column="2"
                                                               Margin="5"
                                                               FontWeight="Bold"
                                                               Text="{Binding Path=Items[0].Option2Title}"
                                                               Visibility="{Binding Data.SettingRepository.MainDataShowSampleOptions,
                                                                                    Source={StaticResource BindingProxy},
                                                                                    Converter={StaticResource VisibilityConverter}}" />
                                                    <TextBlock Grid.Column="3"
                                                               Margin="5"
                                                               Text="{Binding Path=Items[0].Option2Data,
                                                                              Mode=OneWay}"
                                                               Visibility="{Binding Data.SettingRepository.MainDataShowSampleOptions,
                                                                                    Source={StaticResource BindingProxy},
                                                                                    Converter={StaticResource VisibilityConverter}}" />
                                                    <TextBlock Grid.Column="4"
                                                               Margin="5"
                                                               FontWeight="Bold"
                                                               Text="{Binding Path=Items[0].Option3Title}"
                                                               Visibility="{Binding Data.SettingRepository.MainDataShowSampleOptions,
                                                                                    Source={StaticResource BindingProxy},
                                                                                    Converter={StaticResource VisibilityConverter}}" />
                                                    <TextBlock Grid.Column="5"
                                                               Margin="5"
                                                               Text="{Binding Path=Items[0].Option3Data,
                                                                              Mode=OneWay}" />
                                                    <TextBlock Grid.Column="6"
                                                               Margin="5"
                                                               FontWeight="Bold"
                                                               Text="{Binding Path=Items[0].Option4Title}"
                                                               Visibility="{Binding Data.SettingRepository.MainDataShowSampleOptions,
                                                                                    Source={StaticResource BindingProxy},
                                                                                    Converter={StaticResource VisibilityConverter}}" />
                                                    <TextBlock Grid.Column="7"
                                                               Margin="5"
                                                               Text="{Binding Path=Items[0].Option4Data,
                                                                              Mode=OneWay}"
                                                               Visibility="{Binding Data.SettingRepository.MainDataShowSampleOptions,
                                                                                    Source={StaticResource BindingProxy},
                                                                                    Converter={StaticResource VisibilityConverter}}" />

                                                    <TextBlock Grid.Column="8"
                                                               Margin="5"
                                                               FontWeight="Bold"
                                                               Text="{x:Static languages:Strings.SampleIsAnnealedColumnHeader}" />
                                                    <CheckBox Grid.Column="9"
                                                              Margin="3,5,5,5"
                                                              IsChecked="{Binding Path=Items[0].SampleIsAnnealed,
                                                                                  Mode=OneWay}"
                                                              IsHitTestVisible="False"
                                                              Style="{StaticResource FandFCheckBox}" />
                                                </Grid>

                                                <!--  The mean Match temperature  -->
                                                <TextBlock Grid.Row="1"
                                                           Grid.Column="0"
                                                           Margin="5"
                                                           FontWeight="Bold"
                                                           Text="{x:Static languages:Strings.MeanSampleMatchTemperatureTitle}" />
                                                <TextBlock Grid.Row="1"
                                                           Grid.Column="1"
                                                           Margin="5"
                                                           Text="{Binding Path=Items[0].SampleMeanMatchTemperature,
                                                                          Mode=OneWay,
                                                                          StringFormat=\{0:N2\}}" />

                                                <!--  The match temperature range  -->
                                                <TextBlock Grid.Row="1"
                                                           Grid.Column="2"
                                                           Margin="5"
                                                           FontWeight="Bold"
                                                           Text="{x:Static languages:Strings.SampleTemperatureRangeTitle}" />
                                                <TextBlock Grid.Row="1"
                                                           Grid.Column="3"
                                                           Margin="5"
                                                           Text="{Binding Path=Items[0].SampleMatchTemperatureRange}" />

                                                <!--  The match temperature standard deviation  -->
                                                <TextBlock Grid.Row="1"
                                                           Grid.Column="4"
                                                           Margin="5"
                                                           FontWeight="Bold"
                                                           Text="{x:Static languages:Strings.SampleTemperatureStandardDeviationTitle}" />
                                                <TextBlock Grid.Row="1"
                                                           Grid.Column="5"
                                                           Margin="5"
                                                           Text="{Binding Path=Items[0].SampleMatchTemperatureStandardDeviation,
                                                                          Mode=OneWay,
                                                                          StringFormat=\{0:N3\}}" />

                                                <!--  The mean refractive index  -->
                                                <TextBlock Grid.Row="2"
                                                           Grid.Column="0"
                                                           Margin="5"
                                                           FontWeight="Bold"
                                                           Text="{x:Static languages:Strings.SampleMeanRefractiveIndexTitle}" />
                                                <TextBlock Grid.Row="2"
                                                           Grid.Column="1"
                                                           Margin="5"
                                                           Text="{Binding Path=Items[0].SampleMeanRefractiveIndex,
                                                                          Mode=OneWay,
                                                                          StringFormat=\{0:N5\}}" />

                                                <!--  The refractive index range  -->
                                                <TextBlock Grid.Row="2"
                                                           Grid.Column="2"
                                                           Margin="5"
                                                           FontWeight="Bold"
                                                           Text="{x:Static languages:Strings.SampleRIRangeTitle}" />
                                                <TextBlock Grid.Row="2"
                                                           Grid.Column="3"
                                                           Margin="5"
                                                           Text="{Binding Path=Items[0].SampleRefractiveIndexRange}" />

                                                <!--  The refractive index standard deviation  -->
                                                <TextBlock Grid.Row="2"
                                                           Grid.Column="4"
                                                           Margin="5"
                                                           FontWeight="Bold"
                                                           Text="{x:Static languages:Strings.SampleRIStandardDeviationTitle}" />
                                                <TextBlock Grid.Row="2"
                                                           Grid.Column="5"
                                                           Margin="5"
                                                           Text="{Binding Path=Items[0].SampleRefractiveIndexStandardDeviation,
                                                                          Mode=OneWay,
                                                                          StringFormat=\{0:N7\}}" />
                                            </Grid>
                                        </Border>
                                    </Grid>
                                </Border>
                            </Expander.Content>
                        </Expander>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </GroupStyle.ContainerStyle>
</GroupStyle>

您可以设置 ColumnHeaderStyle 并设置 RenderTransform 将 header 向右移动。

<DataGrid.ColumnHeaderStyle>
    <Style TargetType="DataGridColumnHeader">
        <Setter Property="RenderTransform">
            <Setter.Value>
                //change the X value accordingly
                <TranslateTransform X="100"></TranslateTransform>
            </Setter.Value>
        </Setter>
    </Style>
</DataGrid.ColumnHeaderStyle>

编辑 2:

正如您所提到的,这样做会导致一个小的差距。要删除它,您应该将第一列的左边距设置为负值,这会将此列的 header 向左拉伸。你可以这样做:

<DataGridTemplateColumn.HeaderStyle>
    <Style TargetType="DataGridColumnHeader">
        //change the margin accordingly
        <Setter Property="Margin" Value="-100 0 0 0" />
        <Setter Property="RenderTransform">
            <Setter.Value>
                //change the X value accordingly
                <TranslateTransform X="100"></TranslateTransform>
            </Setter.Value>
        </Setter>
    </Style>
</DataGridTemplateColumn.HeaderStyle>

你必须在这里重新设置RenderTransform,因为这个样式覆盖了一般的ColumnHeaderStyle。要删除重复项,您可以将渲染转换添加为资源。

编辑:

我刚刚看到您的 ExpandersContentPresenters 上有一些边距。如果您更改它们以使左侧边距为 0,它会使内容更靠左并减少对齐差异。

然后您将需要较少的 RenderTransform 偏移量。

你的代码的一些例子来说明我的意思:

<Expander Margin="5,10,5,5"
<ContentPresenter x:Name="ExpanderContent" Margin="5"

如果将其更改为

<Expander Margin="0,10,5,5"
<ContentPresenter x:Name="ExpanderContent" Margin="0 5 5 5"

列向左移动更多。