如何更改 NavigationView 顶部面板的高度 [英] How to change height of NavigationView top panel

问题描述

问题

我在 UWP 应用程序中使用 NavigationView，并将 PaneDisplayMode 属性设置为 Top.我添加了一些菜单项，但在调整顶部窗格的高度以适合菜单项时遇到问题.目前，窗格项目正在被裁剪.

我尝试了什么?

我试过调整NavigationView的Height属性，但是对顶部栏的高度没有影响，只是改变了整个高度NavigationView(正如人们所期望的).

代码

这是我当前的 XAML 代码:

<NavigationView.MenuItems><导航视图项内容=项目1"字体大小=60"标签=第1页"/><导航视图项内容=ITEM2"字体大小=60"标签=第2页"/><导航视图项内容＝项目3"字体大小=60"标签=第3页"/></NavigationView.MenuItems></NavigationView>

想要的结果

我想调整顶部窗格的高度，最好只使用 XAML，以便菜单项可以适合并且不会被裁剪.

解决方案

这个问题是由于NavigationViewTopPane的默认高度是40.你设置了NavigationViewItem的FontSize="60"更大.

要解决这个问题，需要编辑NavigationView的ControlTemplate.一个简单的方法是遵循

Problem

I'm using a NavigationView in my UWP application with the the PaneDisplayMode property set to Top. I've added a few menu items, but I'm having trouble adjusting the top pane's height to fit the menu items. At the moment, the pane items are getting cropped.

What Have I Tried?

I've tried to adjust the NavigationView's Height property, but it has no effect on the height of the top bar, only changing the height of the entire NavigationView (as one would expect).

Code

Here is my current XAML code:

<NavigationView
        x:Name="navMain"
        IsBackButtonVisible="Collapsed"
        IsSettingsVisible="False"
        IsTabStop="False"
        PaneDisplayMode="Top">
        <NavigationView.MenuItems>
            <NavigationViewItem
                Content="ITEM 1"
                FontSize="60"
                Tag="Page1" />
            <NavigationViewItem
                Content="ITEM2"
                FontSize="60"
                Tag="Page2" />
            <NavigationViewItem
                Content="ITEM 3"
                FontSize="60"
                Tag="Page3" />
        </NavigationView.MenuItems>
</NavigationView>

Desired Result

I would like to adjust the top pane's height, preferably using only XAML, so that the menu items can fit and not be cropped.

解决方案

This issue is due to the default height of NavigationViewTopPane is 40. You set the FontSize="60" for the NavigationViewItem is too larger.

To solve this issue, you need to edit the ControlTemplate of NavigationView. An easy way is to follow the Use tools to work with themes easily document to edit a copy NavigationView style.

Then, you need to find a Grid named 'TopNavGrid' in the ControlTemplate. The default looks like this <Grid x:Name="TopNavGrid" Height="{ThemeResource NavigationViewTopPaneHeight}" ..., you need to change the height to an appropriate value. For example, <Grid x:Name="TopNavGrid" Height="100" .... Then, the menu items will not be cropped.

这篇关于如何更改 NavigationView 顶部面板的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！