Home > Net >  How to change NavigationView Header when navigating to page?
How to change NavigationView Header when navigating to page?

Time:06-26

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);
        }

CodePudding user response:

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">
  • Related