Clever Geek Handbook

WP7: ScrollViewer viewport size

Windows Phone 7. I have a ScrollViewer inside a StackPanel inside a PivotItem inside a Pivot. There are some other controls above the ScrollViewer. My intention is for the ScrollViewer to take the available bottom of the screen (~ 400px), and its content scrolls vertically (content height ~ 800px).

Now, there is no vertical scrolling right now - when I try to drag, the view returns to its previous position, as if the viewport was sized exactly to the content. When I look at the ViewportHeight property, it is ~ 800px - the same as the content.

ScrollViewer height not set ("Auto"); I assumed it would take up exactly space. This is clearly not the case. Question: There is not enough manual height setting, is there a way to implement the logic "viewport height is exactly how much vertical space you have 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>

The width and height of the canvas are set in code.

+3


source to share


2 answers


Two things:

  • StackPanel prevents children from automatically loading the rest of the available space. Use a grid with specific lines instead. This allows your ScrollViewer to sit in a container, which is the exact height remaining vertically.
  • Your canvas (inside the ScrollViewer) is top and left aligned and no specific size 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>
+3


source


Without looking at your XAML, this is an assumption - but based on common issues



The ScrollViewer actually gets all the space it needs to include all content items.
Either give it an absolute height, or wrap it in a grid that will limit it to the available space in the StackPanel.

+2


source






More articles:


All Articles