那些遇到过的问题

UWP：导航视图未完全扩展到标题栏

Hni*_*nin 2 c# xaml desktop-application uwp

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

标题栏未占全高

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

在此输入图像描述

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

下面是我的代码。

应用程序.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;
}
Run Code Online (Sandbox Code Playgroud)

主页.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>
Run Code Online (Sandbox Code Playgroud)

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);
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

编辑：使用 WinUI

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

应用程序.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>
Run Code Online (Sandbox Code Playgroud)

主页.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>
Run Code Online (Sandbox Code Playgroud)

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

Error   CS0426  
The type name 'NavigationView' does not exist in the type 'Controls'.
Run Code Online (Sandbox Code Playgroud)

当我删除muxc导航及其子项时，我收到一条警告，其中IsTitleBarAutoPaddingEnabled显示The property 'IsTitleBarAutoPaddingEnabled' was not found in type 'NavigationView'.&Unknown member 'IsTitleBarAutoPaddingEnabled' on element 'NavigationView'并且无法运行该项目。

我用的是Microsoft.UI.Xaml2.5.0。我错过了什么？

小智 5

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

\n

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

\n
<Grid x:Name="AppTitleBar" Background="Transparent" Margin="0,-1,0,0">  <!--Use the Margin with a negative vlue.-->\n    <Grid.Resources>\n        <AcrylicBrush x:Key="NavigationViewExpandedPaneBackground"\n              BackgroundSource="HostBackdrop"\n              TintColor="AliceBlue"\n              TintOpacity="0.6"\n              FallbackColor="White"/>\n    </Grid.Resources>\n\n    <NavigationView \n        x:Name="navView" \n        IsBackEnabled="True" \n        Loaded="NavigationView_Loaded" \n        SelectionChanged="NavigationView_SelectionChanged"\n        PaneOpening="navView_PaneOpening"\n        IsBackButtonVisible="Visible"\n        SelectionFollowsFocus="Disabled"\n        PaneDisplayMode="Auto"\n        Background="{StaticResource SystemChromeWhiteColor}" \n        OpenPaneLength="280" UseLayoutRounding="True" ScrollViewer.VerticalScrollBarVisibility="Auto" FontSize="12"\n        >\n        <NavigationView.MenuItems>\n            <NavigationViewItem Icon="People" Content="Students" Tag="students"/>\n            <NavigationViewItem Icon="Bookmarks" Content="Gradings" Tag="gradings"/>\n            <NavigationViewItem Icon="ContactInfo" Content="Statistics and Reports" Tag="reports"/>\n            <NavigationViewItem Icon="Print" Content="Print" Tag="print"/>\n            <NavigationViewItem Icon="Admin" Content="Users" Tag="users"/>\n        </NavigationView.MenuItems>\n\n        <ScrollViewer>\n            <Frame x:Name="ContentFrame"/>\n        </ScrollViewer>\n    </NavigationView>\n    <!--Add a TextBlock over the NaviagationView control to show a text beside the back button.-->\n    <!--Note to put the TextBlock below the NavigationView to prevent the TextBlock from being hidden by the NavigationView.-->\n    <TextBlock Text="Student Management" Margin="40,6,0,0"  FontSize="20"/>\n\n</Grid>\n
Run Code Online (Sandbox Code Playgroud)\n

另外，还有一种更简单的方法来隐藏标题栏，即使用WinUINavigationView库中的控件。您可以参考文档将属性值设置为in control 。IsTitleBarAutoPaddingEnabledFalseNavigationView

\n

例如：

\n
<muxc:NavigationView IsTitleBarAutoPaddingEnabled="False"\n    x:Name="navView" \n    \xe2\x80\xa6\xe2\x80\xa6\n   >\n    \xe2\x80\xa6\xe2\x80\xa6\n </muxc:NavigationView>\n
Run Code Online (Sandbox Code Playgroud)\n

归档时间：

查看次数：

1819 次

最近记录：

3 年，11 月 前
相关归档
将JSON反序列化为C#动态对象？ 919
有没有关于开发C#编码标准/最佳实践文档的建议？ 159
ReaderWriterLockSlim什么时候比简单的锁更好？ 74
Asp.Net WebApi2使CORS不能与AspNet.WebApi.Cors 5.2.3一起使用 71
"命名空间不能直接包含Net.Reflector中的成员,如字段或方法" 54
模型在MVVM中的作用 38
无法在通用Windows或WPF应用程序中引用.NET Core类库 10
F#interactive中的Windows UI(UWP或8.1) 5
Windows UWP 蓝牙应用程序，即使关闭电源，设备也会在扫描时显示 5
当存在基于触发器隐藏显示元素的复杂数据模板时,我的ListView或ListBox控件大小不会缩小？ 3
难疑归档
Java中的public,protected,package-private和private有什么区别？ 3004
你如何设置,清除和切换一个位？ 2454
需要一个没有任何子弹的无序列表 2408
JavaScript对象的长度 2224
在单个SQL查询中插入多行？ 1604
ORM(对象关系映射)中的"N + 1选择问题"是什么？ 1507
我应该在哪里将<script>标记放在HTML标记中？ 1392
如何查看Git提交中的更改？ 1364
如何在JavaScript正则表达式中访问匹配的组？ 1277
功能编程是否取代了GoF设计模式？ 1028