question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Question: How do you set selected and unselcted foreground color for a textblock in a MenuItemTemplate for the NavigationView control?

See original GitHub issue

Is there a way to modify the template textblock behavior based on the navigation view visual state? When the menu item is selected, the text foreground should be black. When the menu item is not selected, the text foreground should be white.

I’ve not been able to figure out how to modify the behavior of the template textbox for the menu items.

      <DataTemplate x:Key="MenuItemTitleTemplate">
            <Grid >
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <TextBlock Text="{Binding MenuItemText}" 
                           Style="{StaticResource NavigationViewItemHeaderTextStyle}" />
            </Grid>
        </DataTemplate>

   <muxc:NavigationView  
            x:Name="nvSubMenu" 
            IsBackButtonVisible="Collapsed"
            IsSettingsVisible="False"
            IsEnabled="True"
            HorizontalAlignment="Left"              
            PaneDisplayMode="Top"
            IsPaneToggleButtonVisible="False"
            AlwaysShowHeader="False"
            IsBackEnabled="False" 
            MenuItemsSource="{Binding list}"
            MenuItemTemplate="{StaticResource MenuItemTitleTemplate}">
        
    </muxc:NavigationView>

@Going-Gone to double-check, do you mean TextBox or TextBlock? You’re using TextBlock in your data template.

Are you also planning on changing the background of the selected menu item to ensure the text remains legible?

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
YuliKlcommented, Aug 25, 2020

If I’m understanding your scenario correctly, the easiest way to achieve this is with light weight styling. Overwrite the brushes defined for NavigationViewItemForeground* resources to use values you prefer. https://github.com/microsoft/microsoft-ui-xaml/blob/4d0baa4cc846de73969953b8e57772e97d8e3149/dev/NavigationView/NavigationView_rs1_themeresources.xaml#L32

0reactions
YuliKlcommented, Aug 26, 2020

Sounds like the question is resolved. Closing.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to set the foreground color of text in NavigationView?
In case you want the initial state of your NavigationViewItem Content and the Icon to be set to Red, you have to set...
Read more >
[UWP] NavigationView items foreground color not working ...
I want to change the font color of the MenuItems for the NavigationView control in my sample application the only issue is that...
Read more >
How to improve app performance when clicking hamburger ...
I 'm using Template 10 for the MVVM and the Hamburger menu in my UWP application. Normally from page to page navigation takes...
Read more >
Change text color of a menu item in UI for WPF
As a workaround, you can change the text color of a RadNavigationViewItem by using a TextBlock and set the text and foreground properties...
Read more >
Bottom navigation - Material Design
This allows you to share selection handling code between the BottomNavigation and NavigationRail view elements. Making bottom navigation accessible. You should ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found