CODEWITHSUNDEEP
silverlightwindows-phone-7xamlscrollviewer
Seva Alekseyev
Seva Alekseyev

Reputation: 61378

WP7: ScrollViewer viewport size

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.

Upvotes: 3

Views: 1252

Answers (2)

Jeremiah
Jeremiah

Reputation: 5514

Two things:

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

Upvotes: 3

Matt Lacey
Matt Lacey

Reputation: 65556

Without seeing your XAML this is assummed - but based on commonly seen issues

The ScrollViewer is actually being assigned all the space it needs to include all it's content items.
Either give it an absolute height or wrap it in a Grid, which will limit it to the available space within the StackPanel.

Upvotes: 2

Related Questions