WPF Thin Scrollbars

Everyone has a mouse wheel these days, if not a trackpad scroller or a touch screen with tracking. The point is, scrollbars are more of a nuisance for most of the users, except for those dinosaurs still living on a PS/2 mouse.

 

Here’s the code for iPhone style slim scrollbars on your WPF app.

 

This is based on the code provided on the link below, which still uses normal width and height. I made a few tweaks to the code provided for the desired “thinning” effect.

 

Credits:

Sacha Barber on the Code Project.

 

http://www.codeproject.com/Articles/37366/Styling-A-ScrollViewer-Scrollbar-In-WPF

 

   <Application.Resources>
        <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="#888" />
        <SolidColorBrush x:Key="NormalBorderBrush" Color="#888" />
        <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="2"          Background="{StaticResource NormalBrush}"          BorderBrush="{StaticResource NormalBorderBrush}"          BorderThickness="0.25">
                            <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="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="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0.25" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <ControlTemplate x:Key="VerticalScrollBar"
            TargetType="{x:Type ScrollBar}" >
            <Grid  Width="6">
                <Grid.RowDefinitions>
                    <RowDefinition MaxHeight="18"/>
                    <RowDefinition Height="0.00001*"/>
                    <RowDefinition MaxHeight="18"/>
                </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 2 L 4 2 L 2 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 2 2 L 4 0 Z"/>
            </Grid>
        </ControlTemplate>
        <!-- HorizontalScrollBar Template using the previously created Templates -->
        <ControlTemplate x:Key="HorizontalScrollBar"
            TargetType="{x:Type ScrollBar}">
            <Grid >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition MaxWidth="9"/>
                    <ColumnDefinition Width="0.00001*"/>
                    <ColumnDefinition MaxWidth="9"/>
                </Grid.ColumnDefinitions>
                <Border
      Grid.ColumnSpan="3"
      CornerRadius="2"
      Background="#F0F0F0" />
                <RepeatButton
      Grid.Column="0"
      Style="{StaticResource ScrollBarLineButton}"
      Width="9"
      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="9"
      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="6"/>
                    <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" Width="6"
            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>

    </Application.Resources>
Advertisements

About vijayvepa

I'm a software consultant for Software Specialists Inc. currently working at Philips Respironics, Pittsburgh

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: