SplitView (WinUI)

What is SplitView?

The SplitView control provides a two-pane UI layout commonly used for navigation drawers and content presentation. It lets you create a collapsible pane (left or right) that can be opened or closed programmatically or via user interaction.

Basic XAML Example

<SplitView
    x:Name="mySplitView"
    DisplayMode="CompactOverlay"
    CompactPaneLength="48"
    OpenPaneLength="240">
    <SplitView.Pane>
        <StackPanel>
            <Button Content="Home" />
            <Button Content="Settings" />
        </StackPanel>
    </SplitView.Pane>
    <SplitView.Content>
        <TextBlock Text="Main content goes here." />
    </SplitView.Content>
</SplitView>

Live Demo

This area represents the main content. Use the button above to open or close the navigation pane.

Properties

Property Description
DisplayMode Defines how the pane is shown (Inline, Overlay, CompactOverlay, CompactInline).
IsPaneOpen Gets or sets whether the pane is open.
OpenPaneLength Width of the pane when open.
CompactPaneLength Width of the pane when in compact mode.