ScrollViewer height for automatic scrolling when page content overflows

Question

Well, that will sound silly, but I can't get ScrollViewer to work correctly. What I need to do is

• Use a Silverlight Page 100% HTML Page Width / Height

• You have a height control = 160 pixels at the top of the Sliverlight page, and the rest (100% - 160 pixels) is a ScrollViewer with dynamically changing content.

so on the HTML page I:

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%"> 

then in XAML:

  <Grid x:Name="LayoutRoot" Height="Auto"> <StackPanel Orientation="Vertical" Height="Auto"> <App:ASilverlightControl x:Name="Header" Height="160"/> <ScrollViewer Name="svw" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Visible" Height="Auto" > <StackPanel Orientation="Vertical" x:Name="DynamicContentHere"> </StackPanel> </ScrollViewer> </StackPanel> </Grid> 

Now, no matter what I try, ScrollViewer will always expand / contract to contain all the elements in the StackPanel, even if it means an overflow under the screen, but there is no vertical scrollbar.

The only way to get this to work is to set Height = 800 to ScrollViewer.

Answer 1

If you put a ScrollViewer inside a StackPanel, it will never work. StackPanel will always use all the space that is required for the contents of the ScrollViewer.

Instead, you should use a grid with two rows:

 <Grid x:Name="LayoutRoot" Height="Auto"> <Grid.RowDefinitions> <RowDefinition Height="160"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <App:ASilverlightControl x:Name="Header" Grid.Row="0"/> <ScrollViewer Name="svw" Grid.Row="1" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Visible"> <StackPanel Orientation="Vertical" x:Name="DynamicContentHere"> ... </StackPanel> </ScrollViewer> </Grid> 

* in the second, RowDefinition will automatically make the ScrollViewer as large as possible, but still save it inside your visual area and, therefore, make your ScrollViewer work.