Как изменить высоту верхней панели NavigationView

Question

Проблема

Я использую NavigationView в своем приложении UWP со свойством PaneDisplayMode, установленным на Top.Я добавил несколько пунктов меню, но у меня возникают проблемы с настройкой высоты верхней панели, чтобы она соответствовала элементам меню.В данный момент элементы панели обрезаются.

Что я пробовал?

Я пытался настроить свойство NavigationView Height, но оно не действуетна высоте верхней панели, только изменяя высоту всего NavigationView (как и следовало ожидать).

Код

Вот мой текущий код XAML:

<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>

Желаемый результат

Я хотел бы отрегулировать высоту верхней панели , предпочтительно, используя только XAML , чтобы элементы меню могли поместиться и не обрезаться.

Answer 1

Эта проблема связана с тем, что высота NavigationViewTopPane по умолчанию равна 40. Вы устанавливаете FontSize="60" для NavigationViewItem слишком большого размера.

Чтобы решить эту проблему, необходимо отредактировать ControlTemplate NavigationView.Простой способ заключается в том, чтобы следовать Использовать инструменты для простой работы с темами документ для редактирования копии стиля NavigationView.

Затем вам нужно найти сетку с именем «TopNavGrid» в ControlTemplate.По умолчанию выглядит так: <Grid x:Name="TopNavGrid" Height="{ThemeResource NavigationViewTopPaneHeight}" ..., вам нужно изменить высоту на соответствующее значение.Например, <Grid x:Name="TopNavGrid" Height="100" ....Тогда пункты меню не будут обрезаны.