June 18, 2011

Blend style scrollbar–another version

Following scrollbar style mimics Microsoft Bland style scrollbars with different colors.
Check the following figure in correspondence with various elements & their styles used in XAML.
image
XAML Code:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>

<SolidColorBrush x:Key="ScrollBarBorderBrush" Color="#FFD8D8D8"/>
<SolidColorBrush x:Key="StandardBorderBrush" Color="#FFD8D8D8"></SolidColorBrush>
<SolidColorBrush x:Key="PressedBrush" Color="CornflowerBlue"></SolidColorBrush>
<SolidColorBrush x:Key="GlyphBrush" Color="Blue"></SolidColorBrush>

<LinearGradientBrush x:Key="StandardBrush" EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FF1D82C3" Offset="0"/>
<GradientStop Color="#FF1D82C3" Offset="1"/>
<GradientStop Color="#FF359EE2" Offset="0.308"/>
<GradientStop Color="#FF359EE2" Offset="0.696"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="HoverBrush" EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FF1D82C3" Offset="0"/>
<GradientStop Color="#FF1D82C3" Offset="1"/>
<GradientStop Color="#FF69C1F9" Offset="0.308"/>
<GradientStop Color="#FF69C1F9" Offset="0.7"/>
</LinearGradientBrush>

<Style x:Key="VerticalScrollBarThumbStyle" TargetType="{x:Type Thumb}">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Margin" Value="1,0,1,0" />
<Setter Property="BorderBrush" Value="{StaticResource StandardBorderBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Rectangle Width="8" Name="ellipse"  Stroke="{StaticResource StandardBorderBrush}"
Fill="{StaticResource StandardBrush}"
RadiusX="5" RadiusY="5"></Rectangle>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="ellipse" Property="Fill" Value="{StaticResource HoverBrush}"></Setter>
</Trigger>
<Trigger Property="IsDragging" Value="True">
<Setter TargetName="ellipse" Property="Fill" Value="{StaticResource PressedBrush}"></Setter>
</Trigger>

</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="HorizontalScrollBarThumbStyle" TargetType="{x:Type Thumb}">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Margin" Value="0,1,0,1" />
<Setter Property="BorderBrush" Value="{StaticResource StandardBorderBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Rectangle Height="8" Name="ellipse"  Stroke="{StaticResource StandardBorderBrush}"
Fill="{StaticResource StandardBrush}"
RadiusX="5" RadiusY="5"></Rectangle>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="ellipse" Property="Fill" Value="{StaticResource HoverBrush}"></Setter>
</Trigger>
<Trigger Property="IsDragging" Value="True">
<Setter TargetName="ellipse" Property="Fill" Value="{StaticResource PressedBrush}"></Setter>
</Trigger>

</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="LineButtonUpStyle" TargetType="{x:Type RepeatButton}">
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Grid Margin="1" Height="18" >
<Path Stretch="None" HorizontalAlignment="Center"
VerticalAlignment="Center" Name="Path"  Fill="{StaticResource StandardBrush}"
Data="M 0 8 L 8 8 L 4 0 Z"></Path>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Path" Property="Fill"
Value="{StaticResource HoverBrush}" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="Path" Property="Fill"
Value="{StaticResource PressedBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="LineButtonDownStyle" TargetType="{x:Type RepeatButton}">
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Grid Margin="1" Height="18" >
<Path Stretch="None" HorizontalAlignment="Center"
VerticalAlignment="Center" Name="Path"  Fill="{StaticResource StandardBrush}"
Data="M 0 0 L 4 8 L 8 0 Z"></Path>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Path" Property="Fill"
Value="{StaticResource HoverBrush}" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="Path" Property="Fill"
Value="{StaticResource PressedBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="LineButtonLeftStyle" TargetType="{x:Type RepeatButton}">
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Grid Margin="1" Width="18" >
<Path Stretch="None" HorizontalAlignment="Center"
VerticalAlignment="Center" Name="Path"  Fill="{StaticResource StandardBrush}"
Data="M 0 0 L -8 4 L 0 8 Z"></Path>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Path" Property="Fill"
Value="{StaticResource HoverBrush}" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="Path" Property="Fill"
Value="{StaticResource PressedBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="LineButtonRightStyle" TargetType="{x:Type RepeatButton}">
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Grid Margin="1" Width="18" >
<Path Stretch="None" HorizontalAlignment="Center"
VerticalAlignment="Center" Name="Path"  Fill="{StaticResource StandardBrush}"
Data="M 0 0 L 8 4 L 0 8 Z"></Path>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Path" Property="Fill"
Value="{StaticResource HoverBrush}" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="Path" Property="Fill"
Value="{StaticResource PressedBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrollBarPageButtonStyle" TargetType="{x:Type RepeatButton}">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border Background="Transparent" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
<Border x:Name="ScrollBarBorder"
BorderBrush="{DynamicResource ScrollBarBorderBrush}"
BorderThickness="1"
CornerRadius="5" Padding="1"
Width="14">
<Grid>
<Grid.RowDefinitions>
<RowDefinition MaxHeight="18"/>
<RowDefinition Height="*"/>
<RowDefinition MaxHeight="18"/>
</Grid.RowDefinitions>
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="White"></GradientStop>
<GradientStop Offset="1" Color="White"></GradientStop>
</LinearGradientBrush>
</Grid.Background>
<RepeatButton Grid.Row="0" Height="18"
Style="{StaticResource LineButtonUpStyle}"
Command="ScrollBar.LineUpCommand" >

</RepeatButton>

<Track Name="PART_Track" Grid.Row="1" IsDirectionReversed="True" >
<Track.DecreaseRepeatButton>
<RepeatButton Command="ScrollBar.PageUpCommand"
Style="{StaticResource ScrollBarPageButtonStyle}">
</RepeatButton>
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource VerticalScrollBarThumbStyle}" Background="#00EBE9ED" Margin="0,0"/>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Command="ScrollBar.PageDownCommand"
Style="{StaticResource ScrollBarPageButtonStyle}"
BorderBrush="{x:Null}">
</RepeatButton>
</Track.IncreaseRepeatButton>
</Track>

<RepeatButton Grid.Row="2" Height="18"
Style="{StaticResource LineButtonDownStyle}"
Command="ScrollBar.LineDownCommand">
</RepeatButton>
</Grid>
</Border >
</ControlTemplate>
<ControlTemplate x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}">
<Border x:Name="HorizontalScrollBarBorder"
BorderBrush="{DynamicResource ScrollBarBorderBrush}"
BorderThickness="1"
CornerRadius="5" Padding="1"
Height="14">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="18"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition MaxWidth="18"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Offset="0" Color="White"></GradientStop>
<GradientStop Offset="1" Color="White"></GradientStop>
</LinearGradientBrush>
</Grid.Background>
<RepeatButton Grid.Column="0" Width="18"
Style="{StaticResource LineButtonLeftStyle}"
Command="ScrollBar.LineLeftCommand" >
</RepeatButton>

<Track Name="PART_Track" Grid.Column="1" IsDirectionReversed="False" >
<Track.DecreaseRepeatButton>
<RepeatButton Command="ScrollBar.PageLeftCommand"
Style="{StaticResource ScrollBarPageButtonStyle}">
</RepeatButton>
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource HorizontalScrollBarThumbStyle}">
</Thumb>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Command="ScrollBar.PageRightCommand"
Style="{StaticResource ScrollBarPageButtonStyle}">
</RepeatButton>
</Track.IncreaseRepeatButton>
</Track>
<RepeatButton Grid.Column="2" Width="18"
Style="{StaticResource LineButtonRightStyle}"
Command="ScrollBar.LineRightCommand">
</RepeatButton>
</Grid>
</Border>
</ControlTemplate>
<Style TargetType="{x:Type ScrollBar}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Style.Triggers>
<Trigger Property="Orientation" Value="Vertical" >
<Setter Property="Width" Value="18"/>
<Setter Property="Height" Value="Auto" />
<Setter Property="Template" Value="{StaticResource VerticalScrollBar}" />
</Trigger>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="Width" Value="Auto"/>
<Setter Property="Height" Value="18" />
<Setter Property="Template" Value="{StaticResource HorizontalScrollBar}" />
</Trigger>
</Style.Triggers>
</Style>
</ResourceDictionary>