ScrollViewer - 滚动不适用于 ScrollViewer 内的图像

Question

我有一个ScrollViewer，里面有一些内容。问题是滚动无法正常工作。当您用手指滚动内容然后松开时，可滚动区域始终会弹回到顶部。它只是像弹性一样弹起，不会停留在您滚动到的底部。

<Grid Name="DetailPane" Margin="0,0,0,65" VerticalAlignment="Bottom" Visibility="Collapsed" Background="White" Opacity="0.85">
    <StackPanel>
        <Grid VerticalAlignment="Top">
            <Button Margin="0" Padding="0" Click="CloseDetailPanel" HorizontalAlignment="Right" >
                <Button.Content>
                    <Image Source="images\appbar.close.rest.small.png" Width="20" Height="20"></Image>
                </Button.Content>
            </Button>
        </Grid>
        <ScrollViewer x:Name="contentScrollViewer" VerticalAlignment="Top">
            <Grid>
                <StackPanel>
                    <TextBlock Padding="10,0,10,0" HorizontalAlignment="Left" Name="titleTextBlock" TextWrapping="Wrap" Foreground="#FF2B2929" FontWeight="Bold" />
                    <Image x:Name="contentThumbnail" Source="bild.jpg" Visibility="Visible" Width="400" Height="300" Margin="10" />
                    <TextBlock Padding="10" HorizontalAlignment="Left" Name="statusTextBlock" TextWrapping="Wrap" Foreground="#FF2B2929" />
                    <HyperlinkButton Padding="0,5,0,10" x:Name="WikipeadiaLink" HorizontalAlignment="Left" VerticalAlignment="Bottom" Content="More on Wikipedia" TargetName="_blank"  NavigateUri="" Foreground="Blue" FontSize="18" />
                </StackPanel>
            </Grid>
        </ScrollViewer>
    </StackPanel>
</Grid>

实际上，我以前也遇到过类似的问题，我在 Stack Overflow 的帮助下设法解决了这个问题……然而，我再次在这里寻求有关同一主题的帮助…… 谢谢你！

更新： 根据建议，我删除了 StackPanels 并将其替换为 Grids。格式完美，但我仍然遇到同样的滚动问题！内容还是回到开头！

<Grid Name="DetailPane" Margin="0,0,0,65" VerticalAlignment="Bottom" Visibility="Collapsed" Background="White" Opacity="0.85">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid Grid.Row="0" VerticalAlignment="Top">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Button Grid.Row="0"  Margin="0" Padding="0" Click="CloseDetailPanel" HorizontalAlignment="Right" >
            <Button.Content>
                <Image Source="images\appbar.close.rest.small.png" Width="20" Height="20"></Image>
            </Button.Content>
        </Button>
    </Grid>
    <Grid Grid.Row="1">
        <ScrollViewer x:Name="contentScrollViewer" VerticalAlignment="Top">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <TextBlock Grid.Row="0" Padding="10,0,10,0" HorizontalAlignment="Left" Name="titleTextBlock" TextWrapping="Wrap" Foreground="#FF2B2929" FontWeight="Bold" />
                <Image x:Name="contentThumbnail" Grid.Row="1" Source="bild.jpg" Visibility="Visible" Width="400" Height="300" Margin="10" />
                <TextBlock Grid.Row="2"  Padding="10" HorizontalAlignment="Left" Name="statusTextBlock" TextWrapping="Wrap" Foreground="#FF2B2929" />
                <HyperlinkButton Grid.Row="3" Padding="0,5,0,10" x:Name="WikipeadiaLink" HorizontalAlignment="Left" VerticalAlignment="Bottom" Content="More on Wikipedia" TargetName="_blank"  NavigateUri="" Foreground="Blue" FontSize="18" />
            </Grid>
        </ScrollViewer> 
    </Grid>
</Grid>

Answer 1

这是因为 stackPanel，请尝试将其替换为 Grid 等其他内容。

试试这个，我删除了多余的网格并为滚动查看器添加了拉伸对齐：

<Grid Name="DetailPane" Margin="0,0,0,65" VerticalAlignment="Bottom" Visibility="Collapsed" Background="White" Opacity="0.85">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Button Grid.Row="0"  Click="CloseDetailPanel" HorizontalAlignment="Right" VerticalAlignment="Top">
        <Button.Content>
            <Image Source="images\appbar.close.rest.small.png" Width="20" Height="20"></Image>
        </Button.Content>
    </Button>


        <ScrollViewer x:Name="contentScrollViewer" VerticalAlignment="Stretch" Grid.Row="1"HorizontalAlignment="Stretch">
            <Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <TextBlock Grid.Row="0" Padding="10,0,10,0" HorizontalAlignment="Left" Name="titleTextBlock" TextWrapping="Wrap" Foreground="#FF2B2929" FontWeight="Bold" />
                <Image x:Name="contentThumbnail" Grid.Row="1" Source="bild.jpg" Visibility="Visible" Width="400" Height="300" Margin="10" />
                <TextBlock Grid.Row="2"  Padding="10" HorizontalAlignment="Left" Name="statusTextBlock" TextWrapping="Wrap" Foreground="#FF2B2929" />
                <HyperlinkButton Grid.Row="3" Padding="0,5,0,10" x:Name="WikipeadiaLink" HorizontalAlignment="Left" VerticalAlignment="Bottom" Content="More on Wikipedia" TargetName="_blank"  NavigateUri="" Foreground="Blue" FontSize="18" />
            </Grid>
        </ScrollViewer>

</Grid>

Answer 2

最终解决这个问题的方法是向 ScrollViewer 添加静态高度。我意识到没有人能看到这一点，因为我省略了显示这是在 PivotItem 内部的代码部分。

根据此讨论： http://forums.create.msdn.com/forums/ t/84933.aspx 当 ScrollViewer 在 Pivot 内部时，它会停止正常工作，除非它定义了静态高度。

真气人！