Tuesday, 3 June 2014

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.

No comments:

Post a Comment