Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Windows Phone ScrollViewer not scrollable?

DZone's Guide to

Windows Phone ScrollViewer not scrollable?

· Mobile Zone
Free Resource

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

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.

Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.

Topics:

Published at DZone with permission of Andrea Haubner, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}