Friday, July 9, 2010

SCROLLVIEWER control in Silver light

Hi all,

This time I am simply showing that how easily can we use a Scroll bar effect in our silver light page.. Scroll bar important in the page when there is an item which is not fully displayed inside the control, and we need to either Scroll UP or Scroll side to view the content completely. This Scroll bar can be taken either Horizontally or vertically and can be used either in a page panel or inside a text box to provide the scrolling functionality for its containing control..

This is a Inbuilt control for the Silver light, I am using the VS2010 and Silver Light 4 to create this sample applciation..Please look at the code for the page..

x:Class="ScrollViewerSample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">

x:Name="LayoutRoot" Background="White">
VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible" Margin="10,20,120,15">
Image Source="Bhokal.jpg" Stretch="Fill" Width="400" Height="400" >
>
>
>
>


(Due to browser problem the "<" and ">" tag are disables please include them.)


Here as you can see , simply I have taken the SCROLLVIEWER control and sets its "VerticalScrollBarVisibility" and "HorizontalScrollBarVisibility" property to true. We can set the Source of a Image(Eg. I am taking an IMAGE here), or we can also take the control like TEXTBOX.


While the Design time the page is like this...



and You can see How our SCROLLVIEWER control is working while running the application...
here is the Output screen for the application.




Hope You have like this sample, Please feel free to post your comment..



Thanks
Anil Kumar Pandey
Micorsoft MVP (C#)
Navi Mumbai,
Maharashtra

Kontera