Over a million developers have joined DZone.
Gold Partner

Windows Phone ScrollViewer not scrollable?

· Mobile Zone

The Mobile Zone is brought to you in partnership with Apptimize.  Discover the 5 little know reasons your app is underperforming and how to better understand your customers mobile needs.

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.

The Mobile Zone is brought to you in partnership with Apptimize.  Learn more about app optimization methods that help teams identify user preferences, decide the next iterative changes to make, and validate them through testing.

Topics:

Published at DZone with permission of Andrea Haubner , DZone MVB .

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}