ScrollBar In WPF

Introduction

The ScrollBar tag in XAML represents a WPF ScrollBar control.

  1. <ScrollBar></ScrollBar>  

The Width and Height properties represent the width and the height of a ScrollBar. The Name property represents the name of the control, which is a unique identifier of a control. The Margin property tells the location of a ScrollBar on the parent control.

The Orientation property sets the direction of scrolling that can be either horizontal or vertical.

The following code snippet sets the name, height, width, orientation, margin, and background of a ScrollBar control.

  1. <ScrollBar Name="McScroller" Orientation="Horizontal"  
  2.    Width ="250" Height="30"  
  3.    Margin="10,10,0,0"  
  4. Background="LightSalmon" />  

The ScrollBar looks like Figure 1.

ScrollBar
Figure 1.

Setting up ScrollBar Value

The Value property of ScrollBar sets up the current value of a ScrollBar control. The Minimum and Maximum properties represent minimum and maximum range of a ScrollBar. In the following code, I set the Value property to 50 and now ScrollBar looks like Figure 2.

  1. <ScrollBar Name="McScroller" Orientation="Horizontal"  
  2.     Margin="10,10,0,0"  
  3.     Width ="250" Height="30"  
  4.     Background="LightSalmon"  
  5.     Minimum="1" Maximum="240"  
  6. Value="50"/>  

ScrollBar Value
Figure 2.

Creating a ScrollBar Dynamically

The ScrollBar class in WPF represents a ScrollBar control. This class is defined in using System.Windows.Controls.Primitives namespace. Before you use this class, make sure to import this namespace.

The following code snippet creates a ScrollBar at run-time and sets its orientation, width, height, background, minimum, maximum and value properties.

  1. privatevoid CreateDynamicScrollBar()   
  2. {  
  3.     ScrollBar hSBar = newScrollBar();  
  4.     hSBar.Orientation = Orientation.Horizontal;  
  5.     hSBar.HorizontalAlignment = HorizontalAlignment.Left;  
  6.     hSBar.Width = 250;  
  7.     hSBar.Height = 30;  
  8.     hSBar.Background = newSolidColorBrush(Colors.LightSalmon);  
  9.     hSBar.Minimum = 1;  
  10.     hSBar.Maximum = 240;  
  11.     hSBar.Value = 50;  
  12.     LayoutRoot.Children.Add(hSBar);  
  13. }  

How to add scroll event handler to a WPF ScrollBar

The following XAML code snippet adds Scroll event handler to a ScrollBar.

  1. <ScrollBar Name="McScroller" Orientation="Horizontal"  
  2.     Margin="10,10,0,0"  
  3.     Width ="250" Height="30"  
  4.     Background="LightSalmon"  
  5.     Minimum="1" Maximum="240"  
  6. Value="50" Scroll="ScrollBar_Scroll"/>  

The Scroll event handler code looks like the following,

  1. privatevoid ScrollBar_Scroll(object sender, System.Windows.Controls.Primitives.ScrollEventArgs e)  
  2. {  
  3.    // Do something here  
  4. }  

Summary

In this article, I discussed how to create and use a ScrollBar control available in WPF.