UWP 使用 Live Visual Tree 编辑 NavigationView 设计

Question

我对样式和编辑特定 Fluent Deisgn 效果（如翻转高光等）的方式有点困惑。

我发现了 Live Visual Tree，它准确地显示了我需要编辑样式的部分（也就是删除它们）。

我想知道在指导 XAML 样式时是否有一种解释 Live 可视化树的方法很有用。似乎您不能直接通过可视化树编辑组件，所以我有点卡住了。

这是我当前视觉树的图像，并突出显示了想要摆脱的部分 id。 我想指出我不知道我在做什么所以请原谅无知

根据要求，我的用例如下：

我有一个 NavigationView，它有一组嵌套在水平堆栈面板中的 AppBarButton。由于 Stackpanel 设置为 NavigationViewMenuItem，它允许选择我不想要的 stackpanel。我想删除矩形，堆栈面板的翻转效果，只使按钮可选择并具有翻转效果。

这是演示的图片：

这里也是 MainPage StackPanel 的 XAML，因此您可以了解布局：

<NavigationView.MenuItems>
                <!-- Need to sort out the rollover effect for the toolbar and make it non-selectable. Will resolve later-->
                <StackPanel Orientation="Horizontal" x:Name="AppBarButtons" Tag="AppBarButtonPanel" Visibility="{Binding ElementName=NavView, Path=IsPaneOpen}">
                    <AppBarButton Icon="Page2" Margin="0, 2, 1, 0" Tag="New_Sheet" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="NewFile_ClickAsync" ToolTipService.ToolTip="New Budget"/>
                    <AppBarButton Icon="OpenFile" Margin="1, 2, 0, 0" Tag="Open_Sheet" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="OpenFile_Click" ToolTipService.ToolTip="Open Budget"/>
                    <AppBarButton Icon="Save" Margin="1, 2, 0, 0" Tag="Save_Sheet" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="SaveButton_ClickAsync" ToolTipService.ToolTip="Save Budget"/>
                    <AppBarButton Icon="Setting" Margin="1, 2, 0, 0" Tag="Settings_Page" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="SettingsButton_Click" ToolTipService.ToolTip="Budget Settings"/>
                    <AppBarButton Icon="Calculator" Margin="1, 2, 0, 0" Tag="Calculator_Open" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="CalcButton_ClickAsync" ToolTipService.ToolTip="Open Windows Calculator"/>
                </StackPanel>


                <NavigationViewItemSeparator/>

编辑副本后编辑视觉样式

Answer 1

将您的 StackPanel（所有按钮水平堆叠）从 NavigationMenuItem 移动到 PaneFooter。

<NavigationView.PaneFooter> 
    <StackPanel Orientation="Horizontal" x:Name="AppBarButtons" Tag="AppBarButtonPanel" Visibility="{Binding ElementName=NavView, Path=IsPaneOpen}">
        <AppBarButton Icon="Page2" Margin="0, 2, 1, 0" Tag="New_Sheet" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="NewFile_ClickAsync" ToolTipService.ToolTip="New Budget"/>
        <AppBarButton Icon="OpenFile" Margin="1, 2, 0, 0" Tag="Open_Sheet" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="OpenFile_Click" ToolTipService.ToolTip="Open Budget"/>
        <AppBarButton Icon="Save" Margin="1, 2, 0, 0" Tag="Save_Sheet" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="SaveButton_ClickAsync" ToolTipService.ToolTip="Save Budget"/>
        <AppBarButton Icon="Setting" Margin="1, 2, 0, 0" Tag="Settings_Page" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="SettingsButton_Click" ToolTipService.ToolTip="Budget Settings"/>
        <AppBarButton Icon="Calculator" Margin="1, 2, 0, 0" Tag="Calculator_Open" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="CalcButton_ClickAsync" ToolTipService.ToolTip="Open Windows Calculator"/>
    </StackPanel>
</NavigationView.PaneFooter>

您获得左侧选择指示器的原因是因为每个 NavigationMenuItem 在被选中时都会显示它，而您只有一个不应出现在 NavigationMenuItem 中的工具栏。