Change SelectedItem Color in .NET3.5 Control

[Jonathan]

Hi

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>
                        </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

[Martin Ivanov]

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