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

Selected item color

4 Answers 117 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Ed
Top achievements
Rank 1
Ed asked on 03 Jul 2012, 10:45 AM
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

4 Answers, 1 is accepted

Sort by
0
Petar Mladenov
Telerik team
answered on 06 Jul 2012, 06:49 AM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Ed
Top achievements
Rank 1
answered on 06 Jul 2012, 12:36 PM
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
0
Lancelot
Top achievements
Rank 1
answered on 09 Jul 2012, 07:11 PM
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>
0
Ed
Top achievements
Rank 1
answered on 26 Sep 2012, 10:25 AM
This works perfectly, Lancelot. Many thanks indeed for your help.

Best regards

Ed
Tags
TreeView
Asked by
Ed
Top achievements
Rank 1
Answers by
Petar Mladenov
Telerik team
Ed
Top achievements
Rank 1
Lancelot
Top achievements
Rank 1
Share this question
or