|
| 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 | + |
| 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. |
0 commit comments