如何让包含矩形的ScrollViewer在滚动到矩形末尾时停止滚动？

Question

我已经在ScrollViewer中创建了一个矩形，如下所示：

我已经在ScrollViewer中创建了一个矩形，如下所示：

<ScrollViewer ManipulationMode="Control" x:Name="songScrollViewer"  HorizontalScrollBarVisibility="Visible"  VerticalScrollBarVisibility="Disabled" Height="270" VerticalAlignment="Center" Width="728" Canvas.Top="20" d:LayoutOverrides="HorizontalMargin"   >
  <Rectangle x:Name="musicBG" Fill="#FF0692FD"/>
</ScrollViewer>

在使用应用程序时，MusicBg 的大小会发生变化，有时会变成大约 3,000 像素宽度。

musicBG.Width = _songLength*PixelsPerSecond

然而，当滚动 scrollViewer 时，它允许我将矩形完全滚出屏幕。

例如，当我已经移动矩形到想要的位置时，这行代码会给我以下值。

if (songScrollViewer.HorizontalOffset > songScrollViewer.ScrollableWidth)

HorizontalOffset的值约为1200，ScrollableWidth的值约为2900。

如何使矩形不完全滚动到屏幕外？

我希望水平偏移量约为1200只能将矩形推到目标的一半，而不是让它开始离开屏幕。

答案：

经过很多挫折后，我使用Canvas代替Border或Rectangle解决了这个问题。 如果有人能解释为什么会出现这个问题，并且是否有比Canvas更好的控件可以使用，我会给予奖励分数。

编辑：屏幕截图：

错误代码：

<ScrollViewer ManipulationMode="Control" x:Name="songScrollViewer" Width="720"  HorizontalScrollBarVisibility="Visible"  VerticalScrollBarVisibility="Disabled" Height="270" VerticalAlignment="Top" Canvas.Top="20" HorizontalAlignment="Left"   >
                                    <Border x:Name="musicBG"   Background="#FF0692FD" VerticalAlignment="Top" HorizontalAlignment="Left" Height="270" />

            </ScrollViewer>

糟糕代码的滚动图像：

良好的工作代码：

<ScrollViewer ManipulationMode="Control" x:Name="songScrollViewer" Width="720"  HorizontalScrollBarVisibility="Visible"  VerticalScrollBarVisibility="Disabled" Height="270" VerticalAlignment="Top" Canvas.Top="20" HorizontalAlignment="Left"   >
                <Canvas x:Name="musicBG"  Background ="#FF0692FD" Height="270" >
                    <Border   Background="#FF0692FD" VerticalAlignment="Top" HorizontalAlignment="Left" Height="270" />
                </Canvas>
            </ScrollViewer>

良好的滚动：请注意，底部右侧显示的是170秒，而不是较小的118秒（坏滚动）。

- Bob

---

如果您想上传一个屏幕截图来帮助可视化描述，以便我可以确定您试图实现什么，那么是的，您应该能够使用您已经尝试过的任何对象，但您可能需要将大小绑定到ScrollViewer的ViewPort，并且甚至可能不需要偏移量。目前从您的描述中很难想象，但我相信我们可以解决它。 - Chris W.

这很奇怪，它在矩形大小小于2000时完美运行，但当你滚动到底部时，它开始将其推得越来越远离屏幕。你引起了我的好奇心... - methodMan

@methodMan 这让我想起了Actionscript的一个限制，即形状不能大于2048像素或类似的大小。然而，这会产生不同的副作用。 - Bob

Answer 1

我相信你是对的，wp7无法渲染大于2048像素的形状。所以它滚动页面的原因是因为它将其视为大于2048，但你只能看到2048px的宽度，它只是滚动到矩形的“幽灵”部分。

我不确定是否可以覆盖此设置，但我想到的最佳解决方案（不覆盖）是将矩形分成小于2000的块（为了安全起见），然后在滚动查看器中无缝地显示它们在水平堆栈面板中。问题是，根据你编写代码的方式，这个解决方案可能很难实现；但当你显示它并且你的逻辑只将其视为一个大块时，你可能只需要在ViewModel中将其拆分。

- methodMan