ScrollViewer Height to automatically scroll when content overflows the page

Question

Ok ,this is going to sound silly, but I can't get the ScrollViewer to work properly. What I need to do is

Have a silverlight page use 100% width/height of the HTML page
Have a Height=160px control on the top part of the Sliverlight page, then have the rest (100% - 160px) be a ScrollViewer with dynamically changing content.

so in the HTML page I have:

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

then in the 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, the ScrollViewer will alway expand/contract to contain all elements in the StackPanel, even if that means overflowing under the screen but no vertical scrollbar.

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

thomasmartinsen thomasmartinsen · Accepted Answer · 2009-11-02T23:11:18

If you put a ScrollViewer inside a StackPanel it will never work. The StackPanel will always allow all the space that the content of the ScrollViewer requires.

You should use a Grid with two rows instead:

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

The * in the second RowDefinition will automatically make the ScrollViewer fill as much as possible but still keep it inside your visual area and hence make your ScrollViewer work.

ScrollViewer Height to automatically scroll when content overflows the page

1 Answers