CODEWITHSUNDEEP
c#uwpuwp-xaml
Batteredburrito
Batteredburrito

Reputation: 589

UWP NavigationView.PaneFooter Rollover Issues

Got an issue with the way the PaneFooter is handling rollover effects for Navigation Menu Items.

Heres the Bug enter image description here

As you can see, the ChangeUser button is cutting off the rollover effect prematurely leading to an odd looking highlight.

I was wondering if anyones come across this or knows a fix?

Heres my projects current XAML for the Nav View

<Page
    x:Class="BS.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:BS"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    RequestedTheme="Dark"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Page.Resources>

    </Page.Resources>
    <Grid>
        <Grid.Resources>
            <AcrylicBrush x:Key="NavigationViewDefaultPaneBackground"
                          BackgroundSource="HostBackdrop"
                          TintColor="#262626"
                          TintOpacity="0.825"
                          FallbackColor="#262626"/>
        </Grid.Resources>
        <NavigationView IsSettingsVisible="False" x:Name="NavView" PaneTitle="Budget Sheet" IsBackButtonVisible="Collapsed" PaneDisplayMode="LeftMinimal" Background="{StaticResource CustomAcrylicDarkBackground}">
            <NavigationView.MenuItems>
                    <StackPanel Orientation="Horizontal" UseLayoutRounding="False">
                        <AppBarButton Icon="Page2" Margin="0, 2, 1, 0" Tag="New_Sheet" HorizontalAlignment="Center"/>
                        <AppBarButton Icon="OpenFile" Margin="1, 2, 0, 0" Tag="Open_Sheet" HorizontalAlignment="Center"/>
                        <AppBarButton Icon="Save" Margin="1, 2, 0, 0" Tag="Save_Sheet" HorizontalAlignment="Center"/>
                        <AppBarButton Icon="Setting" Margin="1, 2, 0, 0" Tag="Settings_Sheet" HorizontalAlignment="Center"/>
                </StackPanel>                
                <NavigationViewItemSeparator/>
                <NavigationViewItem Name="HomeItem" Content="HOME" Tag="HOME_Page" FontSize="22" HorizontalAlignment="Stretch" FontWeight="Bold" Foreground="#b880fc"/>
                <NavigationViewItemSeparator/>
                <NavigationViewItem Name="OverviewItem" Content="OVERVIEW" Tag="OverView_Page" FontSize="22" HorizontalAlignment="Stretch" FontWeight="Bold" Foreground="#b880fc"/>
                <NavigationViewItem Name="BItem" Content="B" Tag="B_Page" FontSize="22" HorizontalAlignment="Stretch" FontWeight="Bold" Foreground="#b880fc"/>
                <NavigationViewItem Name="PItem" Content="P" Tag="BP_Page" FontSize="22" HorizontalAlignment="Stretch" FontWeight="Bold" Foreground="#b880fc"/>
                <NavigationViewItem Name="TItem" Content="T" Tag="T_Page" FontSize="22" HorizontalAlignment="Stretch" FontWeight="Bold" Foreground="#b880fc"/>
                <NavigationViewItem Name="PDItem" Content="PD" Tag="PD_Page" FontSize="22" HorizontalAlignment="Stretch" FontWeight="Bold" Foreground="#b880fc"/>
            </NavigationView.MenuItems>

            <NavigationView.PaneFooter>
                <StackPanel>
                    <NavigationViewItem Style="{ThemeResource NavigationViewTitleHeaderContentControlTextStyle}" Name="ChangePerson" VerticalAlignment="Stretch" Content="Change User" Icon="Contact" Tag="UserChange_Page" FontSize="16" HorizontalAlignment="Center" FontWeight="Bold" Foreground="#b880fc"/>
                </StackPanel>                                 
            </NavigationView.PaneFooter>
        </NavigationView>
    </Grid>
</Page>

Upvotes: 1

Views: 826

Answers (1)

Muhammad Touseef
Muhammad Touseef

Reputation: 4455

Your footer control is nested inside a StackPanel, which is adding extra padding to it and hence making it look odd. You have following solutions:

  1. remove Stackpanel and add NavigationViewItem directly to the footer and set HorizontalAlignment of your footer NavigationViewItem to Stretch.
  2. keep the stackpanel the way it is and just change the HorizontalAlignment of your footer navigationViewitem to Stretch
  3. best solution in my opinion would be to use the new NavigationView provided in the new preview release of winui library, you can use it through nuget and all of its controls have backwards compatibility until Anniversary update for windows 10, so it will solve more problems for your app as well. learn more here : https://learn.microsoft.com/en-us/uwp/toolkits/winui/

Update

Here is a blog post for further details about WinUi https://blogs.windows.com/buildingapps/2018/07/23/windows-ui-library-preview-released/

winui is actually a nuget library which can be used in your uwp app. and as mentioned in the blog above, you can visit the dev branch of xamlUI samples repo on Github to see how new NavigationView is implemented, I am sure that will solve your needs, and if it still doesn't you can link this Stack Overflow question and open an issue in that repo and I am sure the team will help you.

Upvotes: 1

Related Questions