I am currently working on a UWP implementing a SplitView so I can use a hamburger menu. I am also working with the DeviceFamily views so as to create tailored experiences for desktop and mobile. However, I cannot get the split view to open on either device. I can set it as open on the phone then use the button to close it but then it will not reopen.
Here is the XAML for the desktop (it is only rough right now):
<Page
x:Class="Project_Pandemonium_Preview.DeviceFamily_Desktop.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Project_Pandemonium_Preview.DeviceFamily_Desktop"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="#FF35FFFA">
<Grid.Transitions>
<TransitionCollection>
<EntranceThemeTransition FromVerticalOffset="28" FromHorizontalOffset="0"/>
</TransitionCollection>
</Grid.Transitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="700*"/>
<RowDefinition Height="30*"/>
<RowDefinition Height="11*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="200"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<RelativePanel>
</RelativePanel>
<SplitView Grid.Row="0" Name="MySplitView"
DisplayMode="CompactInline"
OpenPaneLength="200"
CompactPaneLength="48"
HorizontalAlignment="Left" Grid.RowSpan="4" Width="200">
<SplitView.Pane>
<ListBox Name="IconsListBox" SelectionChanged="IconsListBox_SelectionChanged" Background="#7F242425">
<ListBoxItem Padding="0" HorizontalAlignment="Left" VerticalAlignment="Top">
<Button Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="" FontSize="20" Click="HamburgerButton_Click" Background="{x:Null}" Height="48" Width="48" Padding="6,3" VerticalAlignment="Top" />
</ListBoxItem>
<ListBoxItem Name="HomeListBoxItem" BorderThickness="0">
<StackPanel Orientation="Horizontal" BorderThickness="5,0,0,0">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="16" Text="" VerticalAlignment="Center" />
<TextBlock Text="Home" FontSize="18" Margin="20,0,0,0" />
</StackPanel>
</ListBoxItem>
<ListBoxItem Name="ArtistListBoxItem">
<StackPanel Orientation="Horizontal" Margin="5,0,0,0">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="16" Text="" VerticalAlignment="Center" />
<TextBlock Text="Artists" FontSize="18" Margin="20,0,0,0"/>
</StackPanel>
</ListBoxItem>
<ListBoxItem Name="AlbumsListBoxItem">
<StackPanel Orientation="Horizontal" Margin="5,0,0,0">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="16" Text="" VerticalAlignment="Center" />
<TextBlock Text="Albums" FontSize="18" Margin="20,0,0,0" />
</StackPanel>
</ListBoxItem>
<ListBoxItem Name="NumberOnesListBoxItem">
<StackPanel Orientation="Horizontal" BorderThickness="5,0,0,0">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="16" Text="" VerticalAlignment="Center" />
<TextBlock Text="Number 1`s" FontSize="18" Margin="20,0,0,0" />
</StackPanel>
</ListBoxItem>
<ListBoxItem Name="VenuesListBoxItem">
<StackPanel Orientation="Horizontal" BorderThickness="5,0,0,0">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="16" Text="" VerticalAlignment="Center" />
<TextBlock Text="Venues" FontSize="18" Margin="20,0,0,0" />
</StackPanel>
</ListBoxItem>
<ListBoxItem Name="HelpListBoxItem">
<StackPanel Orientation="Horizontal" BorderThickness="5,0,0,0">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="16" Text="" VerticalAlignment="Center" />
<TextBlock Text="Help" FontSize="18" Margin="20,0,0,0" />
</StackPanel>
</ListBoxItem>
<ListBoxItem Name="ManagementListBoxItem">
<StackPanel Orientation="Horizontal" BorderThickness="5,0,0,0">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="16" Text="" VerticalAlignment="Center" />
<TextBlock Text="Management" FontSize="18" Margin="20,0,0,0" />
</StackPanel>
</ListBoxItem>
</ListBox>
</SplitView.Pane>
<Frame Name="MyFrame" Margin="0,0,-1078,0">
</Frame>
</SplitView>
</Grid>
And the code that is behind the page, simple though it is:
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace Project_Pandemonium_Preview.DeviceFamily_Desktop
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
private void IconsListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
}
private void HamburgerButton_Click(object sender, RoutedEventArgs e)
{
MySplitView.IsPaneOpen = !MySplitView.IsPaneOpen;
}
}
}