c# - 如何自定义 XAML 导航视图窗格的外观
问题描述
我有一个带有“顶部”PaneDisplayMode 的 XAML 导航视图控件。
我想增加窗格高度并集中对齐菜单项。
增加 NavigationViewItem 高度不会使窗格更高。并且更改对齐设置不会影响窗格中的菜单项位置。
我怎样才能做到这一点?
<Page ... xmlns:muxc="using:Microsoft.UI.Xaml.Controls" ... >
<Grid>
<muxc:NavigationView x:Name="NavView"
Loaded="NavView_Loaded"
ItemInvoked="NavView_ItemInvoked"
BackRequested="NavView_BackRequested"
PaneDisplayMode="Top">
<muxc:NavigationView.MenuItems>
<muxc:NavigationViewItem Tag="home" Icon="Home" Content="Home"/>
<muxc:NavigationViewItemSeparator/>
<muxc:NavigationViewItemHeader x:Name="MainPagesHeader"
Content="Main pages"/>
<muxc:NavigationViewItem Tag="apps" Content="Apps">
<muxc:NavigationViewItem.Icon>
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph=""/>
</muxc:NavigationViewItem.Icon>
</muxc:NavigationViewItem>
<muxc:NavigationViewItem Tag="games" Content="Games">
<muxc:NavigationViewItem.Icon>
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph=""/>
</muxc:NavigationViewItem.Icon>
</muxc:NavigationViewItem>
<muxc:NavigationViewItem Tag="music" Icon="Audio" Content="Music"/>
</muxc:NavigationView.MenuItems>
<ScrollViewer>
<Frame x:Name="ContentFrame" Padding="12,0,12,24" IsTabStop="True"
NavigationFailed="ContentFrame_NavigationFailed"/>
</ScrollViewer>
</muxc:NavigationView>
</Grid>
</Page>
解决方案
找不到答案,因此通过删除导航视图并自己实现类似的东西来解决它,在这里分享以防其他人处于同一个泡菜中。所以这更像是一种解决方法而不是答案。如果有人提供更好的答案,我会接受。
在 NavigationRoot.xaml 中,我有一个带有用于“窗格”的堆栈面板和用于页面的框架的网格。请注意,按钮的标签与我在导航中使用的页面标签匹配(不要判断)。
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="4*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="Pane" Orientation="Horizontal" HorizontalAlignment="Center" Margin="10">
<ToggleButton x:Name="HomeButton" Content="Home" Tag="home" Click="Button_Click" Width="100" Margin="10"/>
<ToggleButton x:Name="SettingsButton" Content="Settings" Tag="settings" Click="Button_Click" Width="100" Margin="10"/>
</StackPanel>
<Frame Grid.Row="1" x:Name="RootContentFrame"/>
</Grid>
在后面的代码中,我跟踪“CurrentPageTag”并且我有一个页面列表。
private string CurrentPageTag;
// List of ValueTuple holding the Navigation Tag and the relative Navigation Page
private readonly List<(string Tag, Type Page)> _pages = new List<(string Tag, Type Page)>
{
("home", typeof(MainPage)),
("settings", typeof(SettingsPage))
};
在切换按钮的button_click事件中,我得到按钮标签并导航到该页面:
string TargetPageTag = (sender as ToggleButton).Tag.ToString();
//cancel navigation of current and target are the same
if (TargetPageTag == CurrentPageTag)
{
return;
}
else
{
/*
you can check that page can be navigated away from here (form
validation and the like) and exit early if validation fails.
I actually use a global "cancel navigation" variable
that pages can set if they are in an incomplete state
and should not be navigated away from.
*/
//navigate to target page
Type targetPage = _pages.FirstOrDefault(p => p.Tag.Equals(targetPageTag)).Page;
RootContentFrame.Navigate(targetPage);
CurrentPageTag = targetPageTag;
return;
}
这为您提供了基本的“导航视图”之类的功能,实际上代码更少(但无法动态更改窗格布局)。
为简洁起见,我在这里省略的是我必须设置切换按钮的样式以更适合此目的。此外,我让它们更像单选按钮,每次只检查一个。也许单选按钮应该与更多样式一起使用(但我讨厌样式所以走这条路)?
推荐阅读
- python - 获取图中的 X,Y 位置(不在图中)
- c - 操作系统开发,浮点除法问题导致 NaN
- flutter - ChangeNotifier 侦听器和处置。内存泄漏?
- asp.net-core - ModelState.IsValid() 即使在之前的 ModelState 关闭后也不会验证
- go - fabric-sdk-go.beta3 执行 LifecycleApproveCC 失败
- reactjs - 如何解决 npm 缺少脚本:构建和托管我的反应应用程序?
- amazon-s3 - 尝试将冰川深度存档恢复到 s3,但无法使用 mfa 执行此操作
- excel - 如何使用以单元格颜色为基础的if else填充单元格
- android - Android BLE 权限
- neural-network - 如何使用神经网络检测和识别文档信息?