WPF中在DataGrid周围使用ScrollViewer会影响列宽

Question

我有一个问题，我使用ScrollViewer滚动包含数据网格的用户控件。没有ScrollViewer时，列会按照我的要求填充数据网格，但是添加了ScrollViewer后，列会缩小到约15像素。我已经简化了我的布局，并且仍然可以重现这种行为。

当将datagrid宽度绑定到另一个控件时，列具有其正常宽度，但这与datagrid上的固定宽度具有相同的效果。我想我不是第一个遇到这个问题的人。如何解决这种行为，使我的网格调整其大小以适合可用空间并给其列一个比例宽度？

带有scrollviewer的图像： 不带scrollviewer的图像：

<Window x:Class="GridTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<ScrollViewer HorizontalScrollBarVisibility="Auto">
<Grid MinWidth="200">
    <DataGrid Margin="0" AutoGenerateColumns="False">
        <DataGrid.Columns>
            <DataGridCheckBoxColumn Header="Column A" Width="*"/>
            <DataGridCheckBoxColumn Header="Column B" Width="*"/>
        </DataGrid.Columns>
    </DataGrid>
</Grid>
</ScrollViewer>

- Jay

---

你试过这个吗：<DataGrid HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" ColumnWidth="*" /> - ninja hedgehog

是的，不幸的是，结果相同。 - Jay

删除 HorizontalScrollBarVisibility="Auto" 并尝试运行。 - ninja hedgehog

Answer 1

是的，我以前遇到过这个问题，我采用了一个解决办法，我会在这里发布，以防有用。

<ScrollViewer HorizontalScrollBarVisibility="Auto">
    <Grid x:Name="grid" MinWidth="200">
        <DataGrid Width="{Binding ElementName=grid, Path=ActualWidth}">
            <DataGrid.Columns>
                <DataGridCheckBoxColumn Header="Column A" Width="1*"/>
                <DataGridCheckBoxColumn Header="Column B" Width="1*"/>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</ScrollViewer>

关键在于给一个宽度，在这种情况下，我将其绑定回包含元素

或者，如果您不使用，您可以禁用它，这将允许计算出一个宽度，从而使DataGrid计算出一个宽度。

- sa_ddam213

---

当我调整窗口宽度时，网格会随之调整大小，但仅在宽度增加时才会发生。有什么办法可以在窗口宽度减小时也调整网格大小吗？ - mardok

感谢您提供的这个优秀示例，演示了如何使用XAML修复XAML的一小部分。^^ - Hardryv

这个提议的解决方案会导致VS2010崩溃 :-) 看起来像是一个bug。 - juFo

@mardokпјҢжҲ‘йҖҡиҝҮдҪҝз”ЁRelativeSourceз»‘е®ҡеҲ°ScrollContentPresenterзҡ„ActualWidthжқҘи§ЈеҶідәҶдҪ зҡ„й—®йўҳгҖӮ - Bradley Uffner

如前所述，它只有在增加宽度时才能正常工作。我能使它正常工作的方法是借助 @BradleyUffner 的帮助： - Roemer

Answer 2

我上周也遇到了同样的问题。

通常，当您具备以下元素时，就会出现这个问题：

1. 一个未定义宽度的 DataGrid 放置在一个 HorizontalScrollBarVisibility 属性设置为 Auto 的 ScrollViewer 中 2. 至少有一个 DataGridColumn 具有无限/未定义的宽度（例如：Width="*"）

实际上，解决方案取决于您的需求：

1. 或者您希望在窗口显示时（即使没有显示数据），您的 DataGridColumns 占用所有可用空间。在这种情况下，sa_ddam213 的答案可以帮助您应对。 2. 或者您不介意在窗口首次显示时，在最后一列和 DataGrid 右边框之间留有一些空白。

对于最后一种选项，您只需要为 DataGridColumns 设置固定宽度（或者如果您不想定义它，则不定义它，这并不是非常重要，因为用户可以通过双击轻松调整列大小）。在这种情况下，您的 DataGrid 可以被定义为没有宽度。

下面是一个示例：

<ScrollViewer HorizontalScrollBarVisibility="Auto">
    <Grid x:Name="grid" MinWidth="200">
        <DataGrid>
            <DataGrid.Columns>
                <DataGridCheckBoxColumn Header="Column A" Width="100"/>
                <DataGridCheckBoxColumn Header="Column B" />
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</ScrollViewer>

通过这种方式，如果一个列的内容在自动调整大小后超出了容器范围，将会出现水平滚动条。

- Ishikawa

---

将 ScrollViewer 的 HorizontalScrollBarVisibility 属性设置为 None 对我有效。 - Rudi

Answer 3

这个解决方案可以防止mardok提到的问题。

    <ScrollViewer x:Name="Scroll"
                  HorizontalScrollBarVisibility="Auto"
                  VerticalScrollBarVisibility="Auto">
    <StackPanel Width="{Binding ElementName=Scroll, Path=ViewportWidth}"
                MinWidth="150">
        <TextBlock Text="Other UI Controls"/>
        <DataGrid>
            <DataGrid.Columns>
                <DataGridTextColumn Header="Col1" Width="*"/>
                <DataGridTextColumn Header="Col2" Width="50"/>
            </DataGrid.Columns>
        </DataGrid>
    </StackPanel>
</ScrollViewer>

1. 将容器面板的宽度绑定到ScrollViewer的ViewportWidth上
2. 为容器面板设置MinWidth。

- YantingChen