XAML (WPF) BLOG

Hi again,

In this post i will present you a stylish ScrollBar.

First of all i had to make a control template for the ScrollViewer to make it a little bit transparent:

<ControlTemplate x:Key="ScrollViewerControlTemplate1" TargetType="{x:Type ScrollViewer}"><Grid x:Name="Grid" Background="#7F000000">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*"/>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="*"/>

<RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

<Rectangle Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" x:Name="Corner" Grid.Column="1" Grid.Row="1"/>

<ScrollContentPresenter Margin="5,5,5,5" x:Name="PART_ScrollContentPresenter" Grid.Column="0" Grid.Row="0" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False"/>

<ScrollBar Cursor="Arrow" x:Name="PART_VerticalScrollBar" Style="{DynamicResource ScrollBarStyle}" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Grid.Column="1" Grid.Row="0" ViewportSize="{TemplateBinding ViewportHeight}" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Value="{Binding Path=VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" AutomationProperties.AutomationId="VerticalScrollBar"/>

<ScrollBar Cursor="Arrow" x:Name="PART_HorizontalScrollBar" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Grid.Column="0" Grid.Row="1" Orientation="Horizontal" ViewportSize="{TemplateBinding ViewportWidth}" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Value="{Binding Path=HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" AutomationProperties.AutomationId="HorizontalScrollBar"/>

</Grid>

</ControlTemplate>

After that with the style for the ScrollBar in which i have elimintaed thetop and bottom button in the scroolbar and left only the thumb scroll button:

<Style x:Key="ScrollBarStyle" TargetType="{x:Type ScrollBar}"><Setter Property="Background" Value="{StaticResource VerticalScrollBarBackground}"/>

<Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>

<Setter Property="Stylus.IsFlicksEnabled" Value="false"/>

<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>

<Setter Property="Width" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>

<Setter Property="MinWidth" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>

<Setter Property="Template">

<Setter.Value>

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

<Grid x:Name="Bg" SnapsToDevicePixels="true" Margin="3">

<Border Width="1" Background="#FFFFFF" HorizontalAlignment="Center"/>

<Track x:Name="PART_Track" IsEnabled="{TemplateBinding IsMouseOver}" IsDirectionReversed="true">

<Track.Thumb>

<Thumb Style="{StaticResource ScrollBarThumb}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="VerticalGripper"/>

</Track.Thumb>

<Track.IncreaseRepeatButton>

<RepeatButton Style="{StaticResource VerticalScrollBarPageButton}" Command="{x:Static ScrollBar.PageDownCommand}"/>

</Track.IncreaseRepeatButton>

<Track.DecreaseRepeatButton>

<RepeatButton Style="{StaticResource VerticalScrollBarPageButton}" Command="{x:Static ScrollBar.PageUpCommand}"/>

</Track.DecreaseRepeatButton>

</Track>

</Grid>

<ControlTemplate.Triggers>

<Trigger Property="IsEnabled" Value="false">

<Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

<Style.Triggers>

<Trigger Property="Orientation" Value="Horizontal">

<Setter Property="Width" Value="Auto"/>

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

<Setter Property="Height" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/>

<Setter Property="MinHeight" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/>

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

<Setter Property="Template">

<Setter.Value>

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

<Grid x:Name="Bg" SnapsToDevicePixels="true" Background="{TemplateBinding Background}">

<Grid.ColumnDefinitions>

<ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>

<ColumnDefinition Width="0.00001*"/>

<ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>

</Grid.ColumnDefinitions>

<RepeatButton Style="{StaticResource ScrollBarButton}" IsEnabled="{TemplateBinding IsMouseOver}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="LeftArrow" Command="{x:Static ScrollBar.LineLeftCommand}"/>

<Track x:Name="PART_Track" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Column="1">

<Track.DecreaseRepeatButton>

<RepeatButton Style="{StaticResource HorizontalScrollBarPageButton}" Command="{x:Static ScrollBar.PageLeftCommand}"/>

</Track.DecreaseRepeatButton>

<Track.IncreaseRepeatButton>

<RepeatButton Style="{StaticResource HorizontalScrollBarPageButton}" Command="{x:Static ScrollBar.PageRightCommand}"/>

</Track.IncreaseRepeatButton>

<Track.Thumb>

<Thumb Style="{StaticResource ScrollBarThumb}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="HorizontalGripper"/>

</Track.Thumb>

</Track>

<RepeatButton Style="{StaticResource ScrollBarButton}" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Column="2" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="RightArrow" Command="{x:Static ScrollBar.LineRightCommand}"/>

</Grid>

<ControlTemplate.Triggers>

<Trigger Property="IsEnabled" Value="false">

<Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Trigger>

</Style.Triggers>

</Style>And i have styled the thumb button which has a nice glow effect on mouseover:
<Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}"><Setter Property="OverridesDefaultStyle" Value="true"/>

<Setter Property="IsTabStop" Value="false"/>

<Setter Property="Width" Value="3"/>

<Setter Property="Template">

<Setter.Value>

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

<Border x:Name="Chrome" SnapsToDevicePixels="true" Background="#FFFFFFFF">

<Border.BitmapEffect>

<OuterGlowBitmapEffect GlowColor="#FFFFFFFF" GlowSize="4" Opacity="0.1"/>

</Border.BitmapEffect>

</Border>

<ControlTemplate.Triggers>

<Trigger Property="IsMouseOver" Value="True">

<Setter Property="BitmapEffect" TargetName="Chrome">

<Setter.Value>

<OuterGlowBitmapEffect GlowColor="#FFFFFFFF" GlowSize="4" Opacity="1"/>

</Setter.Value>

</Setter>

<Setter Property="Cursor" Value="Hand"/>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>
Here is the code for the ScrollBar