0

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="&#xE700;" 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="&#xE80F;" 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="&#xE13D;" 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="&#xE93C;" 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="&#xF146;" 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="&#xE825;" 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="&#xE897;" 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="&#xE72E;" 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;
        }

    }
}
Tim C
  • 1
  • 1
  • Did you try moving your Hamburger Icon Outside ListView? – AVK Jan 27 '17 at 18:51
  • I have yeah, but it still doesn't work. If I build the app with only one view it works perfectly but trying to build it with a mobile and desktop view causes issues. – Tim C Jan 27 '17 at 19:21
  • @TimC I followed the blog [Windows 10 SplitView – Build Your First Hamburger Menu](https://blogs.msdn.microsoft.com/quick_thoughts/2015/06/01/windows-10-splitview-build-your-first-hamburger-menu/) to make a simple hamburger menu. It worked well on desktop and phone. Please try this way. And I also want to know what your phone is? (e.g, lumiaxxx) – Xie Steven Jan 30 '17 at 08:27

0 Answers0