This is a migrated thread and some comments may be shown as answers.

Change SelectedItem Color in .NET3.5 Control

1 Answer 206 Views

TreeView

This is a migrated thread and some comments may be shown as answers.

Jonathan asked on 06 Jan 2014, 04:20 PM

For some reason i only able to work with the .NET 3.5 Version of Telerik-Controls.

I'm having a hard time trying to Change the Color of the SelectedItem in a TreeView.

I tried using your sample from another post here. But since the control template used there uses VisualStates, i cannot use it in .NET 3.5.

I have this control:

<UserControl

x:Class="My.Controls.Views.TreeView"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

xmlns:windows="clr-namespace:Telerik.Windows;assembly=Telerik.Windows.Controls"

mc:Ignorable="d"

d:DesignHeight="300" d:DesignWidth="300"

Name="TreeControlView">

<UserControl.Resources>

<Style TargetType="ToggleButton" x:Key="Expander">

<Setter Property="IsTabStop" Value="False" />

<Setter Property="Cursor" Value="Hand" />

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type ToggleButton}">

<ControlTemplate.Triggers>

<Trigger Property="IsMouseOver" Value="True">

<Trigger.EnterActions>

<BeginStoryboard>

<Storyboard>

<DoubleAnimation

Duration="0:0:0.05"

Storyboard.TargetName="Button"

Storyboard.TargetProperty="Opacity" To="0" />

<DoubleAnimation

Duration="0:0:0.05"

Storyboard.TargetName="ButtonOver"

Storyboard.TargetProperty="Opacity" To="1" />

</Storyboard>

</BeginStoryboard>

</Trigger.EnterActions>

</Trigger>

<Trigger Property="IsChecked" Value="True">

<Trigger.EnterActions>

<BeginStoryboard>

<Storyboard>

<DoubleAnimation

Duration="0:0:0.05"

Storyboard.TargetName="CollapsedVisual"

Storyboard.TargetProperty="Opacity" To="0" />

<DoubleAnimation

Duration="0:0:0.05"

Storyboard.TargetName="CollapsedVisualOver"

Storyboard.TargetProperty="Opacity" To="0" />

</Storyboard>

</BeginStoryboard>

</Trigger.EnterActions>

<Trigger.ExitActions>

<BeginStoryboard>

<Storyboard>

<DoubleAnimation

Duration="0:0:0.05"

Storyboard.TargetName="CollapsedVisual"

Storyboard.TargetProperty="Opacity" To="1" />

<DoubleAnimation

Duration="0:0:0.05"

Storyboard.TargetName="CollapsedVisualOver"

Storyboard.TargetProperty="Opacity" To="1" />

</Storyboard>

</BeginStoryboard>

</Trigger.ExitActions>

</Trigger>

</ControlTemplate.Triggers>

<Grid>

<Grid x:Name="Button" Margin="0,7,4,0" HorizontalAlignment="Right" VerticalAlignment="Top" Width="11" Height="11">

<Grid.Background>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#3F047BA5" Offset="0.996" />

<GradientStop Color="#00000000" Offset="0" />

</LinearGradientBrush>

</Grid.Background>

<Rectangle Stroke="#FF000000" HorizontalAlignment="Left" VerticalAlignment="Top" Width="11" Height="11" />

<Rectangle

x:Name="CollapsedVisual" Fill="#FF000000"

HorizontalAlignment="Left" VerticalAlignment="Top"

Width="1" Height="5" Margin="5,3,0,0" />

<Rectangle

Fill="#FF000000" VerticalAlignment="Top"

HorizontalAlignment="Left" Height="1" Width="5"

Margin="3,5,0,0" />

</Grid>

<Grid

x:Name="ButtonOver" Margin="0,7,4,0"

HorizontalAlignment="Right" VerticalAlignment="Top"

Width="11" Height="11">

<Rectangle

Stroke="#FF167497" HorizontalAlignment="Left"

VerticalAlignment="Top" Width="11" Height="11">

<Rectangle.Fill>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#26167497" Offset="1" />

<GradientStop Color="#00167497" Offset="0" />

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

<Rectangle

x:Name="CollapsedVisualOver" Fill="#FF167497"

HorizontalAlignment="Left" VerticalAlignment="Top"

Width="1" Height="5" Margin="5,3,0,0" />

<Rectangle

Fill="#FF167497" VerticalAlignment="Top"

HorizontalAlignment="Left" Height="1" Width="5"

Margin="3,5,0,0" />

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</UserControl.Resources>

<telerik:RadTreeView

x:Name="BaseTreeView"

telerik:TextSearch.TextPath="Header"

ExpanderStyle="{StaticResource Expander}"

IsLoadOnDemandEnabled="False"

IsVirtualizing="True"

telerik:TreeViewPanel.IsVirtualizing="True"

telerik:TreeViewPanel.VirtualizationMode="Hierarchical"

telerik:AnimationManager.IsAnimationEnabled="False" ItemDoubleClick="BaseTreeView_ItemDoubleClick"

>

<telerik:RadTreeView.ContextMenu>

<ContextMenu Name="_treeViewContextMenu">

<MenuItem Header="Expand All" Click="ContextMenuExpandAll" />

<MenuItem Header="Collapse All" Click="ContextMenuCollapseAll" />

<Separator x:Name="_expandCollapseSeparator" x:FieldModifier="private" Visibility="Collapsed" />

<MenuItem x:Name="_expandMenuItem" x:FieldModifier="private" Header="Expand" Click="ContextMenuExpand" Visibility="Collapsed" />

<MenuItem x:Name="_collapseMenuItem" x:FieldModifier="private" Header="Collapse" Click="ContextMenuCollapse" Visibility="Collapsed" />

</ContextMenu>

</telerik:RadTreeView.ContextMenu>

<telerik:RadTreeView.ItemTemplate>

<HierarchicalDataTemplate ItemsSource="{Binding Children}" >

<StackPanel Orientation="Horizontal">

<TextBlock Text="{Binding Header}">

<TextBlock.Style>

<Style TargetType="TextBlock">

<Style.Triggers>

<DataTrigger Binding="{Binding IsTemplateSet, RelativeSource={RelativeSource AncestorType={x:Type views:TreeView}}}" Value="True">

<Setter Property="Visibility" Value="Collapsed" />

</DataTrigger>

</Style.Triggers>

</Style>

</TextBlock.Style>

<ToolTipService.ToolTip>

<ToolTip>

<ToolTip.Content>

<StackPanel Orientation="Horizontal">

<TextBlock Text="{Binding ToolTip}" />

</StackPanel>

</ToolTip.Content>

</ToolTip>

</ToolTipService.ToolTip>

</TextBlock>

<ContentPresenter x:Name="TreeItemContent" Content="{Binding Value}" ContentTemplate="{Binding TreeItemContentTemplate, RelativeSource={RelativeSource AncestorType={x:Type views:TreeView}}}" >

<ContentPresenter.Style>

<Style TargetType="ContentPresenter">

<Style.Triggers>

<DataTrigger Binding="{Binding IsTemplateSet, RelativeSource={RelativeSource AncestorType={x:Type views:TreeView}}}" Value="False">

<Setter Property="Visibility" Value="Collapsed" />

</DataTrigger>

</Style.Triggers>

</Style>

</ContentPresenter.Style>

</ContentPresenter>

</StackPanel>

</HierarchicalDataTemplate>

</telerik:RadTreeView.ItemTemplate>

<telerik:RadTreeView.ItemContainerStyle>

<Style TargetType="telerik:RadTreeViewItem" >

<Setter Property="IsSelected" Value="{Binding Selected, Mode=TwoWay}" />

<Style.Triggers>

<DataTrigger Binding="{Binding IsMarked }" Value="True">

<Setter Property="Background" Value="#F9D381" />

</DataTrigger>

<DataTrigger Binding="{Binding ContainsMarkedItems }" Value="True">

<Setter Property="Background" Value="#F9EBCC" />

</DataTrigger>

</Style.Triggers>

</Style>

</telerik:RadTreeView.ItemContainerStyle>

</telerik:RadTreeView>

</UserControl>

I cannot seem to create a Style for RadTreeViewItem and with a different Color for SelectedItem and set it as BasedOn in the ItemContainerStyle.

Any help would really be appreciated!

Regards

Jonathan

1 Answer, 1 is accepted

answered on 09 Jan 2014, 05:33 PM

RadTreeViewItemControlTemplate.zip

Hi Jonathan,

If you want to change the default color of a selected RadTreeViewItem you will have to edit the default ControlTemplate of the items. The template could be extracted with Microsoft Expression Blend. You can read about that in the Editing Control Templates in Expression Blend tutorial.

For your convenience, I extracted the style and commented the SelectionVisual and the MouseOverVisual Border elements. In order to change the color of the selected item you need to change the Background and the BorderBrush in the Border with x:Name="SelectionVisual" from the control template.

I attached a resource dictionary containing the control template.

Regards,
Martin Ivanov
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 >>