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:
Xaml:
Output:
From this article you will learn how to create a customize Scrollbar.
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