Add scolling to a user control having multiple Expander controls

0
votes

I have a UserControl in my WPF application which needs to have 3 Expander controls oriented Vertically. 

     <Grid  Margin="0,-3,0,0" Height="430" Width="Auto">
        <Grid.RowDefinitions/>
        <ScrollViewer>
            <StackPanel Height="430" ScrollViewer.VerticalScrollBarVisibility="Auto">
                <Expander Grid.Row="0" Margin="0,5,0,0" MinHeight="0"  MaxHeight="220" Height="Auto" Header="Auto Create Well Pad" OpacityMask="#FFECF5F5">
                    <Grid Margin="5,5">
                        ...
                    </Grid>
                </Expander>
                <Expander Grid.Row="1" Margin="0,5,0,0" Height="Auto" Header="Scenario well pads" OpacityMask="#FFECF5F5">
                    <WrapPanel Margin="0,5,0,0" OpacityMask="#FFECF5F5" VerticalAlignment="Top">
                        ...
                    </WrapPanel>
                </Expander>
                <Expander Grid.Row="2" Margin="0,5,0,5" Height="Auto" Header="Project Well Pads" IsExpanded="{Binding ShowAvailablePads}" OpacityMask="#FFECF5F5">

                </Expander>
            </StackPanel>
        </ScrollViewer>
    </Grid>

With the above XAML code, the scroll bar does appear but on expanding/collapsing the expander controls, the scroll bar does not become active.

Note: All expanders have different controls inside them and when they expand, scroll bar should become active

2
wpfxamlscrollview

2 Answers

2
votes

I looks like you should set the height on the ScrollViewer instead of the StackPanel.

If you set a fixed height on the StackPanel it will never become bigger, so when expanding the Expanders, if the content can no longer fit inside the StackPanel, it will just clip the remaining content and not show it.

So the point is to make the StackPanel grow freely by not setting the height explicitly, and then have the ScrollViewer take over when there is no more room.

<ScrollViewer Height="430">
    <StackPanel>
        ....
    </StackPanel>
</ScrollViewer>
0
votes

In this case you need set the Height for ScrollViewer:

<ScrollViewer Height="100" 
              VerticalAlignment="Top"
              ScrollViewer.VerticalScrollBarVisibility="Auto"
... />

Because from MSDN:

A ScrollViewer enables content to be displayed in a smaller area than its actual size. When the content of the ScrollViewer is not entirely visible, the ScrollViewer displays scrollbars that the user can use to move the content areas that is visible.