ScrollViewer Height to automatically scroll when content overflows the page

silverlightxaml

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

  1. Have a silverlight page use 100% width/height of the HTML page

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

Best Answer

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.

Related Topic