Customize the Scrollbar in WPF (XAML)

In this article we are going to see how to create a customize scrollbar in WPF, for that first we have to understand about the Scrollbar, scrollbar is made up with a Track, Two RepeatButtons, and a Thumb.
now we are going to create a Style for each one.

Thumb: For thumb we have to make border with curve
Repeat Buttons: Make the Visible as Transparent
Track : Make a gradient path

Resource:

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

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

   

    <LinearGradientBrush x:Key="thumbbrush" StartPoint="0,0" EndPoint="1,0">

        <GradientStopCollection>

            <GradientStop Color="#c1dbe8" Offset="0" />

            <GradientStop Color="#FF2A56CB" Offset="0.6" />

            <GradientStop Color="#066caa" Offset="1" />

        </GradientStopCollection>

    </LinearGradientBrush>

   

    <LinearGradientBrush x:Key="trackbrush" StartPoint="0,0" EndPoint="1,0">

        <GradientStopCollection>

            <GradientStop Color="#bcbcbc" Offset="0"/>

            <GradientStop Color="#eeeeee" Offset="0.75"/>

            <GradientStop Color="#eeeeee" Offset="1" />

        </GradientStopCollection>

    </LinearGradientBrush>

   

    <ControlTemplate x:Key="repeattemplate" TargetType="{x:Type RepeatButton}">       

            <Rectangle Fill="Transparent" />      

    </ControlTemplate>

   

    <ControlTemplate x:Key="thumbtemplate" TargetType="{x:Type Thumb}">       

            <Border Background="{TemplateBinding Background}" CornerRadius="10,10,10,10"                          Padding="1" />                   

    </ControlTemplate>

   

    <ControlTemplate x:Key="verticalscrollbar" TargetType="{x:Type ScrollBar}">

        <Grid>

            <Border CornerRadius="10,10,10,10" Background="{StaticResource trackbrush}"                          BorderBrush="#999999"

                    BorderThickness="1" Padding="1">

                <Track x:Name="PART_Track" IsDirectionReversed="True">

                    <Track.DecreaseRepeatButton>

                        <RepeatButton Template="{StaticResource repeattemplate}"                                                    Command="ScrollBar.PageUpCommand" />

                    </Track.DecreaseRepeatButton>

                    <Track.Thumb>

                        <Thumb Template="{StaticResource thumbtemplate}" 

                               Background="{TemplateBinding Background}"

                               BorderThickness="1" 

                               BorderBrush="{TemplateBinding BorderBrush}" />

                    </Track.Thumb>

                    <Track.IncreaseRepeatButton>

                        <RepeatButton Template="{StaticResource repeattemplate}"                                             Command="ScrollBar.PageDownCommand" />

                    </Track.IncreaseRepeatButton>

                </Track>

            </Border>

        </Grid>

    </ControlTemplate>

   

    <Style x:Key="scrollstyle" TargetType="ScrollBar">

        <Setter Property="MinWidth" Value="20" />

        <Setter Property="Background" Value="{StaticResource thumbbrush}"/>

        <Setter Property="BorderBrush" Value="#999999" />

        <Setter Property="Template" Value="{StaticResource verticalscrollbar}" />

    </Style>

   

</ResourceDictionary>

Xaml:

    <Grid Height="319" VerticalAlignment="Bottom">

        <Grid.RowDefinitions>

            <RowDefinition Height="19" />

            <RowDefinition />

            <RowDefinition Height="40" />

        </Grid.RowDefinitions>

       

        <ScrollBar Grid.Row="1" Style="{StaticResource scrollstyle}" Maximum="100"                               ViewportSize="36" >

        </ScrollBar>

    </Grid>

Output:

From this article you will learn how to create a customize Scrollbar.