时间戳

首页 > 解决方案 > 当 PaneDisplayMode 为 LeftCompact 时，如何让 Frame 折叠和展开？

c# - 当 PaneDisplayMode 为 LeftCompact 时，如何让 Frame 折叠和展开？

问题描述

当我将 PaneDisplayMode 设置为 LeftCompact 时，NavigationPane 会在框架上重叠。我希望它的行为与 PaneDisplayMode 为 Left 时的行为相同。将其设置为 LeftCompact 或 LeftMinimal 会导致导航浮出控件与框架重叠。但是当导航菜单折叠时，Left 会导致 Frame 展开，就像它应该的那样。我想让 LeftCompact 做同样的事情。

<Page
    x:Class="TestApp.NavShell"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:winui="using:Microsoft.UI.Xaml.Controls"
    xmlns:wctoolkit="using:Microsoft.Toolkit.Uwp.UI.Controls"
    xmlns:local="using:TestApp"
    KeyDown="NavShell_KeyDown"
    mc:Ignorable="d"
    Background= "#FF474747">

    <!--"{ThemeResource ApplicationPageBackgroundThemeBrush}     -->
    <Page.Resources>
        
    </Page.Resources>

    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="25"/>
        </Grid.RowDefinitions>

        <!--<Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" MinWidth="50"/>
        </Grid.ColumnDefinitions>-->

        <winui:MenuBar x:Name="MainMenu" Grid.Row="0">
            <winui:MenuBarItem Title="File">
                <MenuFlyoutItem x:Name="ImportMI" Text="Import Things" >
                    <MenuFlyoutItem.KeyboardAccelerators>
                        <KeyboardAccelerator Modifiers="Control" Key="I"/>
                    </MenuFlyoutItem.KeyboardAccelerators>
                </MenuFlyoutItem>
                <MenuFlyoutItem x:Name="ExportMI" Text="Export Things">
                    <MenuFlyoutItem.KeyboardAccelerators>
                        <KeyboardAccelerator Modifiers="Control" Key="E"/>
                    </MenuFlyoutItem.KeyboardAccelerators>
                </MenuFlyoutItem>
                <MenuFlyoutSeparator />
                <MenuFlyoutItem x:Name="ExitMI" Text="Exit">
                    <MenuFlyoutItem.KeyboardAccelerators>
                        <KeyboardAccelerator Modifiers="Windows" Key="X"/>
                    </MenuFlyoutItem.KeyboardAccelerators>
                </MenuFlyoutItem>
            </winui:MenuBarItem>

            <winui:MenuBarItem Title="Edit">
                <MenuFlyoutSeparator />
                <MenuFlyoutItem x:Name="CutMI" Text="Cut" >
                    <MenuFlyoutItem.KeyboardAccelerators>
                        <KeyboardAccelerator Modifiers="Control" Key="X"/>
                    </MenuFlyoutItem.KeyboardAccelerators>
                </MenuFlyoutItem>
                <MenuFlyoutItem x:Name="CopyMI" Text="Copy" >
                    <MenuFlyoutItem.KeyboardAccelerators>
                        <KeyboardAccelerator Modifiers="Control" Key="C"/>
                    </MenuFlyoutItem.KeyboardAccelerators>
                </MenuFlyoutItem>
                <MenuFlyoutItem x:Name="PasteMI" Text="Paste" >
                    <MenuFlyoutItem.KeyboardAccelerators>
                        <KeyboardAccelerator Modifiers="Control" Key="V"/>
                    </MenuFlyoutItem.KeyboardAccelerators>
                </MenuFlyoutItem>
            </winui:MenuBarItem>

            <winui:MenuBarItem Title="Help">
                <MenuFlyoutItem x:Name="HelpAboutMI" Text="About">
                </MenuFlyoutItem>
            </winui:MenuBarItem>
        </winui:MenuBar>

 
        <winui:NavigationView x:Name="navMenu" IsBackEnabled="True" IsBackButtonVisible="Collapsed" PaneDisplayMode="LeftCompact"
                              IsSettingsVisible="True" SelectionChanged="navMenu_SelectionChanged" Header="My Test App"
                              AlwaysShowHeader="True" PaneTitle="Test App" ExpandedModeThresholdWidth="100"
                              SelectionFollowsFocus="Enabled" IsTabStop="False" Grid.Row="1">
            <winui:NavigationView.MenuItems>
                <winui:NavigationViewItem Icon="Home" Content="Things">
                    <winui:NavigationViewItem.MenuItems>
                        <winui:NavigationViewItem Icon="Document" Content="More Things">
                            <winui:NavigationViewItem.MenuItems>
                                <winui:NavigationViewItem>
                                    <winui:NavigationViewItem.Content>
                                        <winui:BitmapIconSource UriSource="NewFolder\Images\Things.png" />
                                    </winui:NavigationViewItem.Content>
                                </winui:NavigationViewItem>
                            </winui:NavigationViewItem.MenuItems>
                        </winui:NavigationViewItem>
                    </winui:NavigationViewItem.MenuItems>
                </winui:NavigationViewItem>
                <winui:NavigationViewItem Icon="Document" Content="Other Things">
                            
                </winui:NavigationViewItem>
            </winui:NavigationView.MenuItems>

            <winui:NavigationView.PaneCustomContent>
                <HyperlinkButton x:Name="PaneHyperlink" Content="More info" Margin="12,0" Visibility="Collapsed" />
            </winui:NavigationView.PaneCustomContent>


            <winui:NavigationView.PaneFooter>
                <StackPanel x:Name="SettingsFooter" Orientation="Vertical" Visibility="Collapsed">
                    <winui:NavigationViewItem Icon="Setting" AutomationProperties.Name="settings" />
                </StackPanel>
            </winui:NavigationView.PaneFooter>

            <Frame x:Name="NavContent" Margin="0, 0, 0, 0">

            </Frame>
        </winui:NavigationView>

    </Grid>
</Page>

标签： c#uwpuwp-navigation

解决方案

我希望它的行为与 PaneDisplayMode 为 Left 时的行为相同。

在 style 中NavigationView，可以设置 DisplayMode属性为inRootSplitView的 name来实现操作。SplitViewNavigationViewCompactInline

请检查以下代码：

  1. 打开Document Outline面板，找到并右键单击 NavigationView navMenu > Edit Template > Edit a Copy。然后默认样式NavigationView将被复制到您的Page.Resource标签并应用于您的NavigationView控件。

  2. 在样式中，找到一个VisualState名字是Compact并添加以下代码：

    <VisualState.Setters>
    <Setter Target="RootSplitView.DisplayMode" Value="CompactInline" />
</VisualState.Setters>

  3. 构建您的项目。

推荐阅读