Home > DeveloperSection > Articles > ScrollViewer Control in Windows Phone 7 Development

ScrollViewer Control in Windows Phone 7 Development


Windows Phone Windows Phone 
Ratings:
0 Comment(s)
 9904  View(s)
Rate this:

ScrollViewer Control in Windows Phone 7 Development

ScrollViewer represents a scrollable area that can contain other visible elements.  This article is going to explain how to use ScrollViewer control in Windows 7 phone development. Let’s see a brief demonstration on it.

Getting started:

1.       Open Visual Studio

2.       Create new Silverlight Windows 7 Phone Development Project

3.       Enter your project Name

4.       Click on button ‘Ok’

ScrollViewer Control in Windows Phone 7 Development

Now drag and drop ScrollViewer control in ‘MainPage.xaml’ design interface and set some properties of ScrollViewer control.

ScrollViewer Control in Windows Phone 7 Development

Now write down the following to code to build up above layout. Now set the HorizontalScrollBarVisibility property of ScrollViewer control.

ScrollViewer Control in Windows Phone 7 Development

Code of MainPage.xaml:

<!--LayoutRoot is the root grid where all page content is placed-->

    <Grid x:Name="LayoutRoot" Background="Transparent">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

 

        <!--TitlePanel contains the name of the application and page title-->

        <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="ScrollViewer Demo" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" FontSize="56" />

        </StackPanel>

 

        <!--ContentPanel - place additional content here-->

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

            <ScrollViewer Height="221" HorizontalAlignment="Left" Margin="12,28,0,0" Name="scrollViewer1" VerticalAlignment="Top" Width="438" HorizontalScrollBarVisibility="Auto" DataContext="{Binding}">

                <TextBlock Height="30" Name="textBlock1" Text="The most obvious reason to use the WebBrowser control is to display web content within the page of a Windows Phone 7 application. For instance, you may be developing an application that shows Twitter feeds in a portion of the screen. " TextWrapping="Wrap" />

            </ScrollViewer>

        </Grid>

    </Grid>

 

Now execute your application; following output will be appearing.

ScrollViewer Control in Windows Phone 7 Development

To see full text you can scroll it. This is the complete description of ScrollViewer Control in Windows Phone 7 Development.


Don't want to miss updates? Please click the below button!

Follow MindStick