UWP or XAML Navigation view highlight

Question

I'm studying the Universal window platform. I have a question about the navigation view.

In my page, Navigation view has 4 items. And, when I click the Button, I want to highlight the navigation view item. (ex : When i click the button, I want to highlight the second navigation view item) (through methods such as increasing the thickness or blinking the Color of border of navigation view item).

But, I don't have idea about that. (how handle and what to handle..) I would appreciate it if you could let me know if you know anything or if you have something to refer to.

Sorry to my terrible English.

score 0 · Accepted Answer · answered Sep 01 '21 at 02:59

Generally, you could do this in the NavigationView.ItemInvoked Event. Let's say it's a very simple scenario. When you click on a NavigationViewItem in the NavigationView, the NavigationView.ItemInvoked Event will be fired, you could get the clicked item via NavigationView.SelectedItem Property. Then you could make changes to the NavigationViewItem.

I've made a very simple sample about this. You could adjust these code based on your own scenario.

Code-behind:

 private void nvSample_ItemInvoked(NavigationView sender, NavigationViewItemInvokedEventArgs args)
    {
        //change selected item
        NavigationViewItem selectedItem = nvSample.SelectedItem as NavigationViewItem;
        selectedItem.FontSize = 34;
        // get items
        var items = nvSample.MenuItems;
        //change other items back to normal
        foreach (NavigationViewItem item in items) 
        {
            if (!item.Tag.ToString().Equals(selectedItem.Tag.ToString())) 
            {
                item.FontSize = 20;
            }
        } 


        ContentFrame.Navigate(typeof(HomePage));
    }

Xaml:

 <NavigationView x:Name="nvSample" ItemInvoked="nvSample_ItemInvoked" >
        <NavigationView.MenuItems>
            <NavigationViewItem Icon="Play" Content="Menu Item1" Tag="SamplePage1" FontSize="20" />
            <NavigationViewItem Icon="Save" Content="Menu Item2" Tag="SamplePage2" FontSize="20" />
            <NavigationViewItem Icon="Refresh" Content="Menu Item3" Tag="SamplePage3" FontSize="20"/>
            <NavigationViewItem Icon="Download" Content="Menu Item4" Tag="SamplePage4" FontSize="20" />
        </NavigationView.MenuItems>
        <ScrollViewer>
            <Frame x:Name="ContentFrame" Padding="12,0,12,24" IsTabStop="True"/>
        </ScrollViewer>
    </NavigationView>

Hi. Your answer is perfect. But my question was lacking. In my program, Navigation view and button are not in same Grid. The button means just button element. So when I clicked that button, i want to change the second Navigationviewitem's border to blinking. ( ex, that item's border is change to red color blinking..). Sorry to bother you. But If you know about this, or have idea, can you tell me something? Really Thank you for your answer. — Oeoela, Sep 02 '21 at 15:37
Additionally, I tried the code you comment. But this line "foreach(NavigationViewItem item in items)" throw the InvalidCastException. Is it my fault? — Oeoela, Sep 02 '21 at 15:45
@hong Do you mean you want to change the NavigationViewItem when a button inside the frame page? Could you please update your question with more details about your expected behavior? — Roy Li - MSFT, Sep 03 '21 at 03:09
Oh, I solve this problem by referring to your code. Really thank you. — Oeoela, Sep 03 '21 at 12:26
Oops! I'm a beginner of this community. I did. Thanks a lot. — Oeoela, Sep 06 '21 at 08:55

UWP or XAML Navigation view highlight

1 Answers1