WP7: ScrollViewer viewport size

Question

Windows Phone 7. I have a ScrollViewer inside a StackPanel inside a PivotItem inside a Pivot. Above the ScrollViewer, there are some other controls. My intention is that the ScrollViewer takes the available lower part of the screen (~400px), and its content is scrolled vertically (content height ~800px).

Now, right now there's no vertical scrolling - when I try to drag, the view returns in the previous position, as if the viewport size exactly matches the content size. When I look at the ViewportHeight property, it's ~800px - same as content.

Height of the ScrollViewer is not set ("Auto"); I was assuming it would take exactly the available space. That's obviously not the case. Question - short of setting Height by hand, is there a way to implement the logic of "viewport height is exactly how much vertical space you've got left"?

EDIT: here's the XAML, irrelevant details removed:

<Pivot x:Name="Root">
    <ctls:PivotItem>
        <ctls:PivotItem.Header>Title</ctls:PivotItem.Header>
        <StackPanel>

            <!-- More stuff here-->

            <ScrollViewer Name="MenuPanel" HorizontalScrollBarVisibility="Disabled">
                    <Canvas x:Name="Menu" HorizontalAlignment="Left" VerticalAlignment="Top">
                     </Canvas>
            </ScrollViewer>
        </StackPanel>
    </ctls:PivotItem>
</Pivot>

Width and height of the canvas are set in code.

Jeremiah Jeremiah · Accepted Answer · 2012-03-06T22:30:41

Two things:

A StackPanel doesn't allow it's children to automatically take up the rest of the space available. Use a Grid, instead, with defined Rows. This allows your ScrollViewer to be in a container which is the exact height remaining vertically.
Your Canvas (inside the ScrollViewer) is aligned to top and left, and without a size defined, is exactly 0 pixels high and 0 pixels wide.

Good luck.

<Pivot x:Name="Root"> 
    <ctls:PivotItem> 
        <ctls:PivotItem.Header>Title</ctls:PivotItem.Header> 
        <Grid> 
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition/>
            </Grid.RowDefinitions>

            <Grid Grid.Row="0">
                <!-- More stuff here--> 
            </Grid>

            <ScrollViewer 
                Grid.Row="1" 
                Name="MenuPanel">

                    <Canvas x:Name="Menu" 
                          Height="500" 
                          Width="500"/>

            </ScrollViewer> 
        </StackPanel> 
    </ctls:PivotItem> 
</Pivot>

WP7: ScrollViewer viewport size

2 Answers