This example shows how you can create scroll bar in windows phone.
Algorithm:
1.) Create a new project by File-> New Project name it CustomScrollBarExample.
2.) Select Visual C# -> Silverlight for WindowsPhone from template section.
3.) Write following into MainPage.xaml:
<phone:PhoneApplicationPage x:Class="CustomScrollBarExample.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}" SupportedOrientations="Portrait" Orientation="Portrait" shell:SystemTray.IsVisible="True"> <phone:PhoneApplicationPage.Resources> <Storyboard x:Name="storyboard"> <DoubleAnimation Storyboard.TargetName="slider" Storyboard.TargetProperty="Value" To="50" Duration="0:0:5" /> </Storyboard> </phone:PhoneApplicationPage.Resources> <!--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="Custom ScrollBar Example" Style="{StaticResource PhoneTextNormalStyle}"/> </StackPanel> <!--ContentPanel - place additional content here--> <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Text="{Binding ElementName=slider, Path=Value}" HorizontalAlignment="Center" Margin="24" /> <Slider Name="slider" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Minimum="0" Maximum="100" Orientation="Horizontal" VerticalAlignment="Center" /> <Button Grid.Row="2" Grid.Column="0" Content="ReSet" Click="OnSetToZeroClick" /> <Button Grid.Row="2" Grid.Column="1" Content="GoTo End" Click="OnSetToOneHundredClick" /> <Button Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" Content="AutoIncrease" HorizontalAlignment="Center" Click="OnAnimateTo50Click" /> <Button Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" Content="Maximum Increase 25" HorizontalAlignment="Center"using System; using System.Windows; using System.Windows.Controls; using Microsoft.Phone.Controls; namespace CustomScrollBarExample { public partial class MainPage : PhoneApplicationPage { public MainPage() { InitializeComponent(); } void OnSetToZeroClick(object sender, RoutedEventArgs args) { slider.Value = 0; } void OnSetToOneHundredClick(object sender, RoutedEventArgs args) { slider.Value = 100; } void OnAnimateTo50Click(object sender, RoutedEventArgs args) { storyboard.Begin(); } void OnSetMaxTo40Click(object sender, RoutedEventArgs e) { slider.Maximum = 25; } } }Click="OnSetMaxTo40Click" />
</Grid>
</Grid>
</phone:PhoneApplicationPage>4.) Run for output.
Steps:
1.) Create a project named CustomScrollBarExample and set the information as stated in the image.
Build Target OS: Windows Phone OS 7.1
Name: CustomScrollBarExample
Min SDK Version: 7.12.) Write following into MainPage.xaml.cs:
3.) Compile and build the project.
Output