Correct scrolling with ScrollViewer in landscape and portrait modes

Question

I have a simple Pivot with a PivotItem as below.

<StackPanel>
   <controls:Pivot x:Name="TopPivot" Title="Daily Comics" ItemsSource="{Binding ComicsListModel}" SelectionChanged="TopPivot_SelectionChanged" Height="762">
            <controls:Pivot.HeaderTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding ComicName}"/>
                </DataTemplate>
            </controls:Pivot.HeaderTemplate>
            <controls:Pivot.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding PubDate}" HorizontalAlignment="Center" VerticalAlignment="Top" />
                        <ScrollViewer VerticalScrollBarVisibility="Auto">
                            <Image x:Name="ComicStrip" Source="{Binding ComicImage}" Stretch="UniformToFill" />
                        </ScrollViewer>
                    </StackPanel>
                </DataTemplate>
            </controls:Pivot.ItemTemplate>
   </controls:Pivot>
</StackPanel>

The problem is that I want the Image (named "ComicStrip") to scroll vertically if it's not entirely visible. This works in portrait mode, but not in lanscape. In lanscape the image can be scrolled only partly and bottom part of the image will not be visible.

I think I have to tell the ScrollViewer it's height when I am in lanscape mode, but I don't know how and what would be the best practice to deal with this kind of use case. Seems like a basic use case, though.

Any advice what I should do?

What happens if you set VerticalScrollBarVisibility to Visible rather than Auto? — Paul Diston, Apr 20 '12 at 08:08
Hmm - no difference in behaviour. And more strangely, I don't see a scrollbar either when panning the image. — Johan Paul, Apr 20 '12 at 08:11

score 1 · Accepted Answer · answered Apr 20 '12 at 08:15

1

I think the problem here is using a StackPanel for the Pivot item template! If you use a Grid, you shouldn't have any issue there.

Replace your Pivot item template with this:

<controls:Pivot.ItemTemplate>
    <DataTemplate>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition />
            </Grid.RowDefinitions>
            <TextBlock Text="{Binding PubDate}" />
            <ScrollViewer VerticalScrollBarVisibility="Auto" Grid.Row="1">
                <Image x:Name="ComicStrip" Source="{Binding ComicImage}" Stretch="UniformToFill" />
            </ScrollViewer>
        </Grid>
    </DataTemplate>
</controls:Pivot.ItemTemplate>

answered Apr 20 '12 at 08:15

Pedro Lamas

7,185
4
27
35

1

Thanks! The StackPanel was definitely the issue here. I had another StackPanel in the XAML too which was not included in my original paste so I replaced that as well with a Grid and now scrolling works! Final version can be seen here: [link](https://github.com/kypeli/WPDailyComic/blob/master/ComicBrowser/MainPage.xaml) – Johan Paul Apr 20 '12 at 10:16
I this this is the root cause. http://stackoverflow.com/questions/802821/how-can-i-get-scrollviewer-to-work-inside-a-stackpanel – Johan Paul Apr 20 '12 at 13:05

Correct scrolling with ScrollViewer in landscape and portrait modes

1 Answers1