WPF ScrollBar styles WPF ScrollBar styles wpf wpf

WPF ScrollBar styles


Got it working with a little help from some research:

<Window.Resources>    <SolidColorBrush x:Key="StandardBorderBrush" Color="#888" />    <SolidColorBrush x:Key="StandardBackgroundBrush" Color="Black" />    <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="GlyphBrush" Color="#444" />    <SolidColorBrush x:Key="NormalBrush" Color="#888" />    <SolidColorBrush x:Key="NormalBorderBrush" Color="#888" />    <SolidColorBrush x:Key="HorizontalNormalBrush" Color="#FF686868" />    <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>    <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>    <Style x:Key="ScrollBarLineButton" TargetType="{x:Type RepeatButton}">        <Setter Property="Visibility" Value="Hidden"/>        <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="2" 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>    <Style x:Key="ScrollBarPageButton" TargetType="{x:Type RepeatButton}">        <Setter Property="Visibility" Value="Hidden"/>        <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 RepeatButton}">                    <Border Background="Black" />                </ControlTemplate>            </Setter.Value>        </Setter>    </Style>    <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="4" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0"  Width="8" Margin="8,0,-2,0"/>                </ControlTemplate>            </Setter.Value>        </Setter>    </Style>    <ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">        <Grid>            <Grid.RowDefinitions>                <RowDefinition MaxHeight="0"/>                <RowDefinition Height="0.00001*"/>                <RowDefinition MaxHeight="0"/>            </Grid.RowDefinitions>            <Border Grid.RowSpan="3" CornerRadius="2" Background="Transparent" />    <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>    <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 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 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></Window.Resources>


ok, there was some problems with Danny's code. When I tried to activate Horizontal scrollbar it was very small

<ScrollViewer Grid.Row="1" Style="{DynamicResource FavsScrollViewer}" FlowDirection="RightToLeft"                  ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Visible"                  Margin="6,0,0,0">        <TextBox x:Name="TextBox"                  HorizontalAlignment="Stretch"                 VerticalAlignment="Stretch"                  AcceptsReturn="True"                 FlowDirection="LeftToRight"/>    </ScrollViewer>

old scroll bar
so i found the solution. You have to create a new style like mine:

<Style x:Key="ScrollBarThumbHor" 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="1" Background="#c8c8c8" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0"  Height="8" Margin="0,0,-2,0"/>                </ControlTemplate>            </Setter.Value>        </Setter>    </Style>

And then change the thumb style in the horizontal scrollbar template

<ControlTemplate x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}">        <Grid>            <Grid.ColumnDefinitions>                <ColumnDefinition Width="12"/>                <ColumnDefinition Width="0.00001*"/>                <ColumnDefinition Width="30"/>            </Grid.ColumnDefinitions>            <Border Grid.ColumnSpan="3" CornerRadius="0" Background="#006464"/>            <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 ScrollBarThumbHor}" 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>

So now it looks nice
now scroll bar