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?

Answer 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>