Tree Item Style

7 posts, 0 answers
  1. Brad
    Brad avatar
    8 posts
    Member since:
    Oct 2008

    Posted 26 Mar 2009 Link to this post

    I am somewhat new to WPF and styling, but I understand most of the basics.

    I have managed to modify the expander as well as a few other items.

    But one simple thing has escaped me - styling the foreground of the RadTreeViewItem.

    This:
    <Style TargetType="{x:Type telerik:RadTreeViewItem}">
       <Setter Property="Foreground" Value="#ffff0000"/>
    </Style>
    is not only not setting the font color, but no items show up.

    Any help?  I'm sure it's simple.

    Also, I second the suggestion for more examples and perhaps more documentation.

    This is my favorite page: http://www.telerik.com/help/wpf/radtreeview-structure.html

    Thanks!


  2. Bobi
    Admin
    Bobi avatar
    513 posts

    Posted 30 Mar 2009 Link to this post

    Hello Brad,

    If you want to change the Foreground of a RadTreeViewItem you have to use ItemContainerStyle property of the RadTreeView:
            <Style TargetType="Telerik:RadTreeViewItem" x:Key="TreeViewItemStyle">
                <Setter Property="Foreground" Value="Green"></Setter>
            </Style>

    <Telerik:RadTreeView x:Name="tree" ItemContainerStyle="{StaticResource TreeViewItemStyle}">
                <Telerik:RadTreeViewItem Header="item1" />
                <Telerik:RadTreeViewItem Header="item2" />
            </Telerik:RadTreeView>

    I hope that this answers your question.

    Sincerely yours,
    Boryana
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Tak
    Tak avatar
    3 posts
    Member since:
    Nov 2013

    Posted 20 Dec 2013 Link to this post

    What can be done in my case? I want to change the foreground color only on the 'IsMouseOver' trigger, but when I hover over a child the parent's foreground changes as well (see attached screenshot).
    I'm using only one HierarchicalDataTemplate because there is no limit in the sub-children (parent - child - subchild - subsubchild - etc).

    Here's the RadTreeView code:
    <telerik:RadTreeView Margin="0,50,0,0" x:Name="catTree" BorderBrush="{x:Null}" IsLineEnabled="True"
                            IsRootLinesEnabled="False" ItemsOptionListType="CheckList" IsEditable="True"
                            IsManipulationEnabled="True" IsDragDropEnabled="True" Checked="catTree_Checked"
                            Unchecked="catTree_Unchecked" DragEnded="catTree_DragEnded" IsOptionElementsEnabled="True" ItemTemplate="{DynamicResource DCM_HierarchicalDataTemplate}" ItemContainerStyle="{DynamicResource DCM_RadTreeViewItemStyle}">
                            <telerik:RadContextMenu.ContextMenu>
                                <telerik:RadContextMenu >
                                    <telerik:RadMenuItem Header="Νέα κατηγορία" Click="m_CategoryAdd_Click" Foreground="#FF333333"/>
                                </telerik:RadContextMenu>
                            </telerik:RadContextMenu.ContextMenu>
                        </telerik:RadTreeView>


    And here's the ItemTemplate and ItemContainerStyle used:
    <HierarchicalDataTemplate x:Key="DCM_HierarchicalDataTemplate" ItemsSource="{Binding ChildrenNodes}">
                <Grid x:Name="container" HorizontalAlignment="Stretch">
                    <StackPanel Orientation="Horizontal">
                        <telerik:RadContextMenu.ContextMenu>
                            <telerik:RadContextMenu ItemsSource="{Binding ItemCategory}" DisplayMemberPath="Title">
                                <telerik:RadMenuItem Header="Επιλογή χρώματος" Foreground="#FF333333">
                                    <telerik:RadColorSelector NoColorVisibility="Collapsed" SelectedColorChanged="RadColorSelector_SelectedColorChanged"/>
                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem Header="Νέα υποκατηγορία" Click="m_CategoryAddSub_Click" Foreground="#FF333333"/>
                                <telerik:RadMenuItem Header="Διαγραφή κατηγορίας" Click="m_CategoryDelete_Click" Foreground="#FF333333"/>
                            </telerik:RadContextMenu>
                        </telerik:RadContextMenu.ContextMenu>
                        <TextBlock x:Name="txt_Title" Text="{Binding Title, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Stretch" />
                        <Rectangle Margin="8,0,0,0" Width="10" Height="10" Stroke="Black" Fill="{Binding ChartColor, Converter={StaticResource colorBrushConv}, Mode=TwoWay}" Panel.ZIndex="10"/>
                    </StackPanel>
                </Grid>
            </HierarchicalDataTemplate>
            <Style x:Key="DCM_RadTreeViewItemStyle" TargetType="{x:Type telerik:RadTreeViewItem}">
                <Setter Property="Foreground" Value="White"/>
                <Setter Property="IsExpanded" Value="True"/>
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Foreground" Value="Black"/>
                    </Trigger>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Foreground" Value="Black"/>
                    </Trigger>
                </Style.Triggers>
            </Style>

    I also tried to put a trigger inside the HierarchicalDataTemplate but the foreground changes when i hover only on the stackpanel, not the whole RadTreeViewItem.
  5. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 25 Dec 2013 Link to this post

    Hello Tak,

    The behavior that you report is expected, because the event that set the IsMouseOver bubbles up the visual tree and it is invoked for each level of the hierarchy because no one (or nothing) handles the event.

    This is why. instead of using triggers you can bind the IsSelected and the Foreground properties of the RadTreeViewItem to properties exposed by your ViewModel. By doing so you will be able to manually change the Foreground property to the desired color when the IsSelected is true.

    Please give this approach a try and let us know if you need any further assistance.

    Regards,
    Pavel R. Pavlov
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  6. Tak
    Tak avatar
    3 posts
    Member since:
    Nov 2013

    Posted 25 Dec 2013 Link to this post

    Hello Pavlov,

    thank you for your reply, but as I mentioned in the beginning of my post I want the Foreground color to change on the IsMouseOver event, I don't care that much for the IsSelected (users will be (un)checking checkboxes rather than selecting items).
    Reason is that when the user hovers over an item for whatever reason, the item's content needs to be readable. That's why I need it to change from white to black on the IsMouseOver.

    So what do you suggest I do when the users hovers over an item?

    PS: The IsSelected trigger seems to be working fine as is, only the selected item's foreground changes without changing it's parent's.
  7. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 30 Dec 2013 Link to this post

    Hello Tak,

    Another approach that can achieve your requirement is to extract the default template of the RadTreeViewItem control. You can use our Setting a Theme article as guide.

    Once the template is extracted you can bind the Foreground property of the ContentControl called "Header" to the desired Brush. If you insist to use the IsMouseOver property, you can use a converter in the binding.

    For your convenience I attached the code needed to achieve your requirement. Please take a look at it and let me know if you have any further questions.

    Regards,
    Pavel R. Pavlov
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  8. Tak
    Tak avatar
    3 posts
    Member since:
    Nov 2013

    Posted 30 Dec 2013 Link to this post

    Thank you very much for your replies Pavlov, I'll see what I can do and I'll let you know if I won't manage!
Back to Top
UI for WPF is Visual Studio 2017 Ready