Проблема

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

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

Я пытался настроить свойство NavigationView ‘s 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, чтобы элементы меню могли поместиться и не были обрезаны.

Все, что вам нужно сделать, это переопределить NavigationViewTopPaneHeight с помощью облегченного стиля, подобного этому (вам не нужно повторно шаблонировать элемент управления):

 <muxc:NavigationView.Resources>
  <x:Double x:Key="NavigationViewTopPaneHeight">100</x:Double>
</muxc:NavigationView.Resources>
  

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

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

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