Auto Hide Window in UWP Docking (SfDockingManager)

15 Jul 20264 minutes to read

AutoHide window is one of the states in the SfDockingManager. To enable Auto hidden for SfDockingManager’s children, set the SfDockingManager child DockState value as AutoHidden.

Auto-Hide-Window-img1

Configuring Window in Different Sides

AutoHidden window can be placed in four different sides such as Top, Bottom, Left and Right. To place the four auto hidden children in four different sides, set the SideInDockedMode property according to its corresponding values in the SfDockingManager.

<layout:SfDockingManager>

<ContentControl layout:SfDockingManager.Header="Top" x:Name="AutoHideWindow1"
                layout:SfDockingManager.DockState="AutoHidden"
				layout:SfDockingManager.SideInDockedMode="Top" />

<ContentControl layout:SfDockingManager.Header="Left" x:Name="AutoHideWindow2"
                layout:SfDockingManager.DockState="AutoHidden"
				layout:SfDockingManager.SideInDockedMode="Left" />

<ContentControl layout:SfDockingManager.Header="Right" x:Name="AutoHideWindow3"
                layout:SfDockingManager.DockState="AutoHidden"
				layout:SfDockingManager.SideInDockedMode="Right" />

<ContentControl layout:SfDockingManager.Header="Bottom" x:Name="AutoHideWindow4"
                layout:SfDockingManager.DockState="AutoHidden"
				layout:SfDockingManager.SideInDockedMode="Bottom" />

</layout:SfDockingManager>

Auto-Hide-Window-img2

Side Panel and TabItem Customization

The side panel and side panel header can be customized through SidePanelBackground, SidePanelItemsBackground and SidePanelItemsForeground properties of the SfDockingManager.

<layout:SfDockingManager SidePanelBackground="Brown"
                         SidePanelItemsForeground="White" SidePanelItemsBackground="Green">

<ContentControl layout:SfDockingManager.Header="SolutionExplorer"
                layout:SfDockingManager.DockState="AutoHidden" />

<ContentControl layout:SfDockingManager.Header="ToolBox" />

</layout:SfDockingManager>

Auto-Hide-Window-img3

Scrollable Panel

Side panel have scroll support, when AutoHidden tab items overflow onto the side panel.

Configuring AutoHide Animation

The animation speed while auto hiding a window can be configured by setting the required time delay in the AutoHideAnimationSpeed property.

<layout:SfDockingManager AutoHideAnimationSpeed="400">

<ContentControl layout:SfDockingManager.Header="SolutionExplorer"
                layout:SfDockingManager.DockState="AutoHidden" />

</layout:SfDockingManager>

Applying Different Animations for AutoHide Window

SfDockingManager supports three different built-in animations while auto-hiding the windows such as Fade, Scale and Slide, which can be set through the AutoHideAnimationMode property.

Fade – AutoHidden window fades while auto hiding.

<layout:SfDockingManager AutoHideAnimationMode="Fade">

<ContentControl layout:SfDockingManager.Header="SolutionExplorer"
                layout:SfDockingManager.DockState="AutoHidden" />

</layout:SfDockingManager>

Scale – AutoHidden Window scales while auto hiding.

<layout:SfDockingManager AutoHideAnimationMode="Scale">

<ContentControl layout:SfDockingManager.Header="SolutionExplorer"
                layout:SfDockingManager.DockState="AutoHidden" />

</layout:SfDockingManager>

Slide – AutoHidden Window slides while auto hiding.

<layout:SfDockingManager AutoHideAnimationMode="Slide">

<ContentControl layout:SfDockingManager.Header="SolutionExplorer"
                layout:SfDockingManager.DockState="AutoHidden" />

</layout:SfDockingManager>

Enabling and Disabling the AutoHide functionality

The Pin button, which performs the Auto Hide functionality, is visible by default. It should be collapsed to disable the AutoHide functionality. Visibility of the Pin button can be changed by ShowPinButton property.

<layout:SfDockingManager ShowPinButton="false">

<ContentControl layout:SfDockingManager.Header="SolutionExplorer" />

</layout:SfDockingManager>

Auto-Hide-Window-img4

To show or collapse the AutoHide button for a specific child in the SfDockingManager, the IsPinButtonVisible attached property can be used. By default, the IsPinButtonVisible value is true. This functionality can be disabled by setting its value as false.

<layout:SfDockingManager>

<ContentControl layout:SfDockingManager.Header="SolutionExplorer"
                layout:SfDockingManager.IsPinButtonVisible="false"/>

<ContentControl layout:SfDockingManager.Header="ToolBox"
                layout:SfDockingManager.IsPinButtonVisible="true"/>

</layout:SfDockingManager>

Auto-Hide-Window-img5

To enable or disable the AutoHide functionality for a specific child in the SfDockingManager, the CanAutoHide attached property can be used. By default, the CanAutoHide value is true. This functionality can be disabled by setting its value as false.

<layout:SfDockingManager>

<ContentControl layout:SfDockingManager.Header="SolutionExplorer"
                layout:SfDockingManager.CanAutoHide="false"/>

<ContentControl layout:SfDockingManager.Header="ToolBox"
                layout:SfDockingManager.CanAutoHide="true"/>

</layout:SfDockingManager>