在 UWP 中离开汉堡包框架 [英] Leaving the hamburger frame in UWP

问题描述

我是 UWP 开发的新手.我正在尝试制作一个简单的应用程序来显示一些数据.我为我的应用程序的第一部分创建了一个汉堡菜单，它运行良好.但是，在您选择一个页面后，它会显示在我使用 SplitViews 创建的汉堡菜单中的框架上.

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>

当我点击 icon1 时，我会转到 page1.没关系.但后来我有一个列表，我想导航到一个新页面，显示该列表中任何元素的信息.如果我这样做，我仍然会看到框架内的信息.是否可以出去打开一个新的(全窗口)页面?我导航到那个新页面的方式是:Frame.Navigate(typeof(pages.ContainerDetail));

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.

推荐答案

打开一个新窗口(WinRT 称其为视图")比应有的要复杂一些.这就是它在模板 10 中的实现方式.

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);
    });
}

我希望你能窃取代码.

祝你好运.

这篇关于在 UWP 中离开汉堡包框架的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！