How to change NavigationView Header when navigating to page? - xaml

Question

The goal I'm trying to accomplish here is to change the NavigationView Header property when I press a NavigationView MenuItem, where it switches to a different page. I want the header to display the text on the button that was pressed but I'm very much learning to use the WinUI/XAML library still and looking at the gallery and documentation isn't really helping.
NavigationView.MenuItems on MainPage.xaml
<muxc:NavigationView.MenuItems>
<muxc:NavigationViewItem Icon="Home" Content="Home" x:Name="Menu1Item" Tag="Page1"/>
<muxc:NavigationViewItem Icon="Contact" Content="Account" x:Name="Menu2Item" Tag="Page2"/>
<muxc:NavigationViewItem Icon="Bullets" Content="Attendance" x:Name="Menu3Item" Tag="Page3"/>
<muxc:NavigationViewItem Icon="Library" Content="Grades" x:Name="Menu4Item" Tag="Page4"/>
<muxc:NavigationViewItem Icon="Flag" Content="Grad Reqs" x:Name="Menu5Item" Tag="Page5"/>
</muxc:NavigationView.MenuItems>
https://i.stack.imgur.com/ZeNdf.png
https://i.stack.imgur.com/t7eEj.png
EDIT:
MainPage.xaml:
<Page
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
x:Class="ProjectHurricanes.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ProjectHurricanes"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
muxc:BackdropMaterial.ApplyToRootOrPageBackground="True"
>
<Page.Resources>
<!--This top margin is the height of the custom TitleBar-->
<Thickness x:Key="NavigationViewContentMargin">0,48,0,0</Thickness>
</Page.Resources>
<Grid>
<Border x:Name="AppTitleBar"
IsHitTestVisible="True"
VerticalAlignment="Top"
Background="Transparent"
Height="40"
Canvas.ZIndex="1"
Margin="48,8,0,0">
<StackPanel Orientation="Horizontal">
<Image x:Name="AppFontIcon"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Source="Assets/Square44x44Logo.png"
Width="16"
Height="16"/>
<TextBlock x:Name="AppTitle"
Text="Project"
VerticalAlignment="Center"
Margin="12, 0, 0, 0"
Style="{StaticResource CaptionTextBlockStyle}" />
</StackPanel>
</Border>
<muxc:NavigationView x:Name="NavigationViewControl"
IsTitleBarAutoPaddingEnabled="False"
IsBackButtonVisible="Visible"
Header="Home"
DisplayModeChanged="NavigationViewControl_DisplayModeChanged"
SelectionFollowsFocus="Enabled"
ItemInvoked="NavigationView_ItemInvoked"
PaneDisplayMode="Left"
Canvas.ZIndex="0">
<muxc:NavigationView.MenuItems>
<muxc:NavigationViewItem Icon="Home" Content="Home" x:Name="Menu1Item" Tag="Page1"/>
<muxc:NavigationViewItem Icon="Contact" Content="Account" x:Name="Menu2Item" Tag="Page2"/>
<muxc:NavigationViewItem Icon="Bullets" Content="Attendance" x:Name="Menu3Item" Tag="Page3"/>
<muxc:NavigationViewItem Icon="Library" Content="Grades" x:Name="Menu4Item" Tag="Page4"/>
<muxc:NavigationViewItem Icon="Flag" Content="Grad Reqs" x:Name="Menu5Item" Tag="Page5"/>
</muxc:NavigationView.MenuItems>
<Grid Padding="20">
<Frame x:Name="rootFrame"/>
</Grid>
</muxc:NavigationView>
</Grid>
</Page>
MainPage.xaml.cs:
OnItemInvoked:
private void NavigationView_OnItemInvoked(Microsoft.UI.Xaml.Controls.NavigationView sender, Microsoft.UI.Xaml.Controls.NavigationViewItemInvokedEventArgs args)
{
FrameNavigationOptions navOptions = new FrameNavigationOptions();
navOptions.TransitionInfoOverride = args.RecommendedNavigationTransitionInfo;
#pragma warning disable IDE0007 // Use implicit type
string navItemTag = args.InvokedItemContainer.Tag.ToString();
#pragma warning restore IDE0007 // Use implicit type
Type pageType = null;
if (navItemTag == "Page1")
{
pageType = typeof(Page1);
}
else if (navItemTag == "Page2")
{
pageType = typeof(Page2);
}
else if (navItemTag == "Page3")
{
pageType = typeof(Page3);
}
else if (navItemTag == "Page4")
{
pageType = typeof(Page4);
}
else if (navItemTag == "Page5")
{
pageType = typeof(Page5);
}
if (pageType == null)
{
return;
}
rootFrame.NavigateToType(pageType, null, navOptions);
}

Answer 1

You can add the ItemInvoked event to your NavigationView and in the event you can simple get the Content of the selected item.
An using-directive to muxc
using muxc = Microsoft.UI.Xaml.Controls;
The event in your MainPage.xaml.cs
private void NavigationView_ItemInvoked(Microsoft.UI.Xaml.Controls.NavigationView sender, Microsoft.UI.Xaml.Controls.NavigationViewItemInvokedEventArgs args)
{
if (NavigationView.SelectedItem is muxc.NavigationViewItem item)
{
sender.Header = item.Content.ToString();
}
}
The event added to your NavigationView
<muxc:NavigationView ItemInvoked="NavigationView_ItemInvoked" x:Name="NavigationView">