Split view control
A split view control has an expandable/collapsible pane and a content area.
Important APIs: SplitView class
Here is an example of the Microsoft Edge app using SplitView to show its Hub.
A split view's content area is always visible. The pane can expand and collapse or remain in an open state, and can present itself from either the left side or right side of an app window. The pane has four modes:
Overlay
The pane is hidden until opened. When open, the pane overlays the content area.
Inline
The pane is always visible and doesn't overlay the content area. The pane and content areas divide the available screen real estate.
CompactOverlay
A narrow portion of the pane is always visible in this mode, which is just wide enough to show icons. The default closed pane width is 48px, which can be modified with
CompactPaneLength
. If the pane is opened, it will overlay the content area.CompactInline
A narrow portion of the pane is always visible in this mode, which is just wide enough to show icons. The default closed pane width is 48px, which can be modified with
CompactPaneLength
. If the pane is opened, it will reduce the space available for content, pushing the content out of its way.
The split view control can be used to create any "drawer" experience where users can open and close the supplemental pane. For example, you can use SplitView to build the list/details pattern.
If you'd like to build a navigation menu with an expand/collapse button and a list of navigation items, then use the NavigationView control.
WinUI 2 Gallery | |
---|---|
If you have the WinUI 2 Gallery app installed, click here to open the app and see the SplitView in action. |
Here's a SplitView control with an open Pane appearing inline next to the Content.
<SplitView IsPaneOpen="True"
DisplayMode="Inline"
OpenPaneLength="296">
<SplitView.Pane>
<TextBlock Text="Pane"
FontSize="24"
VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</SplitView.Pane>
<Grid>
<TextBlock Text="Content"
FontSize="24"
VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</Grid>
</SplitView>
- WinUI 2 Gallery sample - See all the XAML controls in an interactive format.
Windows developer feedback
Windows developer is an open source project. Select a link to provide feedback: