---
title: "ScrollViewer Control in Windows Phone 7 Development"  
description: "ScrollViewer represents a scrollable area that can contain other visible elements.  This article is going to explain how to use ScrollViewer control i"  
author: "Anonymous User"  
published: 2012-04-15  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/923/scrollviewer-control-in-windows-phone-7-development  
category: "windows phone"  
tags: ["windows phone"]  
reading_time: 2 minutes  

---

# ScrollViewer Control in Windows Phone 7 Development

ScrollViewer represents a scrollable area that can contain other visible elements. This [article](https://yourviews.mindstick.com/view/81489/kashmir-now-after-an-year-of-abrogation-of-article-370) is going to explain how to use **ScrollViewer** [control](https://yourviews.mindstick.com/view/83439/bipartisan-gun-control-bill-passed-in-us-after-decades) in [Windows](https://www.mindstick.com/articles/12793/insightful-review-of-stellar-phoenix-windows-data-recovery-home-edition) 7 phone development. Let’s see a brief demonstration on it.\

##### Getting started:

1. Open [Visual Studio](https://www.mindstick.com/articles/12378/visual-studio-for-mac-is-out-of-beta-preview-now-officially-available)

2. Create new [Silverlight](https://www.mindstick.com/blog/54/silverlight-in-asp-dot-net) Windows 7 Phone [Development Project](https://www.mindstick.com/blog/11637/how-to-choose-the-right-web-designer-for-your-web-design-development-project)

3. Enter [your project](https://www.mindstick.com/forum/156583/best-way-to-link-bootstrap-file-in-your-project) Name

4. Click on button ‘Ok’

![ScrollViewer Control in Windows Phone 7 Development](https://www.mindstick.com/mindstickarticle/52bce0e0-ccd3-4dd4-adb6-69140b349d5e/images/74666250-f59b-467f-9cad-514da63cea68.png)

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](https://www.mindstick.com/mindstickarticle/52bce0e0-ccd3-4dd4-adb6-69140b349d5e/images/65f80b07-41e2-4079-8dc9-bb2c14ec5a8b.png)

Now write down the following to code to build up above layout. Now set the **HorizontalScrollBarVisibility** [property](https://www.mindstick.com/articles/198559/an-ownership-of-property-in-hua-hin) of ScrollViewer control.

![ScrollViewer Control in Windows Phone 7 Development](https://www.mindstick.com/mindstickarticle/52bce0e0-ccd3-4dd4-adb6-69140b349d5e/images/3ea235c8-761b-4ef8-98c9-2b74f0e7ca99.png)

##### 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](https://www.mindstick.com/mindstickarticle/52bce0e0-ccd3-4dd4-adb6-69140b349d5e/images/83334605-4ff4-4df2-83e0-047e71581657.png)

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

\

---

Original Source: https://www.mindstick.com/articles/923/scrollviewer-control-in-windows-phone-7-development

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.