UWP 使用 Live Visual Tree 编辑 NavigationView 设计

Question

我对样式和编辑特定 Fluent Deisgn 效果（例如翻滚高光等）的方式有点费劲。

我发现了实时可视化树，它准确显示了我需要编辑样式的部分（也就是删除它们）。

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

这是我当前的可视化树的图像，突出显示了要删除的部分 ID。我想指出我不知道我在做什么所以请原谅我的无知

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

我有一个 NavigationView，它有一组嵌套在水平堆栈面板中的 AppBarButton。由于 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 中。

UWP 使用 Live Visual Tree 编辑 NavigationView 设计

UWP Using Live Visual Tree to edit NavigationView design

visual-studio

xaml

uwp

uwp-xaml

blend