DataGrid 周围的 WPF ScrollViewer 影响列宽

WPF ScrollViewer around DataGrid affects column width

提问by Jay

I have a problem with a ScrollViewer that I use to scroll a user control that contains a data grid. Without the scroll viewer the columns fill the data grid as I want but when adding a scroll viewer the columns shrink to ~15px. I was able to simplify my layout and can still reproduce this behaviour.

我使用 ScrollViewer 来滚动包含数据网格的用户控件时遇到问题。如果没有滚动查看器，列会根据需要填充数据网格，但是当添加滚动查看器时，列会缩小到 ~15px。我能够简化我的布局，并且仍然可以重现这种行为。

When binding the datagrid width to another control the columns have their normal with, but that has unsuprisingly the same effect as a fixed width on the datagrid. I guess I'm not the first one who has this problem. How can I work around this behaviour to have my grid adjusting its size to the available space and give it's columns a propotional width?

当将数据网格宽度绑定到另一个控件时，列有它们的法线，但这与数据网格上的固定宽度具有相同的效果。我想我不是第一个遇到这个问题的人。我怎样才能解决这个问题，让我的网格将其大小调整到可用空间并为其列提供一个比例宽度？

With scrollviewer: and without:

使用滚动查看器： 和不使用：

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

回答by sa_ddam213

Yeah, I had this problem a while ago, I resorted to a workaround, I will post here just incase its useful

是的，我不久前遇到了这个问题，我求助于一种解决方法，我会在这里发布以防万一它有用

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

The trick was to give the DataGrida width, in this case I bound back to the containing element

诀窍是给DataGrid一个宽度，在这种情况下，我绑定回包含元素

Or if you don't use the HorizontalScrollBaryou can disable it, this will allow the ScrollViewerto calculate a width allowing the DataGrid to calculate a width.

或者如果你不使用HorizontalScrollBar你可以禁用它，这将允许ScrollViewer计算宽度，允许 DataGrid 计算宽度。

回答by Ishikawa

I experienced the same thing last week.

我上周经历了同样的事情。

Typically, this problem occurs when you have the following elements :

通常，当您具有以下元素时会出现此问题：

1. A DataGridwith undefined width placed inside a ScrollViewerwith the HorizontalScrollBarVisibilityproperty set to Auto
2. At least one DataGridColumnhas an unlimited/undefined width (e.g : Width="*")

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

Actually, the solution depends on your needs :

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

• Either you want your DataGridColumnsto take all the available space of your DataGridwhen the Window is showing (even if there's no displayed data) : in this case, sa_ddam213's answer can help you to cope with.
• Or you don't mind having some blank spaces between your last column and the DataGridright border on Window's first show.

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

For the last option, you just need to set fixed widths for your DataGridColumns(or just don't define it if you don't want to, this is not very important as columns can be easily resized by the user through a double-click). In this context, your DataGridcan be defined without a width.

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

Here is an example :

这是一个例子：

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

By this way, if a column content runs over the container after a column auto-resizing, a horizontal scroll bar will appear.

这样，如果在列自动调整大小后列内容在容器上运行，则会出现水平滚动条。