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

Custom Style -- hover

3 Answers 173 Views

TreeView

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

This question is locked. New answers and comments are not allowed.

Justin Lee asked on 05 Apr 2012, 04:12 PM

I have a radtreeview with a custom treeviewitem style. The foreground of tree is white. When an item is selected, the item has a yellow background, and black foreground. When hovered over, the text turns red.

Everything works great except: When you hover over a selected item, the text turns red (as expected), but when you move your mouse off the text, the text changes to White instead of black, and becomes hard to read (white text on yellow background)

Any help would be appreciated!

Thanks,
Justin

Here is my current custom style.

<ResourceDictionary

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

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

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

<SolidColorBrush x:Key="SolidWhiteBrush" Color="#FFFFFFFF" />

<SolidColorBrush x:Key="SolidTransparentBrush" Color="Transparent" />

<SolidColorBrush x:Key="SolidGrayBrush" Color="#FF999999" />

<SolidColorBrush x:Key="SolidYellowBrush" Color="#FFFFFF00" />

<SolidColorBrush x:Key="SolidBlackBrush" Color="#FF000000" />

<CornerRadius x:Key="RadiusZero">0</CornerRadius>

<CornerRadius x:Key="RadiusOne">1</CornerRadius>

<Thickness x:Key="ThicknessZero">0</Thickness>

<Thickness x:Key="ThicknessOne">1</Thickness>

<telerik:Office_BlackTheme x:Key="Theme" />

<SolidColorBrush x:Key="ControlSubItem_OuterBorder_MouseOver" Color="#FFFFC92B" />

<SolidColorBrush x:Key="ControlSubItem_Background_MouseOver" Color="#FFDDDDDD" />

<SolidColorBrush x:Key="ControlSubItem_OuterBorder_UnFocus" Color="#FFdbdbdb" />

<SolidColorBrush x:Key="TreeView_LineColor" Color="#FFCCCCCC" />

<LinearGradientBrush x:Key="ControlSubItem_Background_UnFocus" EndPoint="0,1">

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

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

</LinearGradientBrush>

<ControlTemplate x:Key="TreeItemTemplateLightBkgd" 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"

Value="Visible" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetProperty="Visibility"

Storyboard.TargetName="Header">

<DiscreteObjectKeyFrame KeyTime="0"

Value="Collapsed" />

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

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="Header"

Storyboard.TargetProperty="Foreground" Duration="0">

<DiscreteObjectKeyFrame KeyTime="0" Value="Red" />

</ObjectAnimationUsingKeyFrames>

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

Value="Visible" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="Header"

Storyboard.TargetProperty="Foreground" Duration="0">

<DiscreteObjectKeyFrame KeyTime="0" Value="Black" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="SelectedUnfocused">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetProperty="Visibility"

Storyboard.TargetName="SelectionUnfocusedVisual">

<DiscreteObjectKeyFrame KeyTime="0"

Value="Visible" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="Header"

Storyboard.TargetProperty="Foreground" Duration="0">

<DiscreteObjectKeyFrame KeyTime="0" Value="Black" />

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

Value="Visible" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetProperty="Visibility"

Storyboard.TargetName="Expander">

<DiscreteObjectKeyFrame KeyTime="0"

Value="Collapsed" />

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

Value="Visible" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Unfocused" />

</VisualStateGroup>

<VisualStateGroup x:Name="ExpandStates">

<VisualState x:Name="Expanded" />

<VisualState x:Name="Collapsed" />

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Grid x:Name="HeaderRow"

Background="Transparent"

MinHeight="{TemplateBinding MinHeight}">

<Grid.ColumnDefinitions>

<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="SelectionUnfocusedVisual"

BorderBrush="{StaticResource ControlSubItem_OuterBorder_UnFocus}"

BorderThickness="{StaticResource ThicknessOne}"

Grid.ColumnSpan="6"

Grid.Column="2"

CornerRadius="{StaticResource RadiusOne}"

Visibility="Collapsed">

<Border BorderBrush="{StaticResource SolidTransparentBrush}"

BorderThickness="{StaticResource ThicknessOne}"

Background="{StaticResource SolidYellowBrush}"

CornerRadius="{StaticResource RadiusZero}" />

</Border>

<Border x:Name="SelectionVisual"

BorderBrush="{StaticResource SolidYellowBrush}"

BorderThickness="{StaticResource ThicknessOne}"

Grid.ColumnSpan="6"

Grid.Column="2"

CornerRadius="{StaticResource RadiusOne}"

Visibility="Collapsed">

<Border BorderThickness="0"

Background="{StaticResource SolidYellowBrush}"

CornerRadius="{StaticResource RadiusZero}"

/>

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

<CheckBox x:Name="CheckBoxElement"

Grid.Column="2"

IsTabStop="False"

Margin="5,0,0,0"

Visibility="Collapsed"

VerticalAlignment="Center" />

<RadioButton x:Name="RadioButtonElement"

Grid.Column="2"

IsTabStop="False"

Margin="5,0,0,0"

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 SolidBlackBrush}"

StrokeThickness="1"

StrokeDashArray="1 2"

Visibility="Collapsed" />

<Grid Grid.ColumnSpan="2"

Grid.Column="4">

<ContentControl x:Name="Header"

ContentTemplate="{TemplateBinding HeaderTemplate}"

Content="{TemplateBinding Header}"

Foreground="{TemplateBinding Foreground}"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

Margin="{TemplateBinding Padding}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}">

</ContentControl>

<ContentPresenter x:Name="EditHeaderElement"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

Margin="{TemplateBinding Padding}"

Visibility="Collapsed"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

</Grid>

<ItemsPresenter x:Name="ItemsHost"

Grid.Row="1"

Visibility="Collapsed" />

</Grid>

</ControlTemplate>

<Style x:Key="LightBkgdTreeStyle" 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 TreeItemTemplateLightBkgd}" />

<Setter Property="ItemsPanel">

<Setter.Value>

<ItemsPanelTemplate>

<telerik:TreeViewPanel VerticalAlignment="Bottom" />

</ItemsPanelTemplate>

</Setter.Value>

</Setter>

</Style>

</ResourceDictionary>

3 Answers, 1 is accepted

answered on 10 Apr 2012, 09:38 AM

SilverlightApplication2.zip

Hi Justin,

I wasn't able to reproduce this issue on our side. Using the style you sent the selected RadTreeViewItems background is set to yellow and their Foreground is Black but even if the mouse hovers over a selected item, its foreground doesn't change at all.

Can you test the attached sample on your side and let me know if I'm missing something.

All the best,
Tina Stancheva
the Telerik team

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

answered on 10 Apr 2012, 02:44 PM

Using the telerik assemblies attached referenced in your sample project (2012.1), the tree worked like you said - the selected item did not change color when hoverered over. --This would be acceptable behavior.

However we are currently using 2011.3. I replaced the assemblies with 2011.3 assemblies, and did reproduced the issue in your project.

We will be upgrading our version of Telerik in probably a couple months. If you can find a solution using the 2011.3 version, it would be greatly appreciated - but if not, we could probably live with the hover issue for a couple months.

Thanks,
Justin

answered on 13 Apr 2012, 08:06 AM

SilverlightApplication2.zip

Hello Justin,

Unfortunately, we did not manage to reproduce this with the Q3 2011 (check the attachment) and it is very hard for us to workaround something we cannot reproduce. Is it the Q3 2011 (1116) your exact dll?

Kind regards,
Petar Mladenov
the Telerik team

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