ScrollViewer - scroll不能处理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

最终，解决这个问题的是给ScrollViewer增加一个静态高度。我意识到没有人会看到这一点，因为我省略了代码中显示这是在PivotItem中的那部分。

根据下面的讨论:除非定义了静态高度，否则当ScrollViewer在透视中时，它将停止正常工作。

令人气愤！

Answer 2

这是因为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>