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.
XAML Code:
Check the following figure in correspondence with various elements & their styles used in XAML.
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>