[英]UWP: Navigation View does not fully extend into title bar
在我的 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。 我錯過了什么?
您可以嘗試設置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>
如果不起作用,則僅在muxc:NavigationView
中將IsTitleBarAutoPaddingEnabled
之類的屬性添加為 false,以便另一個屬性不允許控制此屬性。
XAML 代碼看起來像 -
<muxc:NavigationView
...
IsTitleBarAutoPaddingEnabled="False"
... />
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.