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.
source to share
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>
source to share
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.
source to share