Total Online Users: 510
 How to submit Articles to C# Corner
  Blue Theme Orange Theme Green Theme Red Theme
 
6 Months Free & No Setup Fees ASP.NET Hosting!
Home | Forums | Videos | Advertise | Certifications | Downloads | Blogs | Interviews | Jobs | Beginners | Training
 | Consulting  
Submit an Article Submit a Blog 
 Jump to
Skip Navigation Links
TechnologyExpand Technology
WebsiteExpand Website
Sponsored by
6 Months Free & No Setup Fees ASP.NET Hosting!
Become a Sponsor
Search :       Advanced Search »
Home » XAML » Working with a ScrollViewer control in a WPF application

Working with a ScrollViewer control in a WPF application

By  Bechir Bejaoui August 21, 2008

The ScrollViewer is an object that represents a scrollable area that contains other visible controls, it could be found within the System.Windows.Controls. At the contrast of a ScrollBar object, the ScrollViewer is a WPF new feature. So let’s discover its principal characteristics through this article.
Author Rank :
Page Views : 37931
Downloads : 0
Rating :
 Rate it
Level : Intermediate
   Print Read/Post comments Post a comment  Similar Articles  
   Email to a friend  Bookmark  Author's other articles  
 
Sponsored by
Team Foundation Server Hosting
Become a Sponsor
 Tag Cloud
 Latest Jobs
More ... 
 Latest Interview Questions
More ... 


The ScrollViewer is an object that represents a scrollable area that contains other visible controls, it could be found within the System.Windows.Controls.  At the contrast of a ScrollBar object, the ScrollViewer is a WPF new feature. So let's discover its principal characteristics through this article.

Imagine that you host an image in your application in such way that its dimensions are bigger than the window. You can make use of a ScrollViewer to enable see the entire image without having the obligation to change the dimension of the given window. Try to host a big image within a given window. Say that the image height and width are both 1000 pixels.

<Window x:Class="myWpfApplication.Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:wf="clr-namespace:System.Windows.Forms.Integration;assembly=WindowsFormsIntegration"

    Title="Window1" Height="300" Width="300" xmlns:my="clr-namespace:System.Windows.Forms.Integration;assembly=WindowsFormsIntegration"

      Loaded="Window_Loaded" >

            <Image Source="C:\myWpfApplication\myWpfApplication\image.BMP" Width="1000" Height="1000"></Image>

The result will be:


 
Figure 1

And even you expand the window. You couldn't get the entire image at the screen level. To prevent this problem you may use the ScrollViewer object as follow:

Replace the above XAML code by this one.

<Window x:Class="myWpfApplication.Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:wf="clr-namespace:System.Windows.Forms.Integration;assembly=WindowsFormsIntegration"

    Title="Window1" Height="300" Width="300" xmlns:my="clr-namespace:System.Windows.Forms.Integration;assembly=WindowsFormsIntegration"

      Loaded="Window_Loaded" >

    <Grid>

    <ScrollViewer VerticalScrollBarVisibility="Visible"

                   HorizontalScrollBarVisibility="Visible">

        <Image Source="C:\myWpfApplication\myWpfApplication\image.BMP" Width="1000" Height="1000"></Image>

    </ScrollViewer></Grid>

</Window>

And the result will be


 
Figure  2

Then it is possible to scroll the image.That's it

Good Dotneting!!!
Comment Request!
Thank you for reading this post. Please post your feedback, question, or comments about this post Here.
Login to add your contents and source code to this article
 [Top] Rate this article
 
 About the author
 
Author
Looking for C# Consulting?
C# Consulting is founded in 2002 by the founders of C# Corner. Unlike a traditional consulting company, our consultants are well-known experts in .NET and many of them are MVPs, authors, and trainers. We specialize in Microsoft .NET development and utilize Agile Development and Extreme Programming practices to provide fast pace quick turnaround results. Our software development model is a mix of Agile Development, traditional SDLC, and Waterfall models.
Click here to learn more about C# Consulting.
 
Introducing MaxV - one click. infinite control. Hyper-V Hosting from MaximumASP.
Finally – a virtual platform that delivers next-generation Windows Server 2008 Hyper-V virtualization technology from a managed hosting partner you can truly depend on. Visit www.maximumasp.com/max for a FREE 30 day trial. Hurry offer ends soon. Climb aboard the MaxV platform and take advantage of High Availability, Intelligent Monitoring, Recurrent Backups, and Scalability – with no hassle or hidden fees. As a managed hosting partner focused solely on Microsoft technologies since 2000, MaximumASP is uniquely qualified to provide the superior support that our business is built on. Unparalleled expertise with Microsoft technologies lead to working directly with Microsoft as first to offer IIS 7 and SQL 2008 betas in a hosted environment; partnering in the Go Live Program for Hyper-V; and product co-launches built on WS 2008 with Hyper-V technology.
Dynamic PDF
ceTE software specializes in components for dynamic PDF generation and manipulation. The DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and new content to existing PDF documents from within your applications.
Discover the Top 5 .NET Memory Management Fundamentals
To write the best .NET code, you need to know exactly how the .NET framework really manages memory. Ricky Leeks presents the Top 5 fundamental facts of .NET memory management. Learn more.
Nevron Chart for .NET 2010.1 Now Available
The leading .NET charting control now features PDF, Flash and Silverlight export, visualization of large datasets and more. Deliver true charting functionality to your BI, Scorecard, Presentation or Scientific apps. Download evaluation now.
ASP.NET 4 Hosting
Get 2 Months Free of ASP.NET Hosting for Only $4.95/month! Receive FREE MS SQL and MySQL Databases Including ASP.NET 4/3.5, MVC 3.0, Silverlight 4, Windows 2008/IIS 7.0 Plus FREE IIS 7 Modules. Host UNLIMITED ASP.NET Web Sites – Click Here!
 
 Post a Feedback, Comment, or Question about this article
Subject:
Comment:
Sponsored by
DevExpress Free UI Controls
Become a Sponsor
 Comments
scrolling??? by balazs On August 22, 2010
Hi maybe u could help me!
So I wrote the following code and I wanna put the grid into a scrollviewer but I cant figure out how could I? I wanna make the viewport scrollable when I zoom in the viewport!

If u know please help me!!



<Window x:Class="Wpf3DApp.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Sunred" Height="712" Width="900"
WindowStartupLocation="CenterScreen">
<Grid Background="White" MouseWheel="Grid_MouseWheel" MouseDown="Grid_MouseDown" MouseUp="Grid_MouseUp" MouseMove="Grid_MouseMove"

Height="672" Focusable="True" Cursor="Hand" ShowGridLines="False">





<Viewport3D x:Name="mainViewport" Grid.Row="1" Margin="0,9.982,0,0" Grid.ColumnSpan="4">

<Viewport3D.Camera> <PerspectiveCamera x:Name="camera" Position="20,20,9" LookDirection="-11,-10,-9" FarPlaneDistance="100" UpDirection="0,0,1" NearPlaneDistance="1"
FieldOfView="60" >

<PerspectiveCamera.Transform> <Transform3DGroup x:Name="transformGroup"> <RotateTransform3D> <RotateTransform3D.Rotation> <AxisAngleRotation3D x:Name="rotY" Axis="0 1 0"
Angle="0" /> </RotateTransform3D.Rotation> </RotateTransform3D> <RotateTransform3D> <RotateTransform3D.Rotation> <AxisAngleRotation3D x:Name="rotX" Axis="1 0 0"
Angle="0" /> </RotateTransform3D.Rotation> </RotateTransform3D> <RotateTransform3D> <RotateTransform3D.Rotation> <AxisAngleRotation3D x:Name="rotZ" Axis="0 0 1"
Angle="0" /> </RotateTransform3D.Rotation> </RotateTransform3D> </Transform3DGroup> </PerspectiveCamera.Transform>


</PerspectiveCamera> </Viewport3D.Camera>






<ModelVisual3D x:Name="model">
<ModelVisual3D.Content> <Model3DGroup x:Name="modelGroup"> <!-- Lights --> <AmbientLight Color="Gray"/> <DirectionalLight Color="Gray" Direction="-1,-3,-2"/> <DirectionalLight Color="Gray" Direction="1,-2,3"/>
</Model3DGroup> </ModelVisual3D.Content>




</ModelVisual3D>




</Viewport3D>










<TextBox Height="0" HorizontalAlignment="Left" Margin="6,5,0,0" Name="test"

VerticalAlignment="Top" Width="0" /> <Button Content="Action" Click="ActionClicked" x:Name="Action" Height="19.723"

Margin="75.037,0,0,5.277" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="75" /> <Button Content="Open" Margin="151.25,0,0,5.277" Click="myButtonClicked" Name="myButton"

Height="20" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="87.5" /> <Button Content="Materials" Click="MaterialsClicked" x:Name="Materials" Height="20"

Margin="0,0,0,5.277" Grid.Row="1" VerticalAlignment="Bottom" Grid.Column="1"

HorizontalAlignment="Left" Width="74" /> <Button Content="Layers" Margin="243.75,0,0,5" Click="LayersClicked" x:Name="Layers"

HorizontalAlignment="Left" Width="74" Height="20" VerticalAlignment="Bottom" />
</Grid>


</Window>
Reply | Email | Modify 
scrollviewer printing by betsy On July 17, 2011
How would you print an entire page in a scrollviewer? I have a few pages that a user fills out info requested and I would like them to be able to save page to a folder and print it out later,but saving as a visual cuts page off. Thanks,Betsy
Reply | Email | Modify 
Team Foundation Server Hosting
 © 2012  contents copyright of their authors. Rest everything copyright Mindcracker. All rights reserved.