c# - UWP:导航 View 没有完全延伸到标题栏

Question

在我的 UWP 应用中，我试图将导航 View 扩展到标题栏中。但问题是它没有到​​达标题栏，如下所示。

我想要的是下面这样的。

您可以看到“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;
}

主页.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 使用 IsTitleBarAutoPaddingEnabled，如 here 中所述.但不起作用。

应用.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”。 & 元素“NavigationView”上的未知成员“IsTitleBarAutoPaddingEnabled”，无法运行该项目。

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

Answer 1

您可以尝试设置 Grid 的 Margin 属性，让导航 View 延伸到标题栏。您可以在 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>