Selected item color

[Ed]

Hello,

When I click on a tree item, the node becomes orange with a dotted line around it. This is nice. However, when I programmatically select an item via the IsSelected or SelectedItem properties, the node becomes light grey, which is a bit less easy to see.
 
Is this a different type of selection? How can I make it look exactly the same as clicking an item with the mouse?

Thank you

Ed

[Petar Mladenov]

Hello Ed,

 When you click a RadTreeViewItem with mouse you both select it and focus it. Then it is in SelectedFocused visual state. But when you select it in code behind, it goes in SelectedUnfocused visual state. So you can either change the default RadTreeViewItem's Style and make this states equal or try to invoke the Focus() method in code behind after selection.

All the best,
Petar Mladenov
the Telerik team

[Ed]

Hi Petar,

Thanks very much for your response. I tried invoking Focus() in the SelectionChanged event handler, but the color remained light grey.

Would you mind posting the RadTreeViewItem style here so that I can modify it? I don't have Expression Blend. I found a version of the style online but the colors are different.

Many thanks

Ed

[Lancelot]

Hi Ed,

Here is an extracted ControlTemplate and ItemTemplate for RadTreeView and a RadTreeViewItem (RadTreeViewItemStyle1).
Good Luck!
Lancelot

<UserControl.Resources>
        <DataTemplate x:Key="DataTemplate1">
            <TextBox Foreground="Red" />
        </DataTemplate>
        <SolidColorBrush x:Key="ControlSubItem_OuterBorder_MouseOver" Color="#FFFFC92B"/>
        <Thickness x:Key="ControlSubItem_OuterBorderThickness">1</Thickness>
        <SolidColorBrush x:Key="ControlSubItem_InnerBorder_MouseOver" Color="#FFFFFFFF"/>
        <Thickness x:Key="ControlSubItem_InnerBorderThickness">1</Thickness>
        <LinearGradientBrush x:Key="ControlSubItem_Background_MouseOver" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFFFBA3" Offset="1"/>
            <GradientStop Color="#FFFFFBDA" Offset="0"/>
        </LinearGradientBrush>
        <CornerRadius x:Key="ControlSubItem_InnerCornerRadius">0</CornerRadius>
        <CornerRadius x:Key="ControlSubItem_OuterCornerRadius">1</CornerRadius>
        <SolidColorBrush x:Key="ControlSubItem_OuterBorder_UnFocus" Color="#FFdbdbdb"/>
        <SolidColorBrush x:Key="ControlSubItem_InnerBorder_UnFocus" Color="Transparent"/>
        <LinearGradientBrush x:Key="ControlSubItem_Background_UnFocus" EndPoint="0,1">
            <GradientStop Color="#FFf8f6f9" Offset="0"/>
            <GradientStop Color="#FFf0f0f0" Offset="1"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="ControlSubItem_OuterBorder_Selected" Color="#FFFFC92B"/>
        <SolidColorBrush x:Key="ControlSubItem_InnerBorder_Selected" Color="#FFFFFFFF"/>
        <LinearGradientBrush x:Key="ControlSubItem_Background_Selected" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFCE79F" Offset="1"/>
            <GradientStop Color="#FFFDD3A8"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="TreeView_LineColor" Color="#FFCCCCCC"/>
        <telerik:Office_BlackTheme x:Key="Theme"/>
        <SolidColorBrush x:Key="FocusBrushBlack" Color="#FF000000"/>
        <ControlTemplate x:Key="TreeViewItemDefaultTemplate" TargetType="telerik:RadTreeViewItem">
            <Grid x:Name="RootElement">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="EditStates">
                        <VisualState x:Name="Display"/>
                        <VisualState x:Name="Edit">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="EditHeaderElement">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Header">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Collapsed</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal"/>
                        <VisualState x:Name="Disabled">
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:0.0" To="0.35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Header"/>
                                <DoubleAnimation Duration="0:0:0.0" To="0.35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Image"/>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="MouseOver">
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:0.1" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual"/>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="SelectionStates">
                        <VisualState x:Name="Unselected"/>
                        <VisualState x:Name="Selected">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="SelectionVisual">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="SelectedUnfocused">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="SelectionUnfocusedVisual">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="LoadingOnDemandStates">
                        <VisualState x:Name="LoadingOnDemand">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="LoadingVisual">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Expander">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Collapsed</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <DoubleAnimation Duration="0:0:1" From="0" RepeatBehavior="Forever" To="359" Storyboard.TargetProperty="Angle" Storyboard.TargetName="LoadingVisualAngleTransform"/>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="LoadingOnDemandReverse"/>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="FocusStates">
                        <VisualState x:Name="Focused">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisual">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Unfocused"/>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="ExpandStates">
                        <VisualState x:Name="Expanded">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ItemsHost">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Collapsed"/>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Grid x:Name="HeaderRow" Background="Transparent" MinHeight="{TemplateBinding MinHeight}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="2"/>
                    <Border x:Name="MouseOverVisual" BorderBrush="{StaticResource ControlSubItem_OuterBorder_MouseOver}" BorderThickness="{StaticResource ControlSubItem_OuterBorderThickness}" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="{StaticResource ControlSubItem_OuterCornerRadius}" Opacity="0">
                        <Border BorderBrush="{StaticResource ControlSubItem_InnerBorder_MouseOver}" BorderThickness="{StaticResource ControlSubItem_InnerBorderThickness}" Background="{StaticResource ControlSubItem_Background_MouseOver}" CornerRadius="{StaticResource ControlSubItem_InnerCornerRadius}"/>
                    </Border>
                    <Border x:Name="SelectionUnfocusedVisual" BorderBrush="{StaticResource ControlSubItem_OuterBorder_UnFocus}" BorderThickness="{StaticResource ControlSubItem_OuterBorderThickness}" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="{StaticResource ControlSubItem_OuterCornerRadius}" Visibility="Collapsed">
                        <Border BorderBrush="{StaticResource ControlSubItem_InnerBorder_UnFocus}" BorderThickness="{StaticResource ControlSubItem_InnerBorderThickness}" Background="{StaticResource ControlSubItem_Background_UnFocus}" CornerRadius="{StaticResource ControlSubItem_InnerCornerRadius}"/>
                    </Border>
                    <Border x:Name="SelectionVisual" BorderBrush="{StaticResource ControlSubItem_OuterBorder_Selected}" BorderThickness="{StaticResource ControlSubItem_OuterBorderThickness}" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="{StaticResource ControlSubItem_OuterCornerRadius}" Visibility="Collapsed">
                        <Border BorderBrush="{StaticResource ControlSubItem_InnerBorder_Selected}" BorderThickness="{StaticResource ControlSubItem_InnerBorderThickness}" Background="{StaticResource ControlSubItem_Background_Selected}" CornerRadius="{StaticResource ControlSubItem_InnerCornerRadius}"/>
                    </Border>
                    <StackPanel x:Name="IndentContainer" Orientation="Horizontal">
                        <Rectangle x:Name="IndentFirstVerticalLine" Stroke="{StaticResource TreeView_LineColor}" Visibility="Collapsed" VerticalAlignment="Top" Width="1">
                            <Rectangle.Clip>
                                <RectangleGeometry Rect="0,0,1,10000"/>
                            </Rectangle.Clip>
                        </Rectangle>
                    </StackPanel>
                    <Grid x:Name="ListRootContainer" Grid.Column="1" HorizontalAlignment="Center" MinWidth="20">
                        <Rectangle x:Name="HorizontalLine" HorizontalAlignment="Right" Height="1" Stroke="{StaticResource TreeView_LineColor}" VerticalAlignment="Center">
                            <Rectangle.Clip>
                                <RectangleGeometry Rect="0,0,10000,1"/>
                            </Rectangle.Clip>
                        </Rectangle>
                        <Rectangle x:Name="VerticalLine" HorizontalAlignment="Center" Stroke="{StaticResource TreeView_LineColor}" VerticalAlignment="Top" Width="1">
                            <Rectangle.Clip>
                                <RectangleGeometry Rect="0,0,1,10000"/>
                            </Rectangle.Clip>
                        </Rectangle>
                        <ToggleButton x:Name="Expander" Background="{TemplateBinding Background}" IsTabStop="False"/>
                        <Grid x:Name="LoadingVisual" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed" VerticalAlignment="Center">
                            <Grid.RenderTransform>
                                <TransformGroup>
                                    <RotateTransform x:Name="LoadingVisualAngleTransform" Angle="0" CenterY="0.5" CenterX="0.5"/>
                                </TransformGroup>
                            </Grid.RenderTransform>
                            <Path Data="M1,0 A1,1,90,1,1,0,-1" Height="10" StrokeStartLineCap="Round" Stretch="Fill" Stroke="{TemplateBinding Foreground}" StrokeThickness="1" Width="10"/>
                            <Path Data="M0,-1.1 L0.1,-1 L0,-0.9" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Left" Height="4" Margin="5,-1.5,0,0" Stretch="Fill" StrokeThickness="1" VerticalAlignment="Top" Width="4"/>
                        </Grid>
                    </Grid>
                    <CheckBox x:Name="CheckBoxElement" Grid.Column="2" IsTabStop="False" Margin="5,0,0,0" telerik:StyleManager.Theme="{StaticResource Theme}" Visibility="Collapsed" VerticalAlignment="Center"/>
                    <RadioButton x:Name="RadioButtonElement" Grid.Column="2" IsTabStop="False" Margin="5,0,0,0" telerik:StyleManager.Theme="{StaticResource Theme}" Visibility="Collapsed" VerticalAlignment="Center"/>
                    <Image x:Name="Image" Grid.Column="3" HorizontalAlignment="Center" MaxWidth="16" MaxHeight="16" Margin="2" VerticalAlignment="Center"/>
                    <Rectangle x:Name="FocusVisual" Grid.ColumnSpan="6" Grid.Column="2" IsHitTestVisible="False" RadiusY="3" RadiusX="3" Stroke="{StaticResource FocusBrushBlack}" StrokeThickness="1" StrokeDashArray="1 2" Visibility="Collapsed"/>
                    <Grid Grid.ColumnSpan="2" Grid.Column="4">
                        <ContentPresenter x:Name="Header" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        <ContentPresenter x:Name="EditHeaderElement" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                </Grid>
                <ItemsPresenter x:Name="ItemsHost" Grid.Row="1" Visibility="Collapsed"/>
            </Grid>
        </ControlTemplate>
        <Style x:Key="RadTreeViewItemStyle1" TargetType="telerik:RadTreeViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="CheckState" Value="Off"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Padding" Value="1 0 5 0"/>
            <Setter Property="IsDropAllowed" Value="True"/>
            <Setter Property="ItemsOptionListType" Value="Default"/>
            <Setter Property="IsEnabled" Value="True"/>
            <Setter Property="MinHeight" Value="24"/>
            <Setter Property="Template" Value="{StaticResource TreeViewItemDefaultTemplate}"/>
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <telerik:TreeViewPanel VerticalAlignment="Bottom"/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

[Ed]

This works perfectly, Lancelot. Many thanks indeed for your help.

Best regards

Ed