[英]UWP: Navigation View does not fully extend into title bar
In my UWP app, I'm trying to extend the navigation view into title bar.在我的 UWP 应用程序中,我试图将导航视图扩展到标题栏中。 But the problem is it does not reach the title bar like below.
但问题是它没有像下面那样到达标题栏。
What I want is like below.我想要的是像下面这样的。
You can see the "XAML Controls Gallery" and the back button are on the topmost position, in my case they are down.您可以看到“XAML 控件库”和后退按钮位于最上面的 position,在我的例子中它们是关闭的。 And I want to place my "Student Management" beside the back button like in the second image.
我想将我的“学生管理”放在后退按钮旁边,如第二张图片所示。
Below is my code.下面是我的代码。
App.xaml.cs应用程序.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主页.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 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);
}
}
}
Edit: Using WinUI编辑:使用 WinUI
I've tried WinUI to use IsTitleBarAutoPaddingEnabled
described in here .我已尝试使用
IsTitleBarAutoPaddingEnabled
来使用此处描述的 IsTitleBarAutoPaddingEnabled。 But doesn't work.但不起作用。
App.xaml申请.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主页.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>
Above usage, I got the following error.以上用法,我得到以下错误。
Error CS0426
The type name 'NavigationView' does not exist in the type 'Controls'.
When I remove muxc
around the navigation and its children, I got a warning in the IsTitleBarAutoPaddingEnabled
which says The property 'IsTitleBarAutoPaddingEnabled' was not found in type 'NavigationView'.
当我删除导航及其子项周围的
muxc
时,我在IsTitleBarAutoPaddingEnabled
中收到一条警告,其中The property 'IsTitleBarAutoPaddingEnabled' was not found in type 'NavigationView'.
& Unknown member 'IsTitleBarAutoPaddingEnabled' on element 'NavigationView'
and can't run the project. &
Unknown member 'IsTitleBarAutoPaddingEnabled' on element 'NavigationView'
无法运行该项目。
I'm using Microsoft.UI.Xaml
2.5.0.我正在使用
Microsoft.UI.Xaml
2.5.0。 What did I miss?我错过了什么?
You could try to set the Margin
property of the Grid
to let the navigation view extend into title bar.您可以尝试设置
Grid
的Margin
属性,让导航视图扩展到标题栏。 And you could add a TextBlock
control over the NaviagtionView
control to meet your second requirement.您可以在
NaviagtionView
控件上添加一个TextBlock
控件以满足您的第二个要求。
Please check the following code as a reference:请检查以下代码作为参考:
<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>
In addition, there is an easier way to hide the title bar by using the NavigationView
control in WinUI library.此外,还有一种更简单的方法是使用WinUI库中的
NavigationView
控件来隐藏标题栏。 You could set the value of IsTitleBarAutoPaddingEnabled
property to False
in NavigationView
control referring to the document .您可以在
NavigationView
控件中引用文档将IsTitleBarAutoPaddingEnabled
属性的值设置为False
。
For example:例如:
<muxc:NavigationView IsTitleBarAutoPaddingEnabled="False"
x:Name="navView"
……
>
……
</muxc:NavigationView>
Add only property like IsTitleBarAutoPaddingEnabled
to false in muxc:NavigationView
if didn't working so another property doesn't allow to control this property.如果不起作用,则仅在
muxc:NavigationView
中将IsTitleBarAutoPaddingEnabled
之类的属性添加为 false,以便另一个属性不允许控制此属性。
XAML code looks like - XAML 代码看起来像 -
<muxc:NavigationView
...
IsTitleBarAutoPaddingEnabled="False"
... />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.