UWP使用实时可视树编辑NavigationView设计

Question

我正在努力探索Styles以及你可以编辑特定Fluent Design效果的方式，例如翻转亮点等。

我发现了Live Visual Tree，它正好显示了我需要编辑样式的部分（Aka只是删除它们）。

我想知道在指导XAML样式时是否有一种解释Live可视化树的方法。看起来好像你不能直接通过可视化树编辑组件所以我有点卡住了。

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

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

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

这是演示图片：

这是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中的工具栏。