Inverted Item foreground color

9 posts, 0 answers
  1. Jani
    Jani avatar
    61 posts
    Member since:
    Jan 2008

    Posted 02 Feb 2010 Link to this post

    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
  2. Dimitrina
    Admin
    Dimitrina avatar
    442 posts

    Posted 05 Feb 2010 Link to this post

    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.
  3. DevCraft banner
  4. Jani
    Jani avatar
    61 posts
    Member since:
    Jan 2008

    Posted 05 Feb 2010 Link to this post

    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
  5. Dimitrina
    Admin
    Dimitrina avatar
    442 posts

    Posted 11 Feb 2010 Link to this post

    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.
  6. Jani
    Jani avatar
    61 posts
    Member since:
    Jan 2008

    Posted 12 Feb 2010 Link to this post

    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
  7. Dimitrina
    Admin
    Dimitrina avatar
    442 posts

    Posted 17 Feb 2010 Link to this post

    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.
  8. Anders
    Anders avatar
    8 posts
    Member since:
    Feb 2011

    Posted 01 Mar 2011 Link to this post

    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!

  9. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 03 Mar 2011 Link to this post

    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
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  10. Anders
    Anders avatar
    8 posts
    Member since:
    Feb 2011

    Posted 04 Mar 2011 Link to this post

    Ah nice, then I don't need my workaround either anymore!
Back to Top
DevCraft banner