Saturday, March 24, 2018

UWP: SplitView XAML Control

SplitView Class in XAML provides us with two views, one for Main content and the other, a Pane that can be used for navigation.

This is the inheritance chain:

DependencyObject 
UIElement | Framework Element | Control |SplitView




An Example using Visual Studio Community 2017

You can get a basic start with the SplitView Control here.

You could replace the default 'grid' in a Blank UWP project shown here:

DefaultBlank.png

Use the following in its place:


SplitView sample.png

This is ready for build. Build and run the app in the Local Computer.
This is what you see when the app is run.


There is a Pane (the SplitView. Pane and there is a TextBlock named 'Content' in the Grid.

Now I change the OpenPanelLenth (presently 296) to, say 150 and build and run the app. What do I see?


SplitView 2

Basically you can now see more content.

In the 'Pane' you can place controls and hook up events to them to display related 'Content' in the Content (i.e., inside the 'grid' control) on the right.

No comments:

DMCA.com Protection Status