Skip to content

Latest commit

 

History

History
93 lines (66 loc) · 4.72 KB

splitview.md

File metadata and controls

93 lines (66 loc) · 4.72 KB
Raw
-api-id -api-type
T:Windows.UI.Xaml.Controls.SplitView
winrt class

Windows.UI.Xaml.Controls.SplitView

-description

Represents a container with two views; one view for the main content and another view that is typically used for navigation commands.

-xaml-syntax

<SplitView>
  <SplitView.Content>
    singleObject
  </SplitView.Content>
  <SplitView.Pane>
    singleObject
  </SplitView.Pane>
</SplitView>

-remarks

Tip

For more info, design guidance, and code examples, see Split view.

The SplitView control presents two areas of content: a Pane and the main Content. You typically use a SplitView to create a top-level navigation experience that adapts to different screen widths following the nav pane pattern or the master/details pattern, but it's not strictly limited to use for navigation.

The XAML for this SplitView is shown in the Examples section.

Split view control

The Content area is always present and can contain a single child element, which is typically a Panel derived container that contains additional child elements. Although the Content is always present, it can be completely covered by the Pane.

There are several properties you can set to control the appearance and behavior of the Pane. Set the IsPaneOpen property to open or close the Pane. The SplitView does not include a built-in affordance for users to toggle the state of the Pane, like a menu (or “hamburger”) button. You must provide this affordance and the code to toggle the IsPaneOpen property.

To specify the length of the open pane, set the OpenPaneLength property. You can set the PanePlacement property to have the Pane appear on either the left or right side of the Content.

Although the appearance of the control is largely based on the elements assigned to the Pane and Content, you can change the default background color of the Pane by setting the PaneBackground.

Set the DisplayMode property to configure the interaction of the Pane with the Content. By default, the Pane overlays the Content and disappears completely when closed. You can use one of the "inline" modes to show the Pane side-by-side with the Content. You can use the "compact" modes to make a narrow section of the Pane remain visible even when the Pane is closed. See the SplitViewDisplayMode enumeration for more info about the supported modes.

Version history

Windows version SDK version Value added
1607 14393 LightDismissOverlayMode
1709 16299 PaneOpened
1709 16299 PaneOpening

-examples

Tip

For more info, design guidance, and code examples, see Split view.

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>

-see-also

Split view control overview