Inverted Item foreground color

[Jani]

I am using the TreeView control with the default Theme placed on a black background. The foreground color of the content has been set to white. Unfortunately the content is not recognizable while selecting/hovering the Item.

Is there any possibility to have - based on the background color - an inverted foreground color?

For maintenance reasons, a custom theme is not an option.

Cheers,
Jani

[Dimitrina]

Hello Jani,

The best way you can achieve this is to create a custom style of RadTreeViewItem control.
For more information you can follow the link below:
http://www.telerik.com/help/silverlight/radcontrols-for-silverlight-expression-blend-support.html 

If you have further  questions please do not hesitate to ask us.

Regards,
Dimitrina
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[Jani]

Hi Dimitrina,

Many thanks for the link.

Unfortunately it's not than easy to find the settings for the TreeViewItem MouseOver and Selected states. Is there any Tutorial or Walk-through for this topic?

Cheers,
Jani

[Dimitrina]

Hello Jani,

Please, accept our apologies for the late reply. In the attached file you can find a project with a custom theme for RadTreeViewItem.

If you have further  questions please do not hesitate to ask us.

I hope this will help you.

Regards,
Dimitrina
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[Jani]

Hi Dimitrina,

Many Thanks for the Example!

The Example shows me how to change the visual state of the TreeViewItem area. Additional I'm searching for a solution, to convert the Foreground color of the content (e.g. TextBlock) during MouseOver and for selected items.

Thanks Again,
Jani

[Dimitrina]

Hi Jani,

Unfortunately, it is not possible to change the foreground of the RadTreeViewItem because of the ContentPresenter it uses internally. The ContentPresenter itself does not expose a Foreground property.

Greetings,
Dimitrina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Anders]

Well this is an old thread but may as well reply since I faced a similar problem and came up with a workaround.

I wanted the foreground color to be white when selected and otherwise the normal black. Workaround:

First of all I have a ContainerBindingCollection where I bind to the IsSelected property of the TreeViewItem.

Now since the ContentPresenter in the RadTreeViewItem ControlTemplate does not expose a Foreground property I hade to achieve this effect by going to the actual content, which makes sense.

I have HierarchicalDataTemplates. My first idea here was to make a ColorInversionConverter and use that in the binding of the Foreground property on my Textblock in the template. I made a binding to the IsSelected property binding and use the converter, however for some reason I didn't get that to work and did not have much time to investigate why.

So what I came up with was to make two identical TextBlocks, one with white foreground and the other black. Now I only had to control their visibility state by binding their Visibility property to IsSelected and use a boolToVisibilty converter. 

Works like a charm!

[Petar Mladenov]

Hi Jani,

Please excuse us for the late response on this topic. Actually, you can edit the control template of the RadTreeViewItem and replace the ContentPresenter with ContentControl that has Foreground property. This way you will be able to use the visual States of the RadTreeViewItem and supplement them like so:

<VisualState x:Name="Selected">
                       <Storyboard>
                           <ObjectAnimationUsingKeyFrames Duration="0"
                                                          Storyboard.TargetName="SelectionVisual"
                                                          Storyboard.TargetProperty="Visibility">
                               <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                           </ObjectAnimationUsingKeyFrames>

                           <ObjectAnimationUsingKeyFrames Duration="0"
                                                          Storyboard.TargetName="Header"
                                                          Storyboard.TargetProperty="Foreground">
                               <DiscreteObjectKeyFrame KeyTime="0" Value="DeepSkyBlue" />
                           </ObjectAnimationUsingKeyFrames>
                           <ObjectAnimationUsingKeyFrames Duration="0"
                                                          Storyboard.TargetName="EditHeaderElement"
                                                          Storyboard.TargetProperty="Foreground">
                               <DiscreteObjectKeyFrame KeyTime="0" Value="DeepSkyBlue" />
                           </ObjectAnimationUsingKeyFrames>
                       </Storyboard>
                   </VisualState>

You can expect the described approach in the attached sample. Feel free to ask if you need further assistance.


All the best,
Petar Mladenov
the Telerik team

[Anders]

Ah nice, then I don't need my workaround either anymore!