Home/ Questions/Q 6976599
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T17:31:03+00:00

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

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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