Search code examples
c#xamlwinui-3winui

Unifying NavigationView's Pane and Content Background color

This is what the program looks like after I implemented the x:Key into it. It's almost perfect, I just can't figure out how to make the NavigationPane's expanded form have no background on it, I need it to be transparent because I am overlaying a gradient for the background of the app. If you review the code below you can see I tried using the NavigationViewExpandedPaneBackground key to try and set the opacity and background, but I got no luck as no difference was made. 1

<?xml version="1.0" encoding="utf-8"?>
<winex:WindowEx
    xmlns:winex="using:WinUIEx"
    Width="800"
    Height="500"
    MinHeight="500"
    MinWidth="800"
    x:Class="Hostware.Hostware"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Hostware"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel Background="Orange">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <!--<AdaptiveTrigger MinWindowWidth="{x:Bind nvSample2.CompactModeThresholdWidth}" /> -->
                    </VisualState.StateTriggers>

                    <VisualState.Setters>
                        <Setter Target="sidebar.PaneDisplayMode" Value="LeftCompact"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <!-- For the top nav collapsing to left hamburger sample -->
        

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>


            <NavigationView
                x:Name="sidebar"
                
                Grid.Row="1" Height="485"
                Header="This is Header Text"
                Margin="0" PaneDisplayMode="LeftCompact"
                IsTabStop="False" AlwaysShowHeader="False"
                Background="Orange"
                SelectionChanged="NavigationView_SelectionChanged2"
                OpenPaneLength="150"
                Grid.RowSpan="2"
                IsPaneOpen="True"
                Canvas.ZIndex="0"
                Grid.Column="1"
                IsTitleBarAutoPaddingEnabled="True"
                IsBackButtonVisible="Collapsed">
                <NavigationView.Resources>
                    <!-- This top margin is the height of the custom titleBar -->
                    <Thickness x:Key="NavigationViewContentMargin">0,48,0,0</Thickness>
                    <Thickness x:Key="NavigationViewMinimalContentMargin">0,48,0,0</Thickness>
                    <Thickness x:Key="NavigationViewContentGridBorderThickness">1,1,0,0</Thickness>
                    <SolidColorBrush x:Key="NavigationViewContentBackground" Color="Transparent" />
                    <SolidColorBrush x:Key="NavigationViewExpandedPaneBackground" Opacity="0" Color="Transparent"/>
                  
                    
                    <!-- This is the rounded corner on the Top left of the L Pattern -->
                    <CornerRadius x:Key="NavigationViewContentGridCornerRadius">8,8,8,8</CornerRadius>
                </NavigationView.Resources>

                
                <NavigationView.MenuItems>
                    <NavigationViewItem Content="Menu Item1" Tag="SamplePage1">
                        <NavigationViewItem.Icon>
                            <ImageIcon Source="\Assets\icon_tf.png"></ImageIcon>
                        </NavigationViewItem.Icon>
                    </NavigationViewItem>
                        <NavigationViewItem Content="Menu Item2" Tag="SamplePage2" Icon="Save" />
                    <NavigationViewItem Content="Menu Item3" Tag="SamplePage3" Icon="Refresh" />
                    <NavigationViewItem Content="Menu Item4" Tag="SamplePage4" Icon="Download" />
                </NavigationView.MenuItems>
                <!--<NavigationView.Content> -->
                    <Frame Margin="0,0,0,0" x:Name="contentFrame5" Background="white" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
                <!--</NavigationView.Content> -->
            </NavigationView>
        </Grid>
    </StackPanel>
</winex:WindowEx>
Solution

  • You can override the NavigationViewContentBackground resource which is used for the Content's Background.

    You might also need to override the NavigationViewDefaultPaneBackground resource if the PlaneDisplayMode is LeftCompact or LeftMinimal.

    <NavigationView
    PaneDisplayMode="LeftCompact"
    Background="Orange">
    <NavigationView.Resources>
        <SolidColorBrush
            x:Key="NavigationViewDefaultPaneBackground"
            Color="Orange" />
        <SolidColorBrush
            x:Key="NavigationViewContentBackground"
            Color="Transparent" />
    </NavigationView.Resources>
</NavigationView>

    You can learn about this in the generic.xaml file.