Search code examples
visual-studioxamluwpuwp-xamlblend

UWP Using Live Visual Tree to edit NavigationView design

Im struggling a little bit getitng my head around Styles and the way that you can edit particular Fluent Deisgn effects such as the rollover Highlight etc.

Ive discovered the Live Visual Tree that is displaying exactly the parts that i need to edit the style of (Aka just delete them).

I was wondering if there is a way of interpreting the Live visual tree to be useful when directing the XAML style. It doesn't seem as though you can edit components directly through the visual tree so im a little stuck.

Here is an image of my current visual tree and highlighted the part id like to get rid of. Id like to point out i have no idea what im doing so please excuse the ignoranceenter image description here

As requested, my use case is as follows:

I have a NavigationView that has an set of AppBarButtons nested within a Horizontal Stack Panel. As the Stackpanel is set to a NavigationViewMenuItem, it allows the stackpanel to be selected which i do not want. I want to remove the rectangle, the rollover effect for the stackpanel and only make the buttons selectable and have rollover effects.

Here is the picture for demonstration:

enter image description here

Here is the XAML for the MainPage StackPanel aswell so you get an idea of the layout:

<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/>

Edit for visual styles after Editing a Copy enter image description here

Solution

  • Move your StackPanel ( which has all the buttons stacked horizontally ) from NavigationMenuItem to 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>

    the reason you re getting left selection indicator is because every NavigationMenuItem shows it when it is selected and you have just a toolbar which should not be in NavigationMenuItem.