.
Open Visual Studio 2015.
It takes some time to create a Windows application. Once the project creation is successful, you will be redirected to App.Xaml.cs.
Go ahead and open MainPage.Xaml from Solution Explorer. Now, switch code page into the designer page.
The general syntax for adding split view is given below.
- <SplitView>
- <SplitView.Pane>
-
- </SplitView.Pane>
- <SplitView.Content>
-
- </SplitView.Content>
- </SplitView>
Now, add the following code to create a split view. Add the following code under the Grid tag.
- <SplitView x:Name="MySplitView" DisplayMode="CompactOverlay" IsPaneOpen="False"
- CompactPaneLength="50" OpenPaneLength="250">
- <SplitView.Pane>
- <StackPanel Background="Bisque">
- <Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content=""
- Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click"/>
- <StackPanel Orientation="Horizontal">
- <Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content=""
- Width="50" Height="50" Background="Transparent"/>
- <TextBlock Text="C# Corner" FontSize="18" VerticalAlignment="Center" />
- </StackPanel>
- <StackPanel Orientation="Horizontal">
- <Button x:Name="MenuButton2" FontFamily="Segoe MDL2 Assets" Content=""
- Width="50" Height="50" Background="Transparent"/>
- <TextBlock Text="Contact" FontSize="18" VerticalAlignment="Center" />
- </StackPanel>
- <StackPanel Orientation="Horizontal">
- <Button x:Name="MenuButton3" FontFamily="Segoe MDL2 Assets" Content=""
- Width="50" Height="50" Background="Transparent"/>
- <TextBlock Text="Back" FontSize="18" VerticalAlignment="Center" />
- </StackPanel>
- </StackPanel>
- </SplitView.Pane>
- <SplitView.Content>
- <Grid>
- <TextBlock Text="SplitView Basic" FontSize="54" Foreground="White"
- HorizontalAlignment="Center" VerticalAlignment="Center"/>
- </Grid>
- </SplitView.Content>
- </SplitView>
Once the designer completes, add the code behind for making an application fully functional.
Open MainPage.Xaml.cs and add the following code in Hamburger button method, as shown below.
- private void HamburgerButton_Click(object sender, RoutedEventArgs e)
- {
- MySplitView.IsPaneOpen = !MySplitView.IsPaneOpen;
- }
Congrats ! Finally, we have created a simple application using Split View component. Click F5 button to run the application. Here, I am deploying the app on Local Machine.
Finally, the output is projected, as shown below.