Custom ScrollBar in Windows Phone Programming

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.1

2.) Write following into MainPage.xaml.cs:
3.) Compile and build the project.
Output