How do I get a ScrollViewer with a Rectangle inside to stop scrolling when it reaches the end of the rectangle?

Question

I have created a Rectangle inside of a ScrollViewer like this

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

During the use of the app, the size of MusicBg changes, sometimes to something around 3,000 pixels width.

musicBG.Width = _songLength*PixelsPerSecond

However, while scrolling the scrollViewer, it allows me to scroll the rectangle all the way off the screen.

For example this line of code gives me the following values when I have moved the rectangle as far as I want to move it.

if (songScrollViewer.HorizontalOffset > songScrollViewer.ScrollableWidth)

HorizontalOffset has a value of ~1200 and ScrollableWidth has a value of about ~2900.

How can I get this to be done properly so that the rectangle is not scrolled completely off the screen?

I would expect a HorizontalOffset of about 1200 to only push the rectangle about halfway through to it's destination, and not make it start going off screen.

ANSWER:

After much frustration, I was able to solve this problem by using Canvas instead of Border or Rectangle. I'll award points if anyone can explain why this problem happened, and if there is a less processor intensive control that would work better than canvas.

Edit: Screen shots:

Bad Code:

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

Image of bad scroll with bad code:

Good working code:

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

Good Scroll: Notice it says 170 seconds on the bottom right instead of the smaller number of 118 seconds in the bad scroll.

Answer 1

I believe your right, wp7 won't render shapes that are bigger then 2048 pixels. So the reason it's scrolling of the page is because it's treating it as if it were bigger then 2048 but you can only see up to a width of 2048px and its just scrolling over to the "ghost" part of the rectangle.

I'm not sure if you can override this but the best solution I could come up with (without overriding) is by splitting up your rectangle into chucks that are smaller then 2000 (just to be safe) and then displaying them seamlessly in a horizontal stack panel inside the scroll viewer. The problem with this is that depending on how you've coded it, this solution might be hard to implement; but you might just be able to split it in your ViewModel when displaying it and your logic would only see it as one big chunk.