Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ScrollViewer Height to automatically scroll when content overflows the page

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.

like image 666
Radu094 Avatar asked Nov 02 '09 13:11

Radu094


1 Answers

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.

like image 167
thomasmartinsen Avatar answered Oct 21 '22 05:10

thomasmartinsen