├── Images
    └── Custom Scrollbar Image.jpg
├── LICENSE
├── README.md
├── Source
    ├── App.xaml
    ├── App.xaml.cs
    ├── MainWindow.xaml
    ├── MainWindow.xaml.cs
    └── Styles.xaml
├── WPF Custom Scrollbar - Preview.png
└── WPF Custom Scrollbar.rar


/Images/Custom Scrollbar Image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF-Custom-Scrollbar/195dba07871ee9e244d93de923cd88783dd5cd7a/Images/Custom Scrollbar Image.jpg


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Arun Mutharasu
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # WPF - Custom Scroll Bar / Scroll Viewer 
 2 | 
 3 | 
 4 | How to design a Custom Scrollbar in WPF - https://youtu.be/3GDVWNfdo5A 
 5 | 
 6 | ![Scroll Thumbnail](https://user-images.githubusercontent.com/55704859/179337269-c9a16e21-f037-4416-afbc-e4edaef36430.jpg)
 7 | 
 8 | Icon Credits : https://icons8.com/icons
 9 | 
10 | <b>GitHub Account</b> : https://github.com/CSharpDesignPro
11 | 
12 | 


--------------------------------------------------------------------------------
/Source/App.xaml:
--------------------------------------------------------------------------------
 1 | <Application x:Class="Custom_Scrollbar.App"
 2 |              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3 |              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4 |              xmlns:local="clr-namespace:Custom_Scrollbar"
 5 |              StartupUri="MainWindow.xaml">
 6 |     <Application.Resources>
 7 | 
 8 |         <ResourceDictionary>
 9 |             <ResourceDictionary.MergedDictionaries>
10 |                 <ResourceDictionary Source="Styles.xaml"/>
11 |             </ResourceDictionary.MergedDictionaries>
12 |         </ResourceDictionary>
13 |         
14 |     </Application.Resources>
15 | </Application>
16 | 


--------------------------------------------------------------------------------
/Source/App.xaml.cs:
--------------------------------------------------------------------------------
 1 | using System;
 2 | using System.Collections.Generic;
 3 | using System.Configuration;
 4 | using System.Data;
 5 | using System.Linq;
 6 | using System.Threading.Tasks;
 7 | using System.Windows;
 8 | 
 9 | namespace Custom_Scrollbar
10 | {
11 |     /// <summary>
12 |     /// Interaction logic for App.xaml
13 |     /// </summary>
14 |     public partial class App : Application
15 |     {
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------
/Source/MainWindow.xaml:
--------------------------------------------------------------------------------
  1 | 
  2 |     <!--<Summary> ///
  3 |     /// Author : R. Arun Mutharasu ///
  4 |     /// Created : 12-02-2020
  5 |     /// YouTube Channel : C# Design Pro ///
  6 |     /// </Summary>-->    
  7 |     
  8 |     <Window x:Class="Custom_Scrollbar.MainWindow"
  9 |         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 10 |         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 11 |         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 12 |         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 13 |         xmlns:local="clr-namespace:Custom_Scrollbar"
 14 |         mc:Ignorable="d"
 15 |         Title="MainWindow" 
 16 |         Height="690" 
 17 |         Width="880"
 18 |         WindowStyle="None"
 19 |         ResizeMode="NoResize"
 20 |         Topmost="True"
 21 |         WindowStartupLocation="CenterScreen"
 22 |         Background="Transparent"
 23 |         AllowsTransparency="True">
 24 | 
 25 |     <Window.Resources>
 26 |         
 27 |         <!--// Add the Value Converter resource //-->
 28 | 
 29 |         <local:ScrollLimitConverter x:Key="scrollLimitConverter"></local:ScrollLimitConverter>
 30 |         
 31 |         <!--// Default background images for Up & Down Arrow Buttons of the scrollbar //-->
 32 | 
 33 |         <ImageBrush x:Key="UpArrow_Default" 
 34 |                     ImageSource="Assets/Up_Arrow_Default.png"/>
 35 | 
 36 |         <ImageBrush x:Key="DownArrow_Default"
 37 |                     ImageSource="Assets/Down_Arrow_Default.png"/>
 38 | 
 39 |         <!--// Style the scrollbar //-->
 40 | 
 41 |         <Style TargetType="ScrollBar">
 42 | 
 43 |             <Setter Property="SnapsToDevicePixels"
 44 |                     Value="True"/>
 45 |             <Setter Property="OverridesDefaultStyle"
 46 |                     Value="True"/>
 47 |             
 48 |             <!--// Style Trigger //-->
 49 | 
 50 |             <Style.Triggers>
 51 | 
 52 |                 <Trigger Property="Orientation"
 53 |                          Value="Vertical">
 54 | 
 55 |                     <Setter Property="Width"
 56 |                             Value="80"/>
 57 |                     <Setter Property="Height"
 58 |                             Value="490"/>
 59 |                     <Setter Property="Margin"
 60 |                             Value="20"/>
 61 |                     
 62 |                     <!--// Create a style template for the scrollbar //-->
 63 | 
 64 |                     <Setter Property="Template"
 65 |                             Value="{DynamicResource VerticalScrollBar}"/>
 66 | 
 67 |                 </Trigger>
 68 |                 
 69 |             </Style.Triggers>
 70 | 
 71 |         </Style>
 72 |         
 73 |         <!--// Template for the Scrollbar //-->
 74 | 
 75 |         <ControlTemplate x:Key="VerticalScrollBar"
 76 |                          TargetType="{x:Type ScrollBar}">
 77 | 
 78 |             <Grid>
 79 | 
 80 |                 <Grid.RowDefinitions>
 81 |                     <RowDefinition Height="80"/>
 82 |                     <RowDefinition Height="*"/>
 83 |                     <RowDefinition Height="80"/>
 84 |                 </Grid.RowDefinitions>
 85 |                 
 86 |                 <!--// Border with a background //-->
 87 | 
 88 |                 <Border
 89 |                     Grid.Row="1"
 90 |                     CornerRadius="20"
 91 |                     Margin="10"
 92 |                     Background="#E6C36A">                    
 93 |                 </Border>
 94 |                 
 95 |                 <!--// Repeat Button - Up Arrow Button //-->
 96 | 
 97 |                 <RepeatButton
 98 |                     x:Name="rb_Up"
 99 |                     Focusable="False"
100 |                     Height="80"
101 |                     Command="ScrollBar.LineUpCommand"
102 |                     Background="{StaticResource UpArrow_Default}"
103 |                     Style="{StaticResource ScrollBar_UpArrow}">                    
104 |                 </RepeatButton>
105 |                 
106 |                 <!--// Repeat Button - Down Arrow Button //-->
107 | 
108 |                 <RepeatButton
109 |                     x:Name="rb_Down"
110 |                     Grid.Row="2"
111 |                     Focusable="False"
112 |                     Height="80"
113 |                     Command="ScrollBar.LineDownCommand"
114 |                     Background="{StaticResource DownArrow_Default}"
115 |                     Style="{StaticResource ScrollBar_DownArrow}">
116 |                 </RepeatButton>
117 |                 
118 |                 <!--// Track - Container for the element that indicates 
119 |                            the position of the scrollbar //-->
120 | 
121 |                 <Track
122 |                     Name="PART_Track"
123 |                     Grid.Row="1"
124 |                     IsDirectionReversed="True">
125 | 
126 |                     <Track.DecreaseRepeatButton>
127 |                         <RepeatButton
128 |                             Margin="3,2,3,2"
129 |                             Command="ScrollBar.PageUpCommand"          
130 |                             Style="{StaticResource ScrollBar_Track}"/>
131 |                         
132 |                     </Track.DecreaseRepeatButton>
133 |                     
134 |                     <!--// Thumb - Control that can be dragged by the user //-->
135 | 
136 |                     <Track.Thumb>
137 | 
138 |                         <Thumb
139 |                             
140 |                             Style="{StaticResource ScrollBar_Thumb}">
141 |                             
142 |                         </Thumb>
143 |                         
144 |                     </Track.Thumb>
145 | 
146 |                     <Track.IncreaseRepeatButton>
147 |                         <RepeatButton
148 |                             Margin="3,2,3,2"
149 |                             Command="ScrollBar.PageDownCommand"
150 |                             Style="{StaticResource ScrollBar_Track}"/>                       
151 |                         
152 |                     </Track.IncreaseRepeatButton>
153 |                     
154 |                 </Track>
155 |                 
156 |             </Grid>
157 |             
158 |             <!--// Bind the Value Converter //-->
159 | 
160 |             <ControlTemplate.Triggers>
161 |                 <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ScrollViewer}, Path=VerticalOffset}" Value="0">
162 |                     <Setter TargetName="rb_Up" Property="IsEnabled" Value="False"/>
163 |                 </DataTrigger>
164 |                 <DataTrigger Value="True">
165 |                     <DataTrigger.Binding>
166 |                         <MultiBinding Converter="{StaticResource scrollLimitConverter}">
167 |                             <Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=ScrollViewer}" Path="VerticalOffset"/>
168 |                             <Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=ScrollViewer}" Path="ScrollableHeight"/>
169 |                         </MultiBinding>
170 |                     </DataTrigger.Binding>
171 |                     <Setter TargetName="rb_Down" Property="IsEnabled" Value="False"/>
172 |                 </DataTrigger>
173 |             </ControlTemplate.Triggers>
174 |             
175 |             
176 |         </ControlTemplate>
177 |         
178 |         
179 |     </Window.Resources>
180 |     
181 |     
182 |     <Grid>
183 |        
184 |         <!--// Create sections for header, body & footer //-->
185 | 
186 |         <Grid.RowDefinitions>
187 |             <RowDefinition Height="80"/>
188 |             <RowDefinition Height="*"/>
189 |             <RowDefinition Height="80"/>
190 |         </Grid.RowDefinitions>
191 |         
192 |         <!--// Header //-->
193 | 
194 |         <Grid
195 |             Grid.Row="0"
196 |             Background="Goldenrod">
197 |             
198 |             <!--// Add window title & a close button //-->
199 | 
200 |             <Grid>
201 | 
202 |                 <Grid.ColumnDefinitions>
203 |                     <ColumnDefinition Width="50"/>
204 |                     <ColumnDefinition Width="*"/>
205 |                     <ColumnDefinition Width="80"/>
206 |                 </Grid.ColumnDefinitions>
207 |                 
208 |                 <!--// Header Title //-->
209 | 
210 |                 <Grid Grid.Column="1">
211 |                     <Grid.Background>
212 |                         <ImageBrush ImageSource="Assets/Header_Title.png" 
213 |                                     Stretch="None"/>
214 |                     </Grid.Background>
215 |                 </Grid>
216 |                 
217 |                 <!--// Close Button //-->
218 | 
219 |                 <Grid Grid.Column="2">
220 | 
221 |                     <Button x:Name="Close_Btn"
222 |                             Grid.Column="2"
223 |                             Height="80"
224 |                             Width="80"
225 |                             Style="{DynamicResource close_btn}" Click="Close_Btn_Click">
226 | 
227 |                         <Button.Background>
228 |                             <ImageBrush ImageSource="Assets/Close_Icon_Default.png"
229 |                                         Stretch="None"/>
230 |                         </Button.Background>                        
231 |                     </Button>
232 |                     
233 |                 </Grid>
234 |                 
235 |             </Grid>
236 |             
237 |         </Grid>
238 |         
239 |         <!--// Body //-->
240 | 
241 |         <Grid
242 |             Grid.Row="1"
243 |             Background="PaleGoldenrod">
244 |         </Grid>
245 |         
246 |         <!--// Footer //-->
247 | 
248 |         <Grid
249 |             Grid.Row="2"
250 |             Background="Goldenrod">
251 |         </Grid>
252 |         
253 |         <!--// Add a ScrollViewer //-->
254 | 
255 |         <ScrollViewer Grid.Row="1">
256 |             
257 |             <!--// Create a grid for the scroll images //-->
258 | 
259 |             <Grid>
260 | 
261 |                 <Grid.ColumnDefinitions>
262 |                     <ColumnDefinition Width="15"/>
263 |                     <ColumnDefinition Width="250"/>
264 |                     <ColumnDefinition Width="250"/>
265 |                     <ColumnDefinition Width="250"/>
266 |                     <ColumnDefinition Width="250"/>
267 |                 </Grid.ColumnDefinitions>
268 | 
269 |                 <Grid.RowDefinitions>
270 |                     <RowDefinition Height="15"/>
271 |                     <RowDefinition Height="250"/>
272 |                     <RowDefinition Height="250"/>
273 |                     <RowDefinition Height="250"/>
274 |                     <RowDefinition Height="250"/>
275 |                     <RowDefinition Height="250"/>
276 |                     <RowDefinition Height="250"/>
277 |                 </Grid.RowDefinitions>
278 |                 
279 |                 <!--// Add a list of images to the ScrollViewer //-->
280 | 
281 |                 <Grid Grid.Row="1" Grid.Column="1" Margin="10">
282 |                     <Grid.Background>
283 |                         <ImageBrush ImageSource="Assets/Img1.png" Stretch="Fill"/>
284 |                     </Grid.Background>                    
285 |                 </Grid>
286 | 
287 |                 <Grid Grid.Row="1" Grid.Column="2" Margin="10">
288 |                     <Grid.Background>
289 |                         <ImageBrush ImageSource="Assets/Img2.png" Stretch="Fill"/>
290 |                     </Grid.Background>
291 |                 </Grid>
292 | 
293 |                 <Grid Grid.Row="1" Grid.Column="3" Margin="10">
294 |                     <Grid.Background>
295 |                         <ImageBrush ImageSource="Assets/Img3.png" Stretch="Fill"/>
296 |                     </Grid.Background>
297 |                 </Grid>
298 | 
299 |                 <Grid Grid.Row="2" Grid.Column="1" Margin="10">
300 |                     <Grid.Background>
301 |                         <ImageBrush ImageSource="Assets/Img4.png" Stretch="Fill"/>
302 |                     </Grid.Background>
303 |                 </Grid>
304 | 
305 |                 <Grid Grid.Row="2" Grid.Column="2" Margin="10">
306 |                     <Grid.Background>
307 |                         <ImageBrush ImageSource="Assets/Img5.png" Stretch="Fill"/>
308 |                     </Grid.Background>
309 |                 </Grid>
310 | 
311 |                 <Grid Grid.Row="2" Grid.Column="3" Margin="10">
312 |                     <Grid.Background>
313 |                         <ImageBrush ImageSource="Assets/Img6.png" Stretch="Fill"/>
314 |                     </Grid.Background>
315 |                 </Grid>
316 | 
317 |                 <Grid Grid.Row="3" Grid.Column="1" Margin="10">
318 |                     <Grid.Background>
319 |                         <ImageBrush ImageSource="Assets/Img7.png" Stretch="Fill"/>
320 |                     </Grid.Background>
321 |                 </Grid>
322 | 
323 |                 <Grid Grid.Row="3" Grid.Column="2" Margin="10">
324 |                     <Grid.Background>
325 |                         <ImageBrush ImageSource="Assets/Img8.png" Stretch="Fill"/>
326 |                     </Grid.Background>
327 |                 </Grid>
328 | 
329 |                 <Grid Grid.Row="3" Grid.Column="3" Margin="10">
330 |                     <Grid.Background>
331 |                         <ImageBrush ImageSource="Assets/Img9.png" Stretch="Fill"/>
332 |                     </Grid.Background>
333 |                 </Grid>
334 | 
335 |                 <Grid Grid.Row="4" Grid.Column="1" Margin="10">
336 |                     <Grid.Background>
337 |                         <ImageBrush ImageSource="Assets/Img10.png" Stretch="Fill"/>
338 |                     </Grid.Background>
339 |                 </Grid>
340 | 
341 |                 <Grid Grid.Row="4" Grid.Column="2" Margin="10">
342 |                     <Grid.Background>
343 |                         <ImageBrush ImageSource="Assets/Img11.png" Stretch="Fill"/>
344 |                     </Grid.Background>
345 |                 </Grid>
346 | 
347 |                 <Grid Grid.Row="4" Grid.Column="3" Margin="10">
348 |                     <Grid.Background>
349 |                         <ImageBrush ImageSource="Assets/Img12.png" Stretch="Fill"/>
350 |                     </Grid.Background>
351 |                 </Grid>
352 | 
353 |                 <Grid Grid.Row="5" Grid.Column="1" Margin="10">
354 |                     <Grid.Background>
355 |                         <ImageBrush ImageSource="Assets/Img13.png" Stretch="Fill"/>
356 |                     </Grid.Background>
357 |                 </Grid>
358 | 
359 |                 <Grid Grid.Row="5" Grid.Column="2" Margin="10">
360 |                     <Grid.Background>
361 |                         <ImageBrush ImageSource="Assets/Img14.png" Stretch="Fill"/>
362 |                     </Grid.Background>
363 |                 </Grid>
364 | 
365 |                 <Grid Grid.Row="5" Grid.Column="3" Margin="10">
366 |                     <Grid.Background>
367 |                         <ImageBrush ImageSource="Assets/Img15.png" Stretch="Fill"/>
368 |                     </Grid.Background>
369 |                 </Grid>
370 | 
371 |                 <Grid Grid.Row="6" Grid.Column="1" Margin="10">
372 |                     <Grid.Background>
373 |                         <ImageBrush ImageSource="Assets/Img16.png" Stretch="Fill"/>
374 |                     </Grid.Background>
375 |                 </Grid>
376 | 
377 |             </Grid>
378 |             
379 |         </ScrollViewer>
380 | 
381 |     </Grid>    
382 |     
383 | </Window>
384 | 


--------------------------------------------------------------------------------
/Source/MainWindow.xaml.cs:
--------------------------------------------------------------------------------
 1 | 
 2 | /// Summary /// 
 3 | /// Author : R. Arun Mutharasu ///
 4 | /// Created : 12-02-2020
 5 | /// YouTube Channel : C# Design Pro ///
 6 | /// Summary ///   
 7 | 
 8 | using System;
 9 | using System.Collections.Generic;
10 | using System.Linq;
11 | using System.Text;
12 | using System.Threading.Tasks;
13 | using System.Windows;
14 | using System.Windows.Controls;
15 | using System.Windows.Data;
16 | using System.Windows.Documents;
17 | using System.Windows.Input;
18 | using System.Windows.Media;
19 | using System.Windows.Media.Imaging;
20 | using System.Windows.Navigation;
21 | using System.Windows.Shapes;
22 | 
23 | namespace Custom_Scrollbar
24 | {
25 |     /// <summary>
26 |     /// Interaction logic for MainWindow.xaml
27 |     /// </summary>
28 |     public partial class MainWindow : Window
29 |     {
30 |         public MainWindow()
31 |         {
32 |             InitializeComponent();
33 |         }
34 | 
35 |         private void Close_Btn_Click(object sender, RoutedEventArgs e)
36 |         {
37 |             this.Close();
38 |         }
39 |     }
40 | 
41 |     /// <summary>
42 |     /// Create a Value Converter to disable the Up & Down Arrow buttons of the scrollbar
43 |     /// when the Thumb reaches the minimum & maximum position on the scroll track.
44 |     /// </summary>
45 | 
46 |     public class ScrollLimitConverter : IMultiValueConverter
47 |     {
48 |         public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
49 |         {
50 |             if (values.Length == 2 && values[0] is double && values[1] is double)
51 |             {
52 |                 return (double)values[0] == (double)values[1];
53 |             }
54 |             return false;
55 |         }
56 | 
57 |         public object[] ConvertBack(object value, Type[] targetType, object parameter, System.Globalization.CultureInfo culture)
58 |         {
59 |             throw new NotImplementedException();
60 |         }
61 |     }
62 | 
63 | }
64 | 


--------------------------------------------------------------------------------
/Source/Styles.xaml:
--------------------------------------------------------------------------------
  1 | <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  2 |                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  3 |                     xmlns:local="clr-namespace:Custom_Scrollbar">
  4 |     
  5 |     <!--// Create style template for the Thumb of scrollbar //-->
  6 | 
  7 |     <ImageBrush x:Key="ThumbIcon_Default" ImageSource="Assets/Thumb_Icon_Default.png"/>
  8 |     <ImageBrush x:Key="ThumbIcon_MouseOver" ImageSource="Assets/Thumb_Icon_MouseOver.png"/>
  9 | 
 10 |     <Style x:Key="ScrollBar_Thumb" TargetType="{x:Type Thumb}">
 11 |         <Setter Property="SnapsToDevicePixels" Value="True"/>
 12 |         <Setter Property="OverridesDefaultStyle" Value="True"/>
 13 |         <Setter Property="Height" Value="85"/>
 14 |         <Setter Property="Width" Value="45"/>
 15 |         <Setter Property="Template">
 16 |             <Setter.Value>
 17 |                 <ControlTemplate TargetType="{x:Type Thumb}">
 18 | 
 19 |                     <Border 
 20 |                         x:Name="border"
 21 |                         Background="{StaticResource ThumbIcon_Default}"
 22 |                         SnapsToDevicePixels="True">                        
 23 |                     </Border>
 24 | 
 25 |                     <ControlTemplate.Triggers>
 26 |                         <Trigger Property="IsMouseOver" Value="True">
 27 |                             <Setter Property="Background" TargetName="border" Value="{StaticResource ThumbIcon_MouseOver}"/>
 28 |                             <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource ThumbIcon_MouseOver}"/>
 29 |                         </Trigger>
 30 |                     </ControlTemplate.Triggers>
 31 |                     
 32 |                 </ControlTemplate>
 33 |             </Setter.Value>
 34 |         </Setter>
 35 |     </Style>
 36 |     
 37 |     <!--// Style for Track of scrollbar //-->
 38 | 
 39 |     <Style x:Key="ScrollBar_Track" TargetType="{x:Type RepeatButton}">
 40 |         <Setter Property="SnapsToDevicePixels" Value="True"/>
 41 |         <Setter Property="OverridesDefaultStyle" Value="True"/>
 42 |         <Setter Property="IsTabStop" Value="False"/>
 43 |         <Setter Property="Focusable" Value="False"/>
 44 |         <Setter Property="Template">
 45 |             <Setter.Value>
 46 |                 <ControlTemplate TargetType="{x:Type RepeatButton}">
 47 |                     <Border Background="Transparent"/>
 48 |                 </ControlTemplate>
 49 |             </Setter.Value>
 50 |         </Setter>        
 51 |     </Style>
 52 |    
 53 |     <!--// Repeat Button style on MouseOver //-->
 54 | 
 55 |     <ImageBrush x:Key="UpArrow_MouseOver" ImageSource="Assets/Up_Arrow_MouseOver.png"/>
 56 | 
 57 |     <Style x:Key="ScrollBar_UpArrow" TargetType="{x:Type RepeatButton}">
 58 |         <Setter Property="Template">
 59 |             <Setter.Value>
 60 |                 <ControlTemplate TargetType="{x:Type RepeatButton}">
 61 | 
 62 |                     <Border x:Name="border" CornerRadius="10" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0"
 63 |                             Background="{TemplateBinding Background}" SnapsToDevicePixels="True">                        
 64 |                     </Border>
 65 | 
 66 |                     <ControlTemplate.Triggers>
 67 |                         <Trigger Property="IsMouseOver" Value="True">
 68 |                             <Setter Property="Background" TargetName="border" Value="{StaticResource UpArrow_MouseOver}"/>
 69 |                             <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource UpArrow_MouseOver}"/>
 70 |                         </Trigger>
 71 |                     </ControlTemplate.Triggers>                    
 72 |                 </ControlTemplate>
 73 |             </Setter.Value>            
 74 |         </Setter>        
 75 |     </Style>
 76 | 
 77 | 
 78 |     <ImageBrush x:Key="DownArrow_MouseOver" ImageSource="Assets/Down_Arrow_MouseOver.png"/>
 79 | 
 80 |     <Style x:Key="ScrollBar_DownArrow" TargetType="{x:Type RepeatButton}">
 81 |         <Setter Property="Template">
 82 |             <Setter.Value>
 83 |                 <ControlTemplate TargetType="{x:Type RepeatButton}">
 84 | 
 85 |                     <Border x:Name="border" CornerRadius="10" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0"
 86 |                             Background="{TemplateBinding Background}" SnapsToDevicePixels="True">                        
 87 |                     </Border>
 88 | 
 89 |                     <ControlTemplate.Triggers>
 90 |                         <Trigger Property="IsMouseOver" Value="True">
 91 |                             <Setter Property="Background" TargetName="border" Value="{StaticResource DownArrow_MouseOver}"/>
 92 |                             <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource DownArrow_MouseOver}"/>
 93 |                         </Trigger>
 94 |                     </ControlTemplate.Triggers>
 95 |                     
 96 |                 </ControlTemplate>
 97 |             </Setter.Value>            
 98 |         </Setter>        
 99 |     </Style>
100 |     
101 |     <!--// Close button style on MouseOver //-->
102 | 
103 |     <ImageBrush x:Key="CloseBtn_MouseOver" ImageSource="Assets/Close_Icon_MouseOver.png" Stretch="None"/>
104 | 
105 |     <Style x:Key="close_btn" TargetType="{x:Type Button}">
106 |         <Setter Property="Template">
107 |             <Setter.Value>
108 |                 <ControlTemplate TargetType="{x:Type Button}">
109 |                     <Border x:Name="button"
110 |                             BorderThickness="0"
111 |                             Background="{TemplateBinding Background}"
112 |                             SnapsToDevicePixels="True">                        
113 |                     </Border>
114 |                     <ControlTemplate.Triggers>
115 |                         <Trigger Property="IsMouseOver" Value="True">
116 |                             <Setter Property="Background" TargetName="button" Value="{StaticResource CloseBtn_MouseOver}"/>
117 |                         </Trigger>
118 |                     </ControlTemplate.Triggers>
119 |                 </ControlTemplate>
120 |             </Setter.Value>
121 |         </Setter>
122 |         
123 |     </Style>
124 | 
125 | 
126 | </ResourceDictionary>


--------------------------------------------------------------------------------
/WPF Custom Scrollbar - Preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF-Custom-Scrollbar/195dba07871ee9e244d93de923cd88783dd5cd7a/WPF Custom Scrollbar - Preview.png


--------------------------------------------------------------------------------
/WPF Custom Scrollbar.rar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF-Custom-Scrollbar/195dba07871ee9e244d93de923cd88783dd5cd7a/WPF Custom Scrollbar.rar


--------------------------------------------------------------------------------