Leaving the hamburger frame in UWP

Question

I am new to UWP development. I am trying to make a simple app to show some data. I created a hamburger menu for the first sections of my app and it works well. But, after you choose a page, it is shown on a frame I have in my hamburger menu created with SplitViews.

<RelativePanel Background="{StaticResource AccentBrush}">
        <Button Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" FontSize="36" Click="HamburgerButton_Click" />
        <TextBlock Name="TitleTextBlock" RelativePanel.RightOf="HamburgerButton" Margin="10,0,0,0" Text="Contentedor" FontSize="36" />
    </RelativePanel>
    <SplitView Name="MySplitView" Grid.Row="1" DisplayMode="CompactOverlay" OpenPaneLength="240" CompactPaneLength="56" HorizontalAlignment="Left">
        <SplitView.Pane>
            <ListBox SelectionMode="Single" 
                     Background="DimGray"
                     Name="IconsListBox" 
                     SelectionChanged="IconsListBox_SelectionChanged">
                <ListBoxItem Name="ContainerListBoxItem">
                    <StackPanel Orientation="Horizontal">
                        <!--<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="&#xE72D;" />-->
                        <Image HorizontalAlignment="Left" Source="Assets/icon1.png" Width="35" Height="35" />
                        <TextBlock Margin="20,0,0,0" Text="Page1" FontSize="24" />
                    </StackPanel>
                </ListBoxItem>
                <ListBoxItem Name="AnimalListBoxItem">
                    <StackPanel Orientation="Horizontal">
                        <!--<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="&#xE734;" />-->
                        <Image HorizontalAlignment="Left" Source="Assets/icon2.png" Width="35" Height="35" />
                        <TextBlock Margin="20,0,0,0" Text="Page2" FontSize="24" />
                    </StackPanel>
                </ListBoxItem>
                <ListBoxItem Name="SettingsListBoxItem">
                    <StackPanel Orientation="Horizontal">
                        <!--<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="&#xE72D;" />-->
                        <Image HorizontalAlignment="Left" Source="Assets/icon3.png" Width="35" Height="35" />
                        <TextBlock Margin="20,0,0,0" Text="Page3" FontSize="24" />
                    </StackPanel>
                </ListBoxItem>
            </ListBox>
        </SplitView.Pane>
        <SplitView.Content>
            <Frame Name="MyFrame" />
        </SplitView.Content>
    </SplitView>

When I click on icon1, I go to the page1. Thats ok. but then I have a list there and I want to navigate to a new page showing information of any element in that list. If I do that, I still see the information within the frame. Is it possible to go out and open a new (full window) page? the way I navigate to that new page is: Frame.Navigate(typeof(pages.ContainerDetail));

My problem is that the second page is not shown correctly because the right side is out of the mobile screen due to the hamburger menu.

I don't know if there is another way to do it.

Answer 1

Opening a new Window (WinRT calls them Views) is a little more complex than it should be. This is how it is implemented in Template 10.

https://github.com/Windows-XAML/Template10/blob/master/Template10%20(Library)/Services/NavigationService/NavigationService.cs#L175

public async Task OpenAsync(Type page, object parameter = null, string title = null, ViewSizePreference size = ViewSizePreference.UseHalf)
{
    DebugWrite($"Page: {page}, Parameter: {parameter}, Title: {title}, Size: {size}");

    var currentView = ApplicationView.GetForCurrentView();
    title = title ?? currentView.Title;

    var newView = CoreApplication.CreateNewView();
    var dispatcher = new DispatcherWrapper(newView.Dispatcher);
    await dispatcher.DispatchAsync(async () =>
    {
        var newWindow = Window.Current;
        var newAppView = ApplicationView.GetForCurrentView();
        newAppView.Title = title;

        var nav = BootStrapper.Current.NavigationServiceFactory(BootStrapper.BackButton.Ignore, BootStrapper.ExistingContent.Exclude);
        nav.Navigate(page, parameter);
        newWindow.Content = (nav as INavigationServiceInternal).FrameFacade.Frame;
        newWindow.Activate();

        await ApplicationViewSwitcher
            .TryShowAsStandaloneAsync(newAppView.Id, ViewSizePreference.Default, currentView.Id, size);
    });
}

I hope you can steal the code.

Best of luck.