Change text color of a menu item

[Mats]

Hi

Where can i change the text (content) color of a RadNavigationViewItem?

 

I figured out how to change color of everything else except the text color.

I tried to set foreground color RadNavigationView and RadNavigationViewItem

and i cannot see a style i could set to fit my needs.

 

Please let me know where i can set the color or if i am just blind :)

Thank you in advanced!

 

Cheers,

Mats

[Dimitar Dinev]

Hi Mats,

Thank you for the description.

Upon investigating, I concluded it's a bug. I've logged a bug report, which you can follow. The good news is that the bug is now in testing phase and you can expect it for the internal build next week.

As a workaround, you can change the text color of a RadNavigationViewItem by using a TextBlock and set the text and foreground properties in it.

<telerik:RadNavigationViewItem>
       <TextBlock Text="Test" Foreground="Blue"/>
</telerik:RadNavigationViewItem>

As a gratitude, I'm awarding you with Telerik points.
 
Regards,
Dimitar Dinev
Progress TelerikWant to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.

[Roy]

What about if we are binding the ItemSource property and using a Style resource?  <Setter Property="Foreground" Value="Black" /> is not working...

 

<Window.Resources>         <telerik:StringToGlyphConverter x:Key="StringToGlyphConverter" />         <Style TargetType="telerik:RadNavigationViewItem" >             <Setter Property="Content" Value="{Binding Title}" />             <Setter Property="Foreground" Value="Black" />             <Setter Property="Icon" Value="{Binding IconGlyph}" />             <Setter Property="IconTemplate">                 <Setter.Value>                     <DataTemplate>                         <telerik:RadGlyph Glyph="{Binding Converter={StaticResource StringToGlyphConverter}}" />                     </DataTemplate>                 </Setter.Value>             </Setter>         </Style>         <DataTemplate x:Key="TransitionControlContentTemplate">             <TextBlock Margin="10" Text="{Binding Title}" />         </DataTemplate>     </Window.Resources>

[Vicky]

Hello Roy,

Thanks for the provided code snippet.

Looking at it, I am assuming that you are expecting that the setter for the black Foreground should be applied both to the NavigationViewItem's content and the Icon. However, this setter is only responsible for the item's foreground and not the icon's. If I am guessing correctly about the desired end result (setting black foreground to the icon part), you have two options. Both require setting Foreground to the RadGlyph from the IconTemplate which is present in your code snippet:

• To bind the foreground of the icon to the foreground of the item, you need to make the following slight modification of the style from your snippet:
  
  

  <Style TargetType="telerik:RadNavigationViewItem">
      <Setter Property="Content" Value="{Binding Title}" />
      <Setter Property="Foreground" Value="Black" />
      <Setter Property="Icon" Value="{Binding IconGlyph}" />
      <Setter Property="IconTemplate">
          <Setter.Value>
              <DataTemplate>
                  <telerik:RadGlyph Foreground="{Binding Foreground, RelativeSource={RelativeSource AncestorType=telerik:RadNavigationViewItem}}"
                                      Glyph="{Binding Converter={StaticResource StringToGlyphConverter}}" />
              </DataTemplate>
          </Setter.Value>
      </Setter>
  </Style>

• To set foreground to the icon, different than the foreground of the item, you simply need to replace the above binding with the desired color.

I hope you find the information helpful.
Please, try out the above suggestions and let me know if this is what you're looking for.

Best Regards,
Vicky
Progress Telerik