UWP：导航视图没有完全延伸到标题栏中

Question

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

我想要的是像下面这样的。

您可以看到“XAML 控件库”和后退按钮位于最上面的 position，在我的例子中它们是关闭的。 我想将我的“学生管理”放在后退按钮旁边，如第二张图片所示。

下面是我的代码。

应用程序.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;
}

主页.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

我已尝试使用IsTitleBarAutoPaddingEnabled来使用此处描述的 IsTitleBarAutoPaddingEnabled。 但不起作用。

申请.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>

主页.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。 我错过了什么？

Answer 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控件来隐藏标题栏。 您可以在NavigationView控件中引用文档将IsTitleBarAutoPaddingEnabled属性的值设置为False 。

例如：

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

Answer 2

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

XAML 代码看起来像 -

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