Custom Style -- hover

4 posts, 0 answers
  1. Justin Lee
    Justin Lee avatar
    149 posts
    Member since:
    Dec 2009

    Posted 05 Apr 2012 Link to this post

    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
     
        <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" />
     
        <!-- LightBkgdTreeStyle Style  -->
        <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="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="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>
                    </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>
                </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>
  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 10 Apr 2012 Link to this post

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

  3. DevCraft banner
  4. Justin Lee
    Justin Lee avatar
    149 posts
    Member since:
    Dec 2009

    Posted 10 Apr 2012 Link to this post

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

    Posted 13 Apr 2012 Link to this post

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

Back to Top