Mobile Zone is brought to you in partnership with:

I am a mother of four kids with a passion for languages, writing and programming. I try to cover everything a beginner should know. After all, I am a beginner. If there is anybody out there, thinking I missed something, or if somebody wants other topics, please feel free to contact me. Andrea is a DZone MVB and is not an employee of DZone and has posted 28 posts at DZone. You can read more from them at their website. View Full User Profile

Windows Phone ScrollViewer not scrollable?

12.19.2011
| 7989 views |
  • submit to reddit

I am currently working on yet another application. In that application I have two pages, the MainPage where I can choose a certain phrase. Choosing one of them navigates me to my second page, where I have three TextBlocks. The length of the text varies, depending on the phrase I chose in the first page.

No problem, I thought. I’ll just put my TextBlocks in a StackPanel, And I nicely can put a ScrollViewer around the TextBlocks:

<StackPanel>
    <ScrollViewer>
    <TextBlock Name="TextBlock1"
               Height="100"
               FontSize="24"
               TextWrapping="Wrap"/>
    </ScrollViewer>
    <ScrollViewer>
    <TextBlock Name="TextBlock2"
               Height="280"
               FontSize="28"
               Margin="10"
               TextWrapping="Wrap">
    </TextBlock>
    </ScrollViewer>
    <TextBlock Name="TextBlock3"
               Height="120"
               FontSize="22"
               Foreground="Red"
               TextWrapping="Wrap"/>
</StackPanel>

Well, what sounded nice in theory did not work out. When I ran the application, I could see there is a ScrollViewer, but somehow it just bounced back to the start point whenever I tried to scroll.

The solution was quite easy in the end. I replaced the StackPanel with a Grid:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="100" />
        <RowDefinition Height="280" />
        <RowDefinition Height="120" />
    </Grid.RowDefinitions>
    <ScrollViewer>
    <TextBlock Name="TextBlock1"
               FontSize="24"
               TextWrapping="Wrap"/>
    </ScrollViewer>
    <ScrollViewer>
    <TextBlock Name="TextBlock2"
               FontSize="28"
               Margin="10"
               TextWrapping="Wrap">
    </TextBlock>
    </ScrollViewer>
    <TextBlock Name="TextBlock3"
               FontSize="22"
               Foreground="Red"
               TextWrapping="Wrap"/>
</Grid>
 

Now I can scroll in the two TextBlocks that I need.

References
Published at DZone with permission of Andrea Haubner, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Joe Mckedreck replied on Wed, 2011/12/21 - 2:59am

Hi,

I went through your trick, after this i read following article
http://www.c-sharpcorner.com/uploadfile/yougerthen/working-with-a-scrollviewer-control-in-a-wpf-application/.

And tried a sample small app to have the same scenario.
I kept long text  in textblock and kept scrollviewer above it. But not getting what happend with you exactly.

So,Can you please let me know what actually happened?

Did scrollviewer automatically scroll top when you scroll down?

 

Thanks,

Joe

Andrea Haubner replied on Wed, 2011/12/21 - 4:20am in response to: Joe Mckedreck

Hi,

I had three text blocks, two of them I needed scrollable. So naturally I put them into a ScrollViewer. When I ran it, first it looked like I can scroll through my text, but it just immediately bounced back to the top. I could not even see the rest of my text. It didn't scroll at all. Replacing the StackPanel with a Grid fixed that.

I also have a second solution: If you look at my example, I have set a Height property to the Text Block. If I remove that and set the Height of the ScrollViewer instead, I can even leave the Text Blocks in a StackPanel.

Andrea

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.