Tree Item Style

[Brad]

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!

[Bobi]

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.

[Tak]

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.

[Pavel R. Pavlov]

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

[Tak]

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.

[Pavel R. Pavlov]

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

[Tak]

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!