WP7 ScrollViewer Bug When Content Height > 2000px

In my project, I use ScrollViewer to show some long height infomation.

I use like this:

<Grid Grid.Row="1" Height="630">
     <ScrollViewer Background="Red" Grid.Row="1">
         <Grid>
             <Rectangle Height="3000" Fill="LightBlue" Width="440"/>
          </Grid>
     </ScrollViewer>
</Grid>

   

But, unfortunately, the rectangle does not show completely when scrollView bar's vertical height > 2000.

I have tested without Grid as ScrollViewer's content, only with Rectangle and the result is the same.

And the bug is also happens with Width.

Any you have any idea what's the workaround? How to deal with it?

This post is the same issue without any fixes.

The test full xaml is :

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
        <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>

    <Grid Grid.Row="1" Height="630">
        <ScrollViewer Background="Red" Grid.Row="1">
            <Grid>
                <Rectangle Height="3000" Fill="LightBlue" Width="440"/>
            </Grid>
        </ScrollViewer>
    </Grid>
</Grid>

If it just a text, you could use this custom control: scrollable textblock. Otherwise, divide your content into blocks with size < 2048.

UPD:

2048px is a limit for GPU cached graphics. You can use a lot of controls (< 2048) inside a scrollviewer (total > 2048). In some cases all is fine, but in some it doesn't

For example:

<ScrollViewer Background="#4FFF6060">
    <Grid Background="#FFFF8A8A" Width="240" HorizontalAlignment="Left" d:LayoutOverrides="Height">
        <Rectangle Fill="Blue" Height="4000" VerticalAlignment="Top" Width="120" HorizontalAlignment="Left"/>
        <Rectangle Fill="Red" Height="2000" VerticalAlignment="Top" Width="120" HorizontalAlignment="Right"/>
        <Rectangle Fill="Red" Height="2000" VerticalAlignment="Top" Width="120" HorizontalAlignment="Right" Margin="0,2000,0,0"/>
    </Grid>
</ScrollViewer>

In this case blue rectangle cropped at 2048px, but two rectangles with 2000px height placed one above the other looks fine.

The second example uses StackPanel to show 4000px area and it works too

<StackPanel Background="#FFFF8A8A" HorizontalAlignment="Right" Width="240" d:LayoutOverrides="Height">
    <Rectangle Fill="#FF88FF00" Height="2000" Width="240" HorizontalAlignment="Right"/>
    <Rectangle Fill="#FF88FF00" Height="2000" VerticalAlignment="Top" Width="240" HorizontalAlignment="Right"/>
</StackPanel>