UWP：导航视图没有完全延伸到标题栏
UWP: Navigation View does not fully extend into title bar
在我的 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 及其 children 时，我在 IsTitleBarAutoPaddingEnabled 中收到一条警告，上面写着 The property 'IsTitleBarAutoPaddingEnabled' was not found in type 'NavigationView'. & Unknown member 'IsTitleBarAutoPaddingEnabled' on element 'NavigationView' 并且可以运行 项目。
我正在使用 Microsoft.UI.Xaml 2.5.0。我错过了什么？
您可以尝试设置 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 library. You could set the value of IsTitleBarAutoPaddingEnabled property to False in NavigationView control referring to the document 中的 NavigationView 控件可以更轻松地隐藏标题栏。
例如：
<muxc:NavigationView IsTitleBarAutoPaddingEnabled="False"
x:Name="navView"
……
>
……
</muxc:NavigationView>
在 muxc:NavigationView 中仅将 属性 之类的 IsTitleBarAutoPaddingEnabled 添加到 false 中，如果不起作用，则另一个 属性 不允许控制此 属性 .
XAML 代码看起来像 -
<muxc:NavigationView
...
IsTitleBarAutoPaddingEnabled="False"
... />
在我的 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 及其 children 时，我在 IsTitleBarAutoPaddingEnabled 中收到一条警告，上面写着 The property 'IsTitleBarAutoPaddingEnabled' was not found in type 'NavigationView'. & Unknown member 'IsTitleBarAutoPaddingEnabled' on element 'NavigationView' 并且可以运行 项目。
我正在使用 Microsoft.UI.Xaml 2.5.0。我错过了什么？
您可以尝试设置 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 library. You could set the value of IsTitleBarAutoPaddingEnabled property to False in NavigationView control referring to the document 中的 NavigationView 控件可以更轻松地隐藏标题栏。
例如：
<muxc:NavigationView IsTitleBarAutoPaddingEnabled="False"
x:Name="navView"
……
>
……
</muxc:NavigationView>
在 muxc:NavigationView 中仅将 属性 之类的 IsTitleBarAutoPaddingEnabled 添加到 false 中，如果不起作用，则另一个 属性 不允许控制此 属性 .
XAML 代码看起来像 -
<muxc:NavigationView
...
IsTitleBarAutoPaddingEnabled="False"
... />