UWP NavigationView.PaneFooter 翻转问题

Question

PaneFooter 处理导航菜单项的翻转效果的方式有问题。

这是错误

如您所见，ChangeUser 按钮过早地切断了翻转效果，导致看起来很奇怪的突出显示。

我想知道是否有人遇到过这个问题或知道解决方法？

这是我的导航视图 XAML 当前项目

<Page
    x:Class="BS.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:BS"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    RequestedTheme="Dark"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Page.Resources>

    </Page.Resources>
    <Grid>
        <Grid.Resources>
            <AcrylicBrush x:Key="NavigationViewDefaultPaneBackground"
                          BackgroundSource="HostBackdrop"
                          TintColor="#262626"
                          TintOpacity="0.825"
                          FallbackColor="#262626"/>
        </Grid.Resources>
        <NavigationView IsSettingsVisible="False" x:Name="NavView" PaneTitle="Budget Sheet" IsBackButtonVisible="Collapsed" PaneDisplayMode="LeftMinimal" Background="{StaticResource CustomAcrylicDarkBackground}">
            <NavigationView.MenuItems>
                    <StackPanel Orientation="Horizontal" UseLayoutRounding="False">
                        <AppBarButton Icon="Page2" Margin="0, 2, 1, 0" Tag="New_Sheet" HorizontalAlignment="Center"/>
                        <AppBarButton Icon="OpenFile" Margin="1, 2, 0, 0" Tag="Open_Sheet" HorizontalAlignment="Center"/>
                        <AppBarButton Icon="Save" Margin="1, 2, 0, 0" Tag="Save_Sheet" HorizontalAlignment="Center"/>
                        <AppBarButton Icon="Setting" Margin="1, 2, 0, 0" Tag="Settings_Sheet" HorizontalAlignment="Center"/>
                </StackPanel>                
                <NavigationViewItemSeparator/>
                <NavigationViewItem Name="HomeItem" Content="HOME" Tag="HOME_Page" FontSize="22" HorizontalAlignment="Stretch" FontWeight="Bold" Foreground="#b880fc"/>
                <NavigationViewItemSeparator/>
                <NavigationViewItem Name="OverviewItem" Content="OVERVIEW" Tag="OverView_Page" FontSize="22" HorizontalAlignment="Stretch" FontWeight="Bold" Foreground="#b880fc"/>
                <NavigationViewItem Name="BItem" Content="B" Tag="B_Page" FontSize="22" HorizontalAlignment="Stretch" FontWeight="Bold" Foreground="#b880fc"/>
                <NavigationViewItem Name="PItem" Content="P" Tag="BP_Page" FontSize="22" HorizontalAlignment="Stretch" FontWeight="Bold" Foreground="#b880fc"/>
                <NavigationViewItem Name="TItem" Content="T" Tag="T_Page" FontSize="22" HorizontalAlignment="Stretch" FontWeight="Bold" Foreground="#b880fc"/>
                <NavigationViewItem Name="PDItem" Content="PD" Tag="PD_Page" FontSize="22" HorizontalAlignment="Stretch" FontWeight="Bold" Foreground="#b880fc"/>
            </NavigationView.MenuItems>

            <NavigationView.PaneFooter>
                <StackPanel>
                    <NavigationViewItem Style="{ThemeResource NavigationViewTitleHeaderContentControlTextStyle}" Name="ChangePerson" VerticalAlignment="Stretch" Content="Change User" Icon="Contact" Tag="UserChange_Page" FontSize="16" HorizontalAlignment="Center" FontWeight="Bold" Foreground="#b880fc"/>
                </StackPanel>                                 
            </NavigationView.PaneFooter>
        </NavigationView>
    </Grid>
</Page>

Answer 1

您的页脚控件嵌套在 StackPanel 中，它为其添加了额外的填充，因此看起来很奇怪。您有以下解决方案：

删除 Stackpanel 并将 NavigationViewItem 直接添加到页脚并设置页脚的 HorizontalAlignment要拉伸的 NavigationViewItem。
保持堆栈面板不变，只需将页脚 navigationViewitem 的 HorizontalAlignment 更改为 Stretch
我认为最好的解决方案是使用 winui 库的新预览版中提供的新 NavigationView，您可以使用它通过 nuget 并且它的所有控件都具有向后兼容性，直到 Anniversary update for windows 10，因此它将为您解决更多问题应用程序也是如此。在这里了解更多：https://docs.microsoft.com/en-us/uwp/toolkits/winui/

更新

这是一篇博客 post，可了解有关 WinUi https://blogs.windows.com/buildingapps/2018/07/23/windows-ui-library-preview-released/

的更多详细信息

winui 实际上是一个 nuget 库，可以在你的 uwp 应用程序中使用。正如上面博客中提到的，您可以访问 Github 上 xamlUI 示例存储库的开发分支，了解新的 NavigationView 是如何实现的，我相信这会解决您的需求，如果仍然不行，你可以 link 这个 Stack Overflow 问题并在那个 repo 中打开一个问题，我相信团队会帮助你。

UWP NavigationView.PaneFooter 翻转问题

UWP NavigationView.PaneFooter Rollover Issues

c#

uwp

uwp-xaml

更新