在横向和纵向模式下使用 ScrollViewer 正确滚动

Question

我有一个带有如下 PivotItem 的简单 Pivot。

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

问题是如果图像（名为“ComicStrip”）不完全可见，我希望它垂直滚动。这适用于纵向模式，但不适用于横向模式。在横向中，图像只能部分滚动，图像的底部将不可见。

当我处于横向模式时，我想我必须告诉 ScrollViewer 它的高度，但我不知道如何以及处理这种用例的最佳做法是什么。不过，这似乎是一个基本用例。

有什么建议吗？

Answer 1

我认为这里的问题是使用 StackPanel 作为 Pivot 项目模板！如果您使用 Grid，您应该不会有任何问题。

用这个替换你的 Pivot 项目模板：

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