Skip to content

Commit 0f19f69

Browse files
993580-Updated the readme file
1 parent 34448ce commit 0f19f69

File tree

2 files changed

+50
-0
lines changed

2 files changed

+50
-0
lines changed

README.md

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
# How-to-customize-the-auto-hide-window-of-the-docking-manager
2+
3+
This sample demonstrates how to customize the auto-hide (side) panel and its header in Syncfusion WPF DockingManager. You can tune background, border brush, border thickness, and the panel size to match your application’s theme. The same styling can be applied consistently to both the side container and the auto-hide tab headers to create a coherent look.
4+
5+
## Customization
6+
7+
The side panel and side panel header can be customized by applying its Background, BorderBrush, BorderThickness and SidePanelSize through SidePanelBackground, SidePanelBorderBrush, SidePanelBorderThickness, SidePanelSize properties of the DockingManager. You can also refer to this sample which demonstrate the side panel customization.
8+
9+
## Code snippet
10+
11+
### XAML:
12+
``` xml
13+
<syncfusion:DockingManager SidePanelBackground="Brown"
14+
SidePanelBorderBrush="Yellow" SideItemsBackground="Green"
15+
SidePanelBorderThickness="2,2,2,2" SideItemsBorderBrush="BlueViolet" SidePanelSize="40">
16+
17+
<ContentControl syncfusion:DockingManager.Header="SolutionExplorer" syncfusion:DockingManager.State="AutoHidden" />
18+
19+
<ContentControl syncfusion:DockingManager.Header="ToolBox" />
20+
21+
</syncfusion:DockingManager>
22+
```
23+
24+
### C#:
25+
26+
``` csharp
27+
//Set Customization colors
28+
SyncDockingManager.SidePanelBackground = new SolidColorBrush(Colors.Brown);
29+
SyncDockingManager.SidePanelBorderBrush = new SolidColorBrush(Colors.Yellow);
30+
SyncDockingManager.SideItemsBackground = new SolidColorBrush(Colors.Green);
31+
SyncDockingManager.SideItemsBorderBrush = new SolidColorBrush(Colors.Violet);
32+
SyncDockingManager.SidePanelBorderThickness = new Thickness(2, 2, 2, 2);
33+
SyncDockingManager.SidePanelSize = 40;
34+
```
35+
The screenshot below displays the customized autohide window.
36+
![Customized autohide window](auto-hide-window.png)
37+
38+
## What you’ll learn:
39+
40+
- Apply SidePanelBackground for the strip surface and SideItemsBackground for the tab headers
41+
- Add visual separation using SidePanelBorderBrush and SidePanelBorderThickness
42+
- Tune SidePanelSize to define how thick the side strip appears on the docking edge
43+
- Configure settings in XAML and optionally adjust at runtime in code
44+
45+
## Notes:
46+
47+
- SidePanelBackground colors the auto-hide strip that hosts the side tabs.
48+
- SideItemsBackground applies to the tab headers within the strip.
49+
- SidePanelBorderBrush and SidePanelBorderThickness add definition to the strip edges.
50+
- SidePanelSize controls strip thickness and impacts perceived density and hit targets.

auto-hide-window.png

5.08 KB
Loading

0 commit comments

Comments
 (0)