UWP 或 XAML 导航视图突出显示

Question

我正在研究 Universal window 平台。我对导航视图有疑问。

在我的页面中，导航视图有 4 个项目。而且，当我单击按钮时，我想突出显示导航视图项。（例如：当我点击按钮时，我想突出显示第二个导航视图项）（通过增加粗细或闪烁导航视图项的边框颜色等方法）。

但是，我对此一无所知。（如何处理和处理什么..）如果您知道什么或者有什么可以参考的，请告诉我，我将不胜感激。

对不起我糟糕的英语。

Answer 1

一般来说，你可以在 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 被触发时这样做，你可以通过 NavigationView.SelectedItem Property 获取点击的项目。然后您可以更改 NavigationViewItem.

我已经制作了一个非常简单的示例。您可以根据自己的情况调整这些代码。

代码隐藏：

 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>

UWP 或 XAML 导航视图突出显示

UWP or XAML Navigation view highlight

xaml

uwp

navigationview