How to scroll the datagrid in stackpanel?

Question

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!

[How to add a ScrollBar to a Stackpanel](https://stackoverflow.com/questions/6250240/how-to-add-a-scrollbar-to-a-stackpanel) — Lei Yang, Jul 17 '17 at 02:53
How does your code example behaves? Is StackPanel height increased instead of showing scrollbar? — opewix, Jul 17 '17 at 03:15

score 7 · Accepted Answer · answered Jul 17 '17 at 12:39

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.

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.

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.

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>

score 5 · Answer 2 · answered Nov 25 '17 at 09:59

5

DockPanel instead of StackPanel works for me.

answered Nov 25 '17 at 09:59

rosta

897
7
2

score -1 · Answer 3 · answered Jul 17 '17 at 04:37

-1

try adding VerticalScrollBarVisibility="Auto", ScrollViewer.CanContentScroll="True" to datagrid property.

answered Jul 17 '17 at 04:37

RKV

21
5

How to scroll the datagrid in stackpanel?

3 Answers3

Linked