Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 47 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,51 @@
# How to change scrollbar mode using WPF SkinManager?

This sample loads [Datagrid](https://help.syncfusion.com/wpf/datagrid/getting-started) and [Chromeless Window](https://help.syncfusion.com/wpf/chromeless-window/getting-started) with compact windows 10 like scrollbar using SkinManager [ScrollBarMode](https://help.syncfusion.com/cr/wpf/Syncfusion.SfSkinManager.Theme.html#Syncfusion_SfSkinManager_Theme_ScrollBarMode) property.
The [SfSkinManager](https://help.syncfusion.com/cr/wpf/Syncfusion.SfSkinManager.SfSkinManager.html) allows you to apply various scrollbar styles like Windows 10 compact scrollbar, for both Syncfusion<sup>&reg;</sup> and Framework controls using the [ScrollBarMode](https://help.syncfusion.com/cr/wpf/Syncfusion.SfSkinManager.Theme.html#Syncfusion_SfSkinManager_Theme_ScrollBarMode) property, which will be available only in [themes supported by theme studio](https://help.syncfusion.com/wpf/themes/skin-manager#themes-list).

The [ScrollBarMode](https://help.syncfusion.com/cr/wpf/Syncfusion.SfSkinManager.ScrollBarMode.html) enum contains the following values:

* `Default` - The ScrollBar will be displayed with the default look of a thumb along with up and down arrow to scroll.
* `Compact` - The Windows 10 like compact scrollbar will have the look of a thin layer of thumb until the user hovers over the scrollbar area.

N> The `Compact` scrollbar mode is enabled by default in the [WPF Fluent Theme](https://help.syncfusion.com/wpf/themes/fluent-theme) and WPF Windows11 Theme.

This sample demonstrates how to use the `ScrollBarMode` property in a WPF application using Syncfusion's SkinManager. It loads a `DataGrid` and a `Chromeless Window` with compact scrollbar styles, showcasing the visual differences between modes.

## Features

- Configurable scrollbar modes: Default and Compact
- Applies to both Syncfusion controls (e.g., SfDataGrid) and standard WPF controls
- Easy integration with theme applications
- Hover-to-expand functionality in Compact mode for better usability

## Configuration

### Setting ScrollBarMode in C#

To set the ScrollBarMode programmatically, use the SfSkinManager:

```csharp
using Syncfusion.SfSkinManager;

SfSkinManager.SetTheme(this, new Theme() { ThemeName = "MaterialDark" });
SkinManagerHelper.SetScrollBarMode(this, ScrollBarMode.Compact);
```

## Build and Run

1. Clone or download the project.
2. Open `DataGrid_Themes.sln` in Visual Studio.
3. Restore NuGet packages.
4. Build the solution.
5. Run the application to see the DataGrid and Chromeless Window with compact scrollbars.

Ensure Syncfusion licenses are configured if required.

## Demos and Examples

The sample includes a DataGrid populated with employee data, demonstrating scrollbar functionality. Experiment by switching between Default and Compact modes in code.

## Screenshots

![WPF Datagrid with compact windows 10 like scrollbar](Images/WPF-Datagrid-with-compact-windows-10-like-scrollbar.png)
1096