9

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: bad scroll

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. good scroll

3
  • If you want to throw a screen shot up of what you're describing to help visualize it so I can be certain of what you're trying to accomplish then yes, you should be able to use any of the objects you were already trying but you might have to bind a size to the ViewPort of the ScrollViewer and may not even need an offset. Currently though it's difficult to visualize from your description but I'm sure we can sort it out.
    – Chris W.
    Commented Jun 25, 2012 at 3:36
  • 1
    That is very strange, it works perfectly until the rectangle gets bigger then 2000 and then it starts to push it further and further off the screen when you scroll to the end. You've caught my curiosity....
    – methodMan
    Commented Jun 26, 2012 at 18:37
  • @methodMan That reminds me of a limitation in Actionscript where shapes could not be larger than 2048 pixels or something similar. With different side affects than this however.
    – Bob
    Commented Jun 26, 2012 at 19:45

1 Answer 1

1
+100

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.