Post
Ask Question

Rounded Scrollbar In ListView/ComboBox - WPF

Introduction

 
This article is for the design-related part. We can apply the style to the scrollbar in WPF and make it more attractive. Here, I am going to design the rounded scrollbar by applying the style. It can be used every control which has a scrollbar like ListView, DataGrid, ComboBox etc.
 
Step 1 - Create a new WPF Project
 
Rounded scrollbar in ListView ComboBox WPF
 
Rounded scrollbar in ListView ComboBox WPF
 
Step 2 - Add ListView in MainWindow
  1. <Window x:Class="WpfRoundedScrollbar.MainWindow"    
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    
  6.         xmlns:local="clr-namespace:WpfRoundedScrollbar"    
  7.         mc:Ignorable="d"    
  8.         Title="MainWindow" Height="450" Width="800">    
  9.     <Grid>    
  10.         <ListView x:Name="listRound" Margin="10"/>    
  11.     </Grid>    
  12. </Window>   
Rounded scrollbar in ListView ComboBox WPF
 
Step 3 - Edit Style of ListView.
 
Here, <ListView.Resources> Contain the styles of the internal controls. We have to apply the style to the ScrollBar. So, add TargetType="{x:Type ScrollBar}"
  1. <ListView x:Name="listRound" Margin="10">    
  2.             <ListView.Resources>    
  3.                 <Style TargetType="{x:Type ScrollBar}">    
  4.                     <Setter Property="Background" Value="#505050"/>    
  5.                     <Setter Property="BorderBrush" Value="#505050"/>    
  6.                     <Setter Property="Template">    
  7.                         <Setter.Value>    
  8.                             <ControlTemplate TargetType="{x:Type ScrollBar}">    
  9.                                 <Grid x:Name="Bg" SnapsToDevicePixels="true">    
  10.                                     <Grid.RowDefinitions>    
  11.                                         <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>    
  12.                                         <RowDefinition Height="0.00001*"/>    
  13.                                         <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>    
  14.                                     </Grid.RowDefinitions>    
  15.                                     <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Row="1" CornerRadius="10"/>    
  16.                                     <!--<RepeatButton x:Name="PART_LineUpButton" Command="{x:Static ScrollBar.LineUpCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Style="{StaticResource ScrollBarButton}" Margin="0,0,0,-20">    
  17.                                 <Path x:Name="ArrowTop" Data="M 0,4 C0,4 0,6 0,6 0,6 3.5,2.5 3.5,2.5 3.5,2.5 7,6 7,6 7,6 7,4 7,4 7,4 3.5,0.5 3.5,0.5 3.5,0.5 0,4 0,4 z" Fill="{StaticResource ScrollBar.Static.Glyph}" Margin="3,4,3,3" Stretch="Uniform"/>    
  18.                             </RepeatButton>-->    
  19.                                     <Track x:Name="PART_Track" IsDirectionReversed="true" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="1">    
  20.                                         <Track.DecreaseRepeatButton>    
  21.                                             <RepeatButton Command="{x:Static ScrollBar.PageUpCommand}" Style="{StaticResource RepeatButtonTransparent}" HorizontalAlignment="Left" Width="17"/>    
  22.                                         </Track.DecreaseRepeatButton>    
  23.                                         <Track.IncreaseRepeatButton>    
  24.                                             <RepeatButton Command="{x:Static ScrollBar.PageDownCommand}" Style="{StaticResource RepeatButtonTransparent}"/>    
  25.                                         </Track.IncreaseRepeatButton>    
  26.                                         <Track.Thumb>    
  27.                                             <Thumb Style="{StaticResource ScrollBarThumbVertical}" Margin="2"/>    
  28.                                         </Track.Thumb>    
  29.                                     </Track>    
  30.                                     <!--<RepeatButton x:Name="PART_LineDownButton" Command="{x:Static ScrollBar.LineDownCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="2" Style="{StaticResource ScrollBarButton}"  Margin="0,-20,0,0">    
  31.                                 <Path x:Name="ArrowBottom" Data="M 0,2.5 C0,2.5 0,0.5 0,0.5 0,0.5 3.5,4 3.5,4 3.5,4 7,0.5 7,0.5 7,0.5 7,2.5 7,2.5 7,2.5 3.5,6 3.5,6 3.5,6 0,2.5 0,2.5 z" Fill="{StaticResource ScrollBar.Static.Glyph}" Margin="3,4,3,3" Stretch="Uniform"/>    
  32.                             </RepeatButton>-->    
  33.                                 </Grid>    
  34.     
  35.                             </ControlTemplate>    
  36.                         </Setter.Value>    
  37.                     </Setter>    
  38.                 </Style>    
  39.             </ListView.Resources>    
  40.         </ListView>   
Step 4 - Also, create the style for the RepeatButton and Thumb of the ScrollBar.
 
For that we need to add the <Window.Resources> to add the multiple styles
  1. <Window.Resources>    
  2.         <Style x:Key="RepeatButtonTransparent" TargetType="{x:Type RepeatButton}">    
  3.             <Setter Property="OverridesDefaultStyle" Value="true"/>    
  4.             <Setter Property="Background" Value="#505050"/>    
  5.             <Setter Property="Focusable" Value="false"/>    
  6.             <Setter Property="IsTabStop" Value="false"/>    
  7.             <Setter Property="Template">    
  8.                 <Setter.Value>    
  9.                     <ControlTemplate TargetType="{x:Type RepeatButton}">    
  10.                         <Border Background="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}" CornerRadius="10"/>    
  11.                     </ControlTemplate>    
  12.                 </Setter.Value>    
  13.             </Setter>    
  14.         </Style>    
  15.     
  16.         <Style x:Key="ScrollBarThumbVertical" TargetType="{x:Type Thumb}">    
  17.             <Setter Property="OverridesDefaultStyle" Value="true"/>    
  18.             <!--<Setter Property="Margin" Value="3"/>-->    
  19.     
  20.             <Setter Property="IsTabStop" Value="false"/>    
  21.             <Setter Property="Template">    
  22.                 <Setter.Value>    
  23.                     <ControlTemplate TargetType="{x:Type Thumb}">    
  24.                         <Border x:Name="rectangle" Background="Black" Height="{TemplateBinding Height}" SnapsToDevicePixels="True" Width="{TemplateBinding Width}" CornerRadius="8"/>    
  25.                         <ControlTemplate.Triggers>    
  26.                             <Trigger Property="IsMouseOver" Value="true">    
  27.                                 <Setter Property="Background" TargetName="rectangle" Value="Black"/>    
  28.                             </Trigger>    
  29.                             <Trigger Property="IsDragging" Value="true">    
  30.                                 <Setter Property="Background" TargetName="rectangle" Value="Black"/>    
  31.                             </Trigger>    
  32.                         </ControlTemplate.Triggers>    
  33.                     </ControlTemplate>    
  34.                 </Setter.Value>    
  35.             </Setter>    
  36.         </Style>    
  37.     </Window.Resources>  
Step 5 - Add the items in ListView
 
Now, we are adding the States of India as Items in ListView via backend code.
  1. public MainWindow()    
  2.         {    
  3.             InitializeComponent();    
  4.             listRound.Items.Add("Andhra Pradesh");    
  5.             listRound.Items.Add("Arunachal Pradesh");    
  6.             listRound.Items.Add("Assam");    
  7.             listRound.Items.Add("Bihar");    
  8.             listRound.Items.Add("Chhattisgarh");    
  9.             listRound.Items.Add("Goa");    
  10.             listRound.Items.Add("Gujarat");    
  11.             listRound.Items.Add("Haryana");    
  12.             listRound.Items.Add("Himachal Pradesh");    
  13.             listRound.Items.Add("Jharkhand");    
  14.             listRound.Items.Add("Karnataka");    
  15.             listRound.Items.Add("Kerala");    
  16.             listRound.Items.Add("Madhya Pradesh");    
  17.             listRound.Items.Add("Maharashtra");    
  18.             listRound.Items.Add("Manipur");    
  19.             listRound.Items.Add("Meghalaya");    
  20.             listRound.Items.Add("Mizoram");    
  21.             listRound.Items.Add("Nagaland");    
  22.             listRound.Items.Add("Odisha");    
  23.             listRound.Items.Add("Punjab");    
  24.             listRound.Items.Add("Rajasthan");    
  25.             listRound.Items.Add("Sikkim");    
  26.             listRound.Items.Add("Tamil Nadu");    
  27.             listRound.Items.Add("Telangana");    
  28.             listRound.Items.Add("Tripura");    
  29.             listRound.Items.Add("Uttar Pradesh");    
  30.             listRound.Items.Add("Uttarakhand");    
  31.             listRound.Items.Add("West Bengal");    
  32.         }   
Step 6 - Run the Project and See the Output
 
Here, you can see the rounded ScrollBar in ListView as below
 
Rounded scrollbar in ListView ComboBox WPF
 
You can change the colour according to your project theme by using,
  1. <Window.Resources>    
  2.         <Style x:Key="RepeatButtonTransparent" TargetType="{x:Type RepeatButton}">    
  3.             <Setter Property="OverridesDefaultStyle" Value="true"/>    
  4.             <Setter Property="Background" Value="LightGray"/>    
  5.             <Setter Property="Focusable" Value="false"/>    
  6.             <Setter Property="IsTabStop" Value="false"/>    
  7.             <Setter Property="Template">    
  8.                 <Setter.Value>    
  9.                     <ControlTemplate TargetType="{x:Type RepeatButton}">    
  10.                         <Border Background="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}" CornerRadius="10"/>    
  11.                     </ControlTemplate>    
  12.                 </Setter.Value>    
  13.             </Setter>    
  14.         </Style>    
  15.     
  16.         <Style x:Key="ScrollBarThumbVertical" TargetType="{x:Type Thumb}">    
  17.             <Setter Property="OverridesDefaultStyle" Value="true"/>    
  18.             <!--<Setter Property="Margin" Value="3"/>-->    
  19.     
  20.             <Setter Property="IsTabStop" Value="false"/>    
  21.             <Setter Property="Template">    
  22.                 <Setter.Value>    
  23.                     <ControlTemplate TargetType="{x:Type Thumb}">    
  24.                         <Border x:Name="rectangle" Background="Gray" Height="{TemplateBinding Height}" SnapsToDevicePixels="True" Width="{TemplateBinding Width}" CornerRadius="8"/>    
  25.                         <ControlTemplate.Triggers>    
  26.                             <Trigger Property="IsMouseOver" Value="true">    
  27.                                 <Setter Property="Background" TargetName="rectangle" Value="Gray"/>    
  28.                             </Trigger>    
  29.                             <Trigger Property="IsDragging" Value="true">    
  30.                                 <Setter Property="Background" TargetName="rectangle" Value="Gray"/>    
  31.                             </Trigger>    
  32.                         </ControlTemplate.Triggers>    
  33.                     </ControlTemplate>    
  34.                 </Setter.Value>    
  35.             </Setter>    
  36.         </Style>    
  37.     </Window.Resources>    
Rounded scrollbar in ListView ComboBox WPF
 
You can apply the same in ComboBox,
  1. <ComboBox>    
  2.             <ComboBox.Resources>    
  3.                 <Style TargetType="{x:Type ScrollBar}">    
  4.                     <Setter Property="Background" Value="LightGray"/>    
  5.                     <Setter Property="BorderBrush" Value="LightGray"/>    
  6.                     <Setter Property="Template">    
  7.                         <Setter.Value>    
  8.                             <ControlTemplate TargetType="{x:Type ScrollBar}">    
  9.                                 <Grid x:Name="Bg" SnapsToDevicePixels="true">    
  10.                                     <Grid.RowDefinitions>    
  11.                                         <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>    
  12.                                         <RowDefinition Height="0.00001*"/>    
  13.                                         <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>    
  14.                                     </Grid.RowDefinitions>    
  15.                                     <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Row="1" CornerRadius="10"/>    
  16.                                     <Track x:Name="PART_Track" IsDirectionReversed="true" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="1">    
  17.                                         <Track.DecreaseRepeatButton>    
  18.                                             <RepeatButton Command="{x:Static ScrollBar.PageUpCommand}" Style="{StaticResource RepeatButtonTransparent}" HorizontalAlignment="Left" Width="17"/>    
  19.                                         </Track.DecreaseRepeatButton>    
  20.                                         <Track.IncreaseRepeatButton>    
  21.                                             <RepeatButton Command="{x:Static ScrollBar.PageDownCommand}" Style="{StaticResource RepeatButtonTransparent}"/>    
  22.                                         </Track.IncreaseRepeatButton>    
  23.                                         <Track.Thumb>    
  24.                                             <Thumb Style="{StaticResource ScrollBarThumbVertical}" Margin="3"/>    
  25.                                         </Track.Thumb>    
  26.                                     </Track>    
  27.                                 </Grid>    
  28.     
  29.                             </ControlTemplate>    
  30.                         </Setter.Value>    
  31.                     </Setter>    
  32.                 </Style>    
  33.             </ComboBox.Resources>    
  34.         </ComboBox>  
Rounded scrollbar in ListView ComboBox WPF


Similar Articles