SplitView
SplitView
SplitView
SplitView
Class
Definition
Some information relates to pre-released product which may be substantially modified before it’s commercially released. Microsoft makes no warranties, express or implied, with respect to the information provided here.
Prerelease APIs are identified by a Prerelease label.
[Contains prerelease APIs.]
Represents a container with two views; one view for the main content and another view that is typically used for navigation commands.
public : class SplitView : Control, ISplitView, ISplitView2public class SplitView : Control, ISplitView, ISplitView2Public Class SplitView Inherits Control Implements ISplitView, ISplitView2// This API is not available in Javascript.
<SplitView>
<SplitView.Content>
singleObject
</SplitView.Content>
<SplitView.Pane>
singleObject
</SplitView.Pane>
</SplitView>
- Inheritance
- Attributes
| Device family |
Windows 10 (introduced v10.0.10240.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v1)
|
Inherited Members
Inherited properties
Inherited events
Inherited methods
Examples
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>
Remarks
SplitView 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, but it's not strictly limited to use for navigation.
The XAML for this SplitView is shown in the Examples section.
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.
For design guidance, see Guidelines for the split view control.
For more info and examples on building a top-level navigation experience, see Guidelines for navigation panes and the XAML Navigation Menu sample.
Constructors
Properties
CompactPaneLength CompactPaneLength CompactPaneLength CompactPaneLength
Gets or sets the width of the SplitView pane in its compact display mode.
public : double CompactPaneLength { get; set; }public double CompactPaneLength { get; set; }Public ReadWrite Property CompactPaneLength As double// This API is not available in Javascript.
<SplitView CompactPaneLength="double" .../>
- Value
- double double double double
The width of the pane in it's compact display mode. The default is 48 device-independent pixel (DIP) (defined by the SplitViewCompactPaneThemeLength resource).
Remarks
This property specifies the width of the pane when DisplayMode is Compact and IsPaneOpen is false.
CompactPaneLengthProperty CompactPaneLengthProperty CompactPaneLengthProperty CompactPaneLengthProperty
Identifies the CompactPaneLength dependency property.
public : static DependencyProperty CompactPaneLengthProperty { get; }public static DependencyProperty CompactPaneLengthProperty { get; }Public Static ReadOnly Property CompactPaneLengthProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the CompactPaneLength dependency property.
- See Also
Content Content Content Content
Gets or sets the contents of the main panel of a SplitView.
public : UIElement Content { get; set; }public UIElement Content { get; set; }Public ReadWrite Property Content As UIElement// This API is not available in Javascript.
<SplitView>
singleObject
</SplitView>
ContentProperty ContentProperty ContentProperty ContentProperty
Identifies the Content dependency property.
public : static DependencyProperty ContentProperty { get; }public static DependencyProperty ContentProperty { get; }Public Static ReadOnly Property ContentProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the Content dependency property.
- See Also
DisplayMode DisplayMode DisplayMode DisplayMode
Gets of sets a value that specifies how the pane and content areas of a SplitView are shown.
public : SplitViewDisplayMode DisplayMode { get; set; }public SplitViewDisplayMode DisplayMode { get; set; }Public ReadWrite Property DisplayMode As SplitViewDisplayMode// This API is not available in Javascript.
<SplitView DisplayMode="splitViewDisplayModeMemberName" />
A value of the enumeration that specifies how the pane and content areas of a SplitView are shown. The default is Overlay.
DisplayModeProperty DisplayModeProperty DisplayModeProperty DisplayModeProperty
Identifies the DisplayMode dependency property.
public : static DependencyProperty DisplayModeProperty { get; }public static DependencyProperty DisplayModeProperty { get; }Public Static ReadOnly Property DisplayModeProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the DisplayMode dependency property.
- See Also
IsPaneOpen IsPaneOpen IsPaneOpen IsPaneOpen
Gets or sets a value that specifies whether the SplitView pane is expanded to its full width.
public : PlatForm::Boolean IsPaneOpen { get; set; }public bool IsPaneOpen { get; set; }Public ReadWrite Property IsPaneOpen As bool// This API is not available in Javascript.
<SplitView IsPaneOpen="bool" .../>
- Value
- PlatForm::Boolean bool bool bool
true if the pane is expanded to its full width; otherwise, false. The default is true.
Remarks
The effects of this property are influenced by the value of the DisplayMode property.
| DisplayMode | Effect |
|---|---|
| Inline | IsPaneOpen is true. |
| Overlay | When IsPaneOpen is false, the pane is hidden. |
| Compact | When IsPaneOpen is false, the pane is shown in its compact size (see CompactPaneLength ). |
IsPaneOpenProperty IsPaneOpenProperty IsPaneOpenProperty IsPaneOpenProperty
Identifies the IsPaneOpen dependency property.
public : static DependencyProperty IsPaneOpenProperty { get; }public static DependencyProperty IsPaneOpenProperty { get; }Public Static ReadOnly Property IsPaneOpenProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the IsPaneOpen dependency property.
- See Also
LightDismissOverlayMode LightDismissOverlayMode LightDismissOverlayMode LightDismissOverlayMode
Gets or sets a value that specifies whether the area outside of a light-dismiss UI is darkened.
public : LightDismissOverlayMode LightDismissOverlayMode { get; set; }public LightDismissOverlayMode LightDismissOverlayMode { get; set; }Public ReadWrite Property LightDismissOverlayMode As LightDismissOverlayMode// This API is not available in Javascript.
- Value
- LightDismissOverlayMode LightDismissOverlayMode LightDismissOverlayMode LightDismissOverlayMode
A value of the enumeration that specifies whether the area outside of a light-dismiss UI is darkened. The default is Auto.
| Device family |
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v3)
|
Remarks
Transient UI, such as open pane of a SplitView, closes when you click or tap outside of it. This is called light-dismiss. "Overlay" refers to the area outside of a light-dismiss UI.
By default, the "overlay" is darkened on the Xbox, and not darkened on other devices families. You can set LightDismissOverlayMode to On to make your app darken the "overlay" area on all device families, or set it to Off to not darken the "overlay" area on all device families.
Version compatibility
The LightDismissOverlayMode property is not available prior to Windows 10, version 1607. If your app’s 'minimum platform version' setting in Microsoft Visual Studio is less than the 'introduced version' shown in the Requirements block later in this page, you must design and test your app to account for this. For more info, see Version adaptive code.
To avoid exceptions when your app runs on previous versions of Windows 10, do not set this property in XAML or use it without performing a runtime check. This example shows how to use the ApiInformation class to check for the presence of this property before you set it.
private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
if (ApiInformation.IsPropertyPresent("Windows.UI.Xaml.Controls.SplitView", "LightDismissOverlayMode"))
{
splitView1.LightDismissOverlayMode = LightDismissOverlayMode.On;
}
}
LightDismissOverlayModeProperty LightDismissOverlayModeProperty LightDismissOverlayModeProperty LightDismissOverlayModeProperty
Identifies the LightDismissOverlayMode dependency property.
public : static DependencyProperty LightDismissOverlayModeProperty { get; }public static DependencyProperty LightDismissOverlayModeProperty { get; }Public Static ReadOnly Property LightDismissOverlayModeProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the LightDismissOverlayMode dependency property.
| Device family |
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v3)
|
OpenPaneLength OpenPaneLength OpenPaneLength OpenPaneLength
Gets or sets the width of the SplitView pane when it's fully expanded.
public : double OpenPaneLength { get; set; }public double OpenPaneLength { get; set; }Public ReadWrite Property OpenPaneLength As double// This API is not available in Javascript.
<SplitView OpenPaneLength="double" .../>
- Value
- double double double double
The width of the SplitView pane when it's fully expanded. The default is 320 device-independent pixel (DIP).
OpenPaneLengthProperty OpenPaneLengthProperty OpenPaneLengthProperty OpenPaneLengthProperty
Identifies the OpenPaneLength dependency property.
public : static DependencyProperty OpenPaneLengthProperty { get; }public static DependencyProperty OpenPaneLengthProperty { get; }Public Static ReadOnly Property OpenPaneLengthProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the OpenPaneLength dependency property.
- See Also
Pane Pane Pane Pane
Gets or sets the contents of the pane of a SplitView.
public : UIElement Pane { get; set; }public UIElement Pane { get; set; }Public ReadWrite Property Pane As UIElement// This API is not available in Javascript.
<SplitView>
singleObject
<SplitView.Pane>
singleObject
</SplitView.Pane
</SplitView>
PaneBackground PaneBackground PaneBackground PaneBackground
Gets or sets the Brush to apply to the background of the Pane area of the control.
public : Brush PaneBackground { get; set; }public Brush PaneBackground { get; set; }Public ReadWrite Property PaneBackground As Brush// This API is not available in Javascript.
<SplitView PaneBackground="{StaticResource resourceName}"/>
PaneBackgroundProperty PaneBackgroundProperty PaneBackgroundProperty PaneBackgroundProperty
Identifies the PaneBackground dependency property.
public : static DependencyProperty PaneBackgroundProperty { get; }public static DependencyProperty PaneBackgroundProperty { get; }Public Static ReadOnly Property PaneBackgroundProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the PaneBackground dependency property.
- See Also
PanePlacement PanePlacement PanePlacement PanePlacement
Gets or sets a value that specifies whether the pane is shown on the right or left side of the SplitView.
public : SplitViewPanePlacement PanePlacement { get; set; }public SplitViewPanePlacement PanePlacement { get; set; }Public ReadWrite Property PanePlacement As SplitViewPanePlacement// This API is not available in Javascript.
<SplitView PanePlacement="splitViewPanePlacementMemberName" />
A value of the enumeration that specifies whether the pane is shown on the right or left side of the SplitView. The default is Left.
PanePlacementProperty PanePlacementProperty PanePlacementProperty PanePlacementProperty
Identifies the PanePlacement dependency property.
public : static DependencyProperty PanePlacementProperty { get; }public static DependencyProperty PanePlacementProperty { get; }Public Static ReadOnly Property PanePlacementProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the PanePlacement dependency property.
- See Also
PaneProperty PaneProperty PaneProperty PaneProperty
Identifies the Pane dependency property.
public : static DependencyProperty PaneProperty { get; }public static DependencyProperty PaneProperty { get; }Public Static ReadOnly Property PaneProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the Pane dependency property.
- See Also
TemplateSettings TemplateSettings TemplateSettings TemplateSettings
Gets an object that provides calculated values that can be referenced as TemplateBinding sources when defining templates for a SplitView control.
public : SplitViewTemplateSettings TemplateSettings { get; }public SplitViewTemplateSettings TemplateSettings { get; }Public ReadOnly Property TemplateSettings As SplitViewTemplateSettings// This API is not available in Javascript.
- Value
- SplitViewTemplateSettings SplitViewTemplateSettings SplitViewTemplateSettings SplitViewTemplateSettings
An object that provides calculated values for templates.
TemplateSettingsProperty TemplateSettingsProperty TemplateSettingsProperty TemplateSettingsProperty
Identifies the TemplateSettings dependency property.
public : static DependencyProperty TemplateSettingsProperty { get; }public static DependencyProperty TemplateSettingsProperty { get; }Public Static ReadOnly Property TemplateSettingsProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the TemplateSettings dependency property.
- See Also
Events
PaneClosed PaneClosed PaneClosed PaneClosed
Occurs when the SplitView pane is closed.
public : event TypedEventHandler PaneClosed<SplitView, object>public event TypedEventHandler PaneClosed<SplitView, object>Public Event PaneClosed<SplitView, object>// This API is not available in Javascript.
<SplitView PaneClosed="eventhandler"/>
- See Also
PaneClosing PaneClosing PaneClosing PaneClosing
Occurs when the SplitView pane is closing.
public : event TypedEventHandler PaneClosing<SplitView, SplitViewPaneClosingEventArgs>public event TypedEventHandler PaneClosing<SplitView, SplitViewPaneClosingEventArgs>Public Event PaneClosing<SplitView, SplitViewPaneClosingEventArgs>// This API is not available in Javascript.
<SplitView PaneClosing="eventhandler"/>
Remarks
Set the SplitViewPaneClosingEventArgs.Cancel property to true in a handler for this event in order to cancel a SplitView pane closing action.
- See Also
PaneOpened PaneOpened PaneOpened PaneOpened
Prerelease. Occurs when the SplitView pane is opened.
public : event TypedEventHandler PaneOpened<SplitView, object>public event TypedEventHandler PaneOpened<SplitView, object>Public Event PaneOpened<SplitView, object>// This API is not available in Javascript.
<SplitView PaneOpened="eventhandler"/>
| Device family |
Windows 10 Insider Preview (introduced v10.0.16257.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v5)
|
PaneOpening PaneOpening PaneOpening PaneOpening
Prerelease. Occurs when the SplitView pane is opening.
public : event TypedEventHandler PaneOpening<SplitView, object>public event TypedEventHandler PaneOpening<SplitView, object>Public Event PaneOpening<SplitView, object>// This API is not available in Javascript.
<SplitView PaneOpening="eventhandler"/>
| Device family |
Windows 10 Insider Preview (introduced v10.0.16257.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v5)
|