ScrollViewer的水平ScrollBar将固定高度的内容向上推

Question

我有一个包含两个自定义控件的两列网格布局。这两个控件共同构成一个表/数据网格。我将此表/数据网格拆分为两个块的原因是第二个控件（右侧的一个控件）在水平方向上可能很大，因此需要将其包装在ScrollViewer中。左侧的一个用作标题，并且应始终可见，不能滚动到视线之外。这两个部分的高度匹配。

您将在下面看到的问题是，滚动查看器的水平滚动条将第二部分向上推，而不是占用自己的空间。

请记住，由于表格的高度较小，因此不使用ScrollViewer的垂直滚动条。

这是它的外观：

到目前为止，我已经尝试过：

• 我尝试向网格中添加一行（高度分别为auto和*），并使ScrollViewer跨过它，但无济于事。
• 我已经将行的高度设置为与滚动条的高度相匹配，但这种方法可行，但是我发现这种方法存在两个巨大的问题：
  1. 如果不需要滚动条（第二个控件在水平方向上不是很大），则该行将变为无用的空白空间，有点像页边距，这对我来说还是不希望的。
  2. 这是不可靠的，因为它依赖于滚动条的硬编码大小，我们知道滚动条的大小可以随环境和主题而变化。

Answer 1

为此，您只需要一个数据网格。

只需设置HorizontalScrollBarVisibility="Auto"和FrozenColumnCount="1"。

Answer 2

如果控件是分开的，则可以仅在一个容器的底部设置边距，而不必在另一个容器的底部设置

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="400" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid Margin="0,0,0,18">
            <DataGrid>

            </DataGrid>
        </Grid>

        <ScrollViewer Grid.Column="1" VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Visible">
            <DataGrid>

        </DataGrid>
        </ScrollViewer>
    </Grid>

Answer 3

另一个简单的解决方案是在Grid中包含3行，并让ScrollViewer.ScrollBar在第三行中扩展。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <Button Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Content="Add columns" Command="{Binding Path=AddCommand}" Height="25" Margin="10"/>

    <DataGrid x:Name="HeadersGrid"  Grid.Row="1" Grid.Column="0" ItemsSource="{Binding Path=HeadersCollection}"/>

    <ScrollViewer Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Hidden">
        <DataGrid x:Name="MyGrid" ItemsSource="{Binding Path=DataCollection}" Height="{Binding ElementName=HeadersGrid, Path=ActualHeight}"></DataGrid>
    </ScrollViewer>
</Grid>

在上面的示例中，我将第二个Height的{​​{1}}绑定到第一个DataGrid。当DataGrid的{​​{1}}出现时，它将显示在第三行。