Selected item color

5 posts, 0 answers
  1. Ed
    Ed avatar
    10 posts
    Member since:
    Jan 2012

    Posted 03 Jul 2012 Link to this post

    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
  2. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 06 Jul 2012 Link to this post

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

  3. DevCraft banner
  4. Ed
    Ed avatar
    10 posts
    Member since:
    Jan 2012

    Posted 06 Jul 2012 Link to this post

    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
  5. Lancelot
    Lancelot avatar
    251 posts
    Member since:
    Jul 2012

    Posted 09 Jul 2012 Link to this post

    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>
  6. Ed
    Ed avatar
    10 posts
    Member since:
    Jan 2012

    Posted 26 Sep 2012 Link to this post

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

    Best regards

    Ed
Back to Top
DevCraft banner