如何滚动堆栈面板中的数据网格？ [英] How to scroll the datagrid in stackpanel?

问题描述

当长度超过 stackpanel 时，我想滚动 datagrid ，所以我尝试了以下操作：

I want to scroll the datagrid when it's length exceeds the stackpanel, so I tried this:

<StackPanel Orientation="Horizontal">                         
   <ScrollViewer VerticalScrollBarVisibility="Auto" CanContentScroll="True">
       <DataGrid Name="dgConfig" VerticalAlignment="Stretch" AutoGenerateColumns="False">
             <DataGrid.Columns>
              ...
             </DataGrid.Columns>
       </DataGrid>
   </ScrollViewer>                                
</StackPanel>

但这无法正常工作，我在此网络上进行了搜索，未能找到任何可用的解决方案。那么我该如何解决呢？谢谢！

But this doesn't work, I have searched on this web and failed to find any avaiable solutions. So how should I fix this? Thanks!

推荐答案

ScrollViewers 和 StackPanels 不能很好地协同工作，因为 StackPanel 如果 Orientation 属性设置为 Horizo​​ntal ，并且如果设置为 Vertical ，则无限垂直空间。

ScrollViewers and StackPanels don't work very well together since a StackPanel measures its child elements with infinite horizontal space if its Orientation property is set to Horizontal and infinite vertical space if it is set to Vertical.

所以您要么必须指定 StackPanel 的高度：

So you will either have to specify a height for the StackPanel:

<StackPanel Orientation="Horizontal" Height="100">

如果不这样做，它将具有无限的高度，这就是为什么看不到滚动条的原因。

If you don't it will have an infinite height and that's why you see no scrollbars.

另一个更好的选择是摆脱 StackPanel 并使用另一个 Panel 不能用无限空间测量其子元素。

The other, and much better option, would be to get rid of the StackPanel and use another Panel that doesn't measures its child elements with an infinite space.

DataGrid 内置有自己的 ScrollViewer ，因此您无需自己将其放在 ScrollViewer 元素中。摆脱 StackPanel 和 ScrollViewer ：

The DataGrid has its own ScrollViewer built-in, so you don't need to put it inside a ScrollViewer element yourself. Get rid of the StackPanel(s) and the ScrollViewer:

<DataGrid Name="dgConfig" VerticalAlignment="Stretch" AutoGenerateColumns="False"
                          VerticalScrollBarVisibility="Auto">
    <DataGrid.Columns>
        ...
    </DataGrid.Columns>
</DataGrid>

这篇关于如何滚动堆栈面板中的数据网格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！