UWP：导航视图未完全延伸到标题栏答案

【问题标题】：UWP: Navigation View does not fully extend into title barUWP：导航视图未完全延伸到标题栏
【发布时间】：2021-03-21 06:59:19
【问题描述】：

在我的 UWP 应用中，我试图将导航视图扩展到标题栏。但问题是它没有像下面那样到达标题栏。

我想要的如下所示。

您可以看到“XAML 控件库”和后退按钮位于最上面的位置，在我的例子中它们是向下的。我想把我的“学生管理”放在后退按钮旁边，就像第二张图片一样。

下面是我的代码。

App.xaml.cs

OnLaunched () {
    // entends views to the title bar
    var coreTitleBar = 
    Windows.ApplicationModel.Core.CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
    ApplicationViewTitleBar titleBar = ApplicationView.GetForCurrentView().TitleBar;
    titleBar.ButtonBackgroundColor = Colors.Transparent;
    titleBar.ButtonInactiveBackgroundColor = Colors.Transparent;
}

MainPage.xaml

<Page
    x:Class="HelloWorld.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloWorld"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{StaticResource NavigationViewExpandedPaneBackground}"
    >

    <Grid x:Name="AppTitleBar" Background="Transparent">
        <Grid.Resources>
            <AcrylicBrush x:Key="NavigationViewExpandedPaneBackground"
                  BackgroundSource="HostBackdrop"
                  TintColor="AliceBlue"
                  TintOpacity="0.6"
                  FallbackColor="White"/>
        </Grid.Resources>
        <NavigationView 
            x:Name="navView" 
            IsBackEnabled="True" 
            Loaded="NavigationView_Loaded" 
            SelectionChanged="NavigationView_SelectionChanged"
            PaneOpening="navView_PaneOpening"
            IsBackButtonVisible="Visible"
            SelectionFollowsFocus="Disabled"
            Header="Students"
            PaneDisplayMode="Auto"
            Background="{StaticResource SystemChromeWhiteColor}" 
            OpenPaneLength="280" UseLayoutRounding="True" ScrollViewer.VerticalScrollBarVisibility="Auto" FontSize="12" PaneTitle="Student Management"
            >
            <NavigationView.MenuItems>
                <NavigationViewItem Icon="People" Content="Students" Tag="students"/>
                <NavigationViewItem Icon="Bookmarks" Content="Gradings" Tag="gradings"/>
                <NavigationViewItem Icon="ContactInfo" Content="Statistics and Reports" Tag="reports"/>
                <NavigationViewItem Icon="Print" Content="Print" Tag="print"/>
                <NavigationViewItem Icon="Admin" Content="Users" Tag="users"/>
            </NavigationView.MenuItems>

            <ScrollViewer>
                <Frame x:Name="ContentFrame"/>
            </ScrollViewer>
        </NavigationView>
    </Grid>
</Page>

MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Numerics;
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 https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409

namespace HelloWorld
{
    /// <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 NavigationView_Loaded(object sender, RoutedEventArgs e)
        {
            Console.WriteLine("loaded banana ---");
            ContentFrame.Navigate(typeof(Students));
        }

        private void NavigationView_SelectionChanged(NavigationView sender, NavigationViewSelectionChangedEventArgs args)
        {
            Console.WriteLine("changed banana ---");
            if (args.IsSettingsSelected)
            {
                // if you have setting page, load here. 
            }
            else
            {

                NavigationViewItem item = args.SelectedItem as NavigationViewItem;

                switch (item.Tag.ToString())
                {
                    case "students":
                        sender.Header = "Students";
                        ContentFrame.Navigate(typeof(Students));
                        break;
                    case "gradings":
                        sender.Header = "Gradings";
                        ContentFrame.Navigate(typeof(Gradings));
                        break;
                    case "reports":
                        sender.Header = "Reports";
                        ContentFrame.Navigate(typeof(Reports));
                        break;
                    case "print":
                        sender.Header = "Print";
                        ContentFrame.Navigate(typeof(Print));
                        break;
                    case "users":
                        sender.Header = "Users";
                        ContentFrame.Navigate(typeof(Users));
                        break;
                }
            }
        }

        private void navView_PaneOpening(NavigationView sender, object args)
        {
            Console.WriteLine("opening");
            navView.Translation = new Vector3(0, 0, 0);
        }
    }
}

编辑：使用 WinUI

我已经尝试使用 WinUI 来使用 here 中描述的 IsTitleBarAutoPaddingEnabled。但不起作用。

App.xaml

<Application
    x:Class="HelloWorld.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloWorld">
    <Application.Resources>
        <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
    </Application.Resources>
</Application>

MainPage.xaml

<Page
    x:Class="HelloWorld.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloWorld"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls" // <- this is added according to documentation
    mc:Ignorable="d"
    Background="{StaticResource NavigationViewExpandedPaneBackground}"
    >

    <Grid x:Name="AppTitleBar" Background="Transparent">
        <Grid.Resources>
            <AcrylicBrush x:Key="NavigationViewExpandedPaneBackground"
                  BackgroundSource="HostBackdrop"
                  TintColor="AliceBlue"
                  TintOpacity="0.6"
                  FallbackColor="White"/>
        </Grid.Resources>
        <muxc:NavigationView 
            IsTitleBarAutoPaddingEnabled="False"
            x:Name="navView" 
            Loaded="NavigationView_Loaded" 
            SelectionChanged="NavigationView_SelectionChanged"
            PaneOpening="navView_PaneOpening"
            IsBackButtonVisible="Collapsed"
            SelectionFollowsFocus="Disabled"
            Header="Students"
            PaneDisplayMode="Auto"
            Background="{StaticResource SystemChromeWhiteColor}" 
            OpenPaneLength="320" 
            UseLayoutRounding="True" 
            ScrollViewer.VerticalScrollBarVisibility="Auto" 
            FontSize="14"
            PaneTitle="STUDENT MANAGEMENT" 
            CharacterSpacing="20" 
            FontStretch="SemiExpanded" 
            RequestedTheme="Default"
            >
            <muxc:NavigationView.PaneHeader>
                <Image Source="/Assets/logo.png" HorizontalAlignment="Left" Margin="5,5,5,5"></Image>
            </muxc:NavigationView.PaneHeader>
            <muxc:NavigationView.MenuItems>
                <muxc:NavigationViewItem Icon="People" Content="Students" Tag="students" Width="320"/>
                <muxc:NavigationViewItem Icon="Bookmarks" Content="Gradings" Tag="gradings" Width="320"/>
                <muxc:NavigationViewItem Icon="ContactInfo" Content="Statistics and Reports" Tag="reports" Width="320"/>
                <muxc:NavigationViewItem Icon="Print" Content="Print" Tag="print" Width="320"/>
                <muxc:NavigationViewItem Icon="Admin" Content="Users" Tag="users" Width="320"/>
            </muxc:NavigationView.MenuItems>

            <ScrollViewer>
                <Frame x:Name="ContentFrame"/>
            </ScrollViewer>
        </muxc:NavigationView>
    </Grid>
</Page>

上面的用法，我得到了以下错误。

Error   CS0426  
The type name 'NavigationView' does not exist in the type 'Controls'.

当我删除导航及其子项周围的muxc 时，我在IsTitleBarAutoPaddingEnabled 中收到一条警告，上面写着The property 'IsTitleBarAutoPaddingEnabled' was not found in type 'NavigationView'. 和Unknown member 'IsTitleBarAutoPaddingEnabled' on element 'NavigationView'，并且无法运行该项目。

我正在使用Microsoft.UI.Xaml 2.5.0。我错过了什么？

【问题讨论】：

标签： c# xaml uwp desktop-application

【解决方案1】：

您可以尝试设置Grid 的Margin 属性，让导航视图扩展到标题栏。您可以在NaviagtionView 控件上添加TextBlock 控件以满足您的第二个要求。

请检查以下代码作为参考：

<Grid x:Name="AppTitleBar" Background="Transparent" Margin="0,-1,0,0">  <!--Use the Margin with a negative vlue.-->
    <Grid.Resources>
        <AcrylicBrush x:Key="NavigationViewExpandedPaneBackground"
              BackgroundSource="HostBackdrop"
              TintColor="AliceBlue"
              TintOpacity="0.6"
              FallbackColor="White"/>
    </Grid.Resources>

    <NavigationView 
        x:Name="navView" 
        IsBackEnabled="True" 
        Loaded="NavigationView_Loaded" 
        SelectionChanged="NavigationView_SelectionChanged"
        PaneOpening="navView_PaneOpening"
        IsBackButtonVisible="Visible"
        SelectionFollowsFocus="Disabled"
        PaneDisplayMode="Auto"
        Background="{StaticResource SystemChromeWhiteColor}" 
        OpenPaneLength="280" UseLayoutRounding="True" ScrollViewer.VerticalScrollBarVisibility="Auto" FontSize="12"
        >
        <NavigationView.MenuItems>
            <NavigationViewItem Icon="People" Content="Students" Tag="students"/>
            <NavigationViewItem Icon="Bookmarks" Content="Gradings" Tag="gradings"/>
            <NavigationViewItem Icon="ContactInfo" Content="Statistics and Reports" Tag="reports"/>
            <NavigationViewItem Icon="Print" Content="Print" Tag="print"/>
            <NavigationViewItem Icon="Admin" Content="Users" Tag="users"/>
        </NavigationView.MenuItems>

        <ScrollViewer>
            <Frame x:Name="ContentFrame"/>
        </ScrollViewer>
    </NavigationView>
    <!--Add a TextBlock over the NaviagationView control to show a text beside the back button.-->
    <!--Note to put the TextBlock below the NavigationView to prevent the TextBlock from being hidden by the NavigationView.-->
    <TextBlock Text="Student Management" Margin="40,6,0,0"  FontSize="20"/>

</Grid>

此外，通过使用WinUI 库中的NavigationView 控件，还有一种更简单的方法来隐藏标题栏。您可以在引用document 的NavigationView 控件中将IsTitleBarAutoPaddingEnabled 属性的值设置为False。

例如：

<muxc:NavigationView IsTitleBarAutoPaddingEnabled="False"
    x:Name="navView" 
    ……
   >
    ……
 </muxc:NavigationView>

【讨论】：

我使用 WinUI 作为您的建议，因为 Margin 看起来不太好。我已经更新了我的问题。你能看看吗？
您新添加的代码似乎没有问题。您可能需要检查 NavigationView_SelectionChanged 事件处理程序和 navView_PaneOpening 中的参数发送方类型是否为 Microsoft.UI.Xaml.Controls.NavigationView。如果参数发送者的类型是正确的（是 Microsoft.UI.Xaml.Controls.NavigationView），最好能提供一个 OneDrive 或 GitHub 的最小样本进行测试。
非常感谢。这是 - github.com/Fluent-Design-Tester/Navigation-Demo.
我发现解决方案资源管理器中有一个名为Microsoft的文件夹，它覆盖了Microsoft.UI.Xaml.Controls命名空间，导致错误。您需要删除整个 Microsoft 文件夹。注意将与 NavigationView 相关的原始 API 替换为 Microsoft.UI.Xaml.Controls 命名空间下的 API。
您可以在第 9 频道学习面向绝对初学者的 Windows 10 开发视频，或在第 9 频道搜索课程UWP 入门。

【解决方案2】：

如果 muxc:NavigationView 中的 IsTitleBarAutoPaddingEnabled 之类的属性不起作用，则仅将类似 IsTitleBarAutoPaddingEnabled 的属性添加到 false 中，因此另一个属性不允许控制此属性。

XAML 代码看起来像 -

<muxc:NavigationView
    ...
    IsTitleBarAutoPaddingEnabled="False"
    ... />

【讨论】：