Scroll Bar Design in WPF

<SolidColorBrush x:Key="StandardBorderBrush" Color="#888" />

            <SolidColorBrush x:Key="StandardBackgroundBrush" Color="#FFF" />

            <SolidColorBrush x:Key="HoverBorderBrush" Color="#DDD" />

            <SolidColorBrush x:Key="SelectedBackgroundBrush" Color="Gray" />

            <SolidColorBrush x:Key="SelectedForegroundBrush" Color="White" />

            <SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />

            <SolidColorBrush x:Key="NormalBrush" Color="White" />

            <SolidColorBrush x:Key="NormalBorderBrush" Color="#071c2c" />

            <SolidColorBrush x:Key="HorizontalNormalBrush" Color="#888" />

            <SolidColorBrush x:Key="HorizontalNormalBorderBrush" Color="#888" />

            <LinearGradientBrush x:Key="ListBoxBackgroundBrush"

            StartPoint="0,0" EndPoint="1,0.001">

                <GradientBrush.GradientStops>

                    <GradientStopCollection>

                        <GradientStop Color="White" Offset="0.0" />

                        <GradientStop Color="White" Offset="0.6" />

                        <GradientStop Color="#DDDDDD" Offset="1.2"/>

                    </GradientStopCollection>

                </GradientBrush.GradientStops>

            </LinearGradientBrush>

            <LinearGradientBrush x:Key="StandardBrush"

            StartPoint="0,0" EndPoint="0,1">

                <GradientBrush.GradientStops>

                    <GradientStopCollection>

                        <GradientStop Color="#FFF" Offset="0.0"/>

                        <GradientStop Color="#CCC" Offset="1.0"/>

                    </GradientStopCollection>

                </GradientBrush.GradientStops>

            </LinearGradientBrush>

            <SolidColorBrush x:Key="GlyphBrush" Color="#444" />

            <LinearGradientBrush x:Key="PressedBrush"

            StartPoint="0,0" EndPoint="0,1">

                <GradientBrush.GradientStops>

                    <GradientStopCollection>

                        <GradientStop Color="#BBB" Offset="0.0"/>

                        <GradientStop Color="#EEE" Offset="0.1"/>

                        <GradientStop Color="#EEE" Offset="0.9"/>

                        <GradientStop Color="#FFF" Offset="1.0"/>

                    </GradientStopCollection>

                </GradientBrush.GradientStops>

            </LinearGradientBrush>

            <!-- SrollViewer ScrollBar Repeat Buttons (at each end) -->

            <Style x:Key="ScrollBarLineButton" TargetType="{x:Type RepeatButton}">

                <Setter Property="SnapsToDevicePixels" Value="True"/>

                <Setter Property="OverridesDefaultStyle" Value="true"/>

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

                <Setter Property="Template">

                    <Setter.Value>

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

                            <Border

          Name="Border"

          Margin="1"

          CornerRadius="1"

          Background="{StaticResource NormalBrush}"

          BorderBrush="{StaticResource NormalBorderBrush}"

          BorderThickness="1">

                                <Path

            HorizontalAlignment="Center"

            VerticalAlignment="Center"

            Fill="{StaticResource GlyphBrush}"

            Data="{Binding Path=Content,

                RelativeSource={RelativeSource TemplatedParent}}" />

                            </Border>

                            <ControlTemplate.Triggers>

                                <Trigger Property="IsPressed" Value="true">

                                    <Setter TargetName="Border" Property="Background"

                                Value="{StaticResource PressedBrush}" />

                                </Trigger>

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

                                    <Setter Property="Foreground"

                                Value="{StaticResource DisabledForegroundBrush}"/>

                                </Trigger>

                            </ControlTemplate.Triggers>

                        </ControlTemplate>

                    </Setter.Value>

                </Setter>

            </Style>

            <!-- SrollViewer ScrollBar Repeat Buttons (The part in the middle,

             not the thumb the long area between the buttons ) -->

            <Style x:Key="ScrollBarPageButton" TargetType="{x:Type RepeatButton}">

                <Setter Property="SnapsToDevicePixels" Value="True"/>

                <Setter Property="Background" Value="White"/>

                <Setter Property="OverridesDefaultStyle" Value="true"/>

                <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>

            <!-- ScrollViewer ScrollBar Thumb, that part that can be dragged

            up/down or left/right Buttons -->

            <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">

                <Setter Property="SnapsToDevicePixels" Value="True"/>

                <Setter Property="OverridesDefaultStyle" Value="true"/>

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

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

                <Setter Property="Template">

                    <Setter.Value>

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

                            <Border

          CornerRadius="2"

          Background="#071c2c"

          BorderBrush="{TemplateBinding BorderBrush}"

          BorderThickness="1" />

                        </ControlTemplate>

                    </Setter.Value>

                </Setter>

            </Style>

            <ControlTemplate x:Key="VerticalScrollBar"

            TargetType="{x:Type ScrollBar}">

                <Grid >

                    <Grid.RowDefinitions>

                        <RowDefinition MaxHeight="18"/>

                        <RowDefinition Height="0.00001*"/>

                        <RowDefinition MaxHeight="18"/>

                    </Grid.RowDefinitions>

                    <Border

      Grid.RowSpan="3"

      CornerRadius="1"

      Background="#F0F0F0" />

                    <RepeatButton

      Grid.Row="0"

      Style="{StaticResource ScrollBarLineButton}"

      Height="18"

      Command="ScrollBar.LineUpCommand"

      Content="M 0 4 L 8 4 L 4 0 Z" />

                    <Track

      Name="PART_Track"

      Grid.Row="1"

      IsDirectionReversed="true">

                        <Track.DecreaseRepeatButton>

                            <RepeatButton

          Style="{StaticResource ScrollBarPageButton}"

          Command="ScrollBar.PageUpCommand" />

                        </Track.DecreaseRepeatButton>

                        <Track.Thumb>

                            <Thumb

          Style="{StaticResource ScrollBarThumb}"

          Margin="1,0,1,0"

          Background="{StaticResource HorizontalNormalBrush}"

          BorderBrush="{StaticResource HorizontalNormalBorderBrush}" />

                        </Track.Thumb>

                        <Track.IncreaseRepeatButton>

                            <RepeatButton

          Style="{StaticResource ScrollBarPageButton}"

          Command="ScrollBar.PageDownCommand" />

                        </Track.IncreaseRepeatButton>

                    </Track>

                    <RepeatButton

      Grid.Row="3"

      Style="{StaticResource ScrollBarLineButton}"

      Height="18"

      Command="ScrollBar.LineDownCommand"

      Content="M 0 0 L 4 4 L 8 0 Z"/>

                </Grid>

            </ControlTemplate>

            <!-- HorizontalScrollBar Template using the previously created Templates -->

            <ControlTemplate x:Key="HorizontalScrollBar"

            TargetType="{x:Type ScrollBar}">

                <Grid >

                    <Grid.ColumnDefinitions>

                        <ColumnDefinition MaxWidth="18"/>

                        <ColumnDefinition Width="0.00001*"/>

                        <ColumnDefinition MaxWidth="18"/>

                    </Grid.ColumnDefinitions>

                    <Border

      Grid.ColumnSpan="3"

      CornerRadius="2"

      Background="#F0F0F0" />

                    <RepeatButton

      Grid.Column="0"

      Style="{StaticResource ScrollBarLineButton}"

      Width="18"

      Command="ScrollBar.LineLeftCommand"

      Content="M 4 0 L 4 8 L 0 4 Z" />

                    <Track

      Name="PART_Track"

      Grid.Column="1"

      IsDirectionReversed="False">

                        <Track.DecreaseRepeatButton>

                            <RepeatButton

          Style="{StaticResource ScrollBarPageButton}"

          Command="ScrollBar.PageLeftCommand" />

                        </Track.DecreaseRepeatButton>

                        <Track.Thumb>

                            <Thumb

          Style="{StaticResource ScrollBarThumb}"

          Margin="0,1,0,1"

          Background="{StaticResource NormalBrush}"

          BorderBrush="{StaticResource NormalBorderBrush}" />

                        </Track.Thumb>

                        <Track.IncreaseRepeatButton>

                            <RepeatButton

          Style="{StaticResource ScrollBarPageButton}"

          Command="ScrollBar.PageRightCommand" />

                        </Track.IncreaseRepeatButton>

                    </Track>

                    <RepeatButton

      Grid.Column="3"

      Style="{StaticResource ScrollBarLineButton}"

      Width="18"

      Command="ScrollBar.LineRightCommand"

      Content="M 0 0 L 4 4 L 0 8 Z"/>

                </Grid>

            </ControlTemplate>

            <!-- Style for overall  ScrollBar -->

            <Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">

                <Setter Property="SnapsToDevicePixels" Value="True"/>

                <Setter Property="OverridesDefaultStyle" Value="true"/>

                <Style.Triggers>

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

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

                        <Setter Property="Height" Value="18" />

                        <Setter Property="Template"

                        Value="{StaticResource HorizontalScrollBar}" />

                    </Trigger>

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

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

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

                        <Setter Property="Template"

                        Value="{StaticResource VerticalScrollBar}" />

                    </Trigger>

                </Style.Triggers>

            </Style>

            <!-- Style for overall  ScrollViewer -->

            <Style x:Key="FavsScrollViewer" TargetType="{x:Type ScrollViewer}">

                <Setter Property="OverridesDefaultStyle" Value="True"/>

                <Setter Property="Template">

                    <Setter.Value>

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

                            <Grid>

                                <Grid.ColumnDefinitions>

                                    <ColumnDefinition Width="Auto"/>

                                    <ColumnDefinition/>

                                </Grid.ColumnDefinitions>

                                <Grid.RowDefinitions>

                                    <RowDefinition/>

                                    <RowDefinition Height="Auto"/>

                                </Grid.RowDefinitions>

                                <ScrollContentPresenter Grid.Column="1"/>

                                <ScrollBar Name="PART_VerticalScrollBar"

            Value="{TemplateBinding VerticalOffset}"

            Maximum="{TemplateBinding ScrollableHeight}"

            ViewportSize="{TemplateBinding ViewportHeight}"

            Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>

                                <ScrollBar Name="PART_HorizontalScrollBar"

            Orientation="Horizontal"

            Grid.Row="1"

            Grid.Column="1"

            Value="{TemplateBinding HorizontalOffset}"

            Maximum="{TemplateBinding ScrollableWidth}"

            ViewportSize="{TemplateBinding ViewportWidth}"

            Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>

                            </Grid>

                        </ControlTemplate>

                    </Setter.Value>

                </Setter>

            </Style>

            <Style x:Key="DataGrid_Centering"

        TargetType="{x:Type DataGridCell}">

                <Setter Property="Template">

                    <Setter.Value>

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

                            <Grid Background="{TemplateBinding Background}">

                                <ContentPresenter VerticalAlignment="Center" />

                                <ContentPresenter HorizontalAlignment="Center" />

                            </Grid>

                        </ControlTemplate>

                    </Setter.Value>

                </Setter>

                <Setter Property="Height" Value="30"></Setter>

            </Style>