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

foreground color when treeviewitem is selected

11 Answers 265 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
LE DREAU Steeve
Top achievements
Rank 1
LE DREAU Steeve asked on 30 May 2011, 09:48 AM
Hi,

I've changed the treeviewitem template to have the foreground color changing when mouse is over it. I would like to be able to keep this color if I click the Item (selected). My problem is when I click the item, the color isn't kept et go back to original color.
I've tried to change many states but I'm not able to reproduce what I want.

Do you have any clue about this please ?
thanks

Regards
Steeve

11 Answers, 1 is accepted

Sort by
0
Petar Mladenov
Telerik team
answered on 01 Jun 2011, 11:41 AM
Hello LE DREAU Steeve,

You have to edit the default style of the RadTreeViewItem and use the "ControlSubItem_Background_MouseOver" brush in both the SelectionVisual and MouseOverVisual borders.
<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_MouseOver}" 
                                CornerRadius="{StaticResource ControlSubItem_InnerCornerRadius}"/>
                    </Border>
You can find this realized in the attached solution. Let us know if it satisfies you or if you need further assistance. We would be glad to help you.

Best wishes,
Petar Mladenov
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
LE DREAU Steeve
Top achievements
Rank 1
answered on 01 Jun 2011, 01:22 PM
Hello,

Please read FOREground, thanks
Regards

Steeve
0
Petar Mladenov
Telerik team
answered on 02 Jun 2011, 08:47 AM
Hello LE DREAU Steeve,

Please first I want to apologize for my mistake.
In order to work easier with the Foreground of the RadTreeViewItem, first you have to replace the "Header" ContentPrensenter with ContentControl so that it introduces a ForeGround property which you will be able to control:
<ContentControl x:Name="Header" 
                                         Margin="{TemplateBinding Padding}"
                                         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                         VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                         Content="{TemplateBinding Header}"
                                         Foreground="{TemplateBinding Foreground}"
                                         ContentTemplate="{TemplateBinding HeaderTemplate}" />
Then you can use ObjectAnimationUsingKeyFrames in the MouseOver, Selected and SelectedUnfocused VisualStates like so:
<VisualState x:Name="MouseOver">
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:0.1" 
                                                 Storyboard.TargetName="MouseOverVisual"
                                                 Storyboard.TargetProperty="Opacity"
                                                 To="1" />
                                <ObjectAnimationUsingKeyFrames Duration="0:0:0.1" 
                                                               Storyboard.TargetName="Header" 
                                                               Storyboard.TargetProperty="Foreground">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Blue" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
The described approach is realized in the attached solution. So please give it a try and let us know if it satisfies you. One more time huge sorry for misleading you first time.

All the best,
Petar Mladenov
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
LE DREAU Steeve
Top achievements
Rank 1
answered on 02 Jun 2011, 11:43 AM
Hello,

No problem for the mistake ;)
Another one ? :D 
Like I said, the mouse over color is ok, but I would like to keep the mouseover color when I have clicked on my menu item (when it is selected).
 
Here is the sequence :

- By default, the foreground color is white (this works)
- My mouse is over the menu => the color changes to black  (this works)
- I click on the menu item => the color is still black  (this works)
- When the mouse isn't over the menu item anymore, the menu item is still selected but the color is changed to white. I would like it to still be black until I click on another menu Item. This is my actual problem.

I've tried to change the Selected Visual State to add the same ObjectAnimation to change the color to black but I think another visual state overrides it.

Regards
Steeve
0
Petar Mladenov
Telerik team
answered on 07 Jun 2011, 06:07 PM
Hello LE DREAU Steeve,

Thank you for the detailed explanation and the steps. I managed to reproduce this behavior. We'll need more time in order to see what is causing this. We'll write you back tomorrow ( in the next 16 hours). Thank you for your understanding and please accept our apologies for any inconvenience caused.

Kind regards,
Petar Mladenov
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Petar Mladenov
Telerik team
answered on 08 Jun 2011, 09:24 AM
Hello LE DREAU Steeve,

Well, we discussed this with my team. This appears to be a common issue in Silverlight. The problem is that one property of a visual element (ContentControl in this case) is getting animated in the same time from different sources  (MouseOver Visual State and Selected visual state). There is a workaround that makes a duplicate of the ContentControl and plays with the Opacity of the duplicates but this may lead to various problems.
Please let us know if you need more info on this.

Kind regards,
Petar Mladenov
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
LE DREAU Steeve
Top achievements
Rank 1
answered on 08 Jun 2011, 04:44 PM
Hi,

Thanks for your answer. That's what I was affraid of, but your idea to use two different elements and play with visibility is quite good, I'll try it.

Thanks

Regards
Steeve
0
ss
Top achievements
Rank 1
answered on 29 Jun 2011, 10:07 AM
hi,

the below style i ma using for treeview.i wnat to chnage the font weight with bold onmouseover time.can you help on htis.
but i should not change my currentstyle which i am using.
without distrubing the currentstyle i want to chnage the font weight on mouseove time.

 

 

 

<Style x:Key="ExpanderStyle" TargetType="ToggleButton">

 

 

 

 

<Setter Property="IsEnabled" Value="True" />

 

 

 

 

<Setter Property="IsTabStop" Value="False" />

 

 

 

 

<Setter Property="Cursor" Value="Hand"/>

 

 

 

 

<Setter Property="FontSize" Value="13"/>

 

 

 

 

<Setter Property="Template">

 

 

 

 

<Setter.Value>

 

 

 

 

<ControlTemplate TargetType="ToggleButton">

 

 

 

 

<Grid>

 

 

 

 

<VisualStateManager.VisualStateGroups>

 

 

 

 

<VisualStateGroup x:Name="CommonStates">

 

 

 

 

<VisualState x:Name="Normal"/>

 

 

 

 

<VisualState x:Name="MouseOver">

 

 

 

 

<Storyboard>

 

 

 

 

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ButtonOver" Storyboard.TargetProperty="(UIElement.Opacity)">

 

 

 

 

<EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1"/>

 

 

 

 

</DoubleAnimationUsingKeyFrames>

 

 

 

 

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Button" Storyboard.TargetProperty="(UIElement.Opacity)">

 

 

 

 

<EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0"/>

 

 

 

 

</DoubleAnimationUsingKeyFrames>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

</VisualStateGroup>

 

 

 

 

<VisualStateGroup x:Name="CheckStates">

 

 

 

 

<VisualState x:Name="Unchecked">

 

 

 

 

<Storyboard>

 

 

 

 

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="CollapsedVisual" Storyboard.TargetProperty="(UIElement.Opacity)">

 

 

 

 

<EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1"/>

 

 

 

 

</DoubleAnimationUsingKeyFrames>

 

 

 

 

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="CollapsedVisualOver" Storyboard.TargetProperty="(UIElement.Opacity)">

 

 

 

 

<EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1"/>

 

 

 

 

</DoubleAnimationUsingKeyFrames>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

<VisualState x:Name="Checked">

 

 

 

 

<Storyboard>

 

 

 

 

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="CollapsedVisualOver" Storyboard.TargetProperty="(UIElement.Opacity)">

 

 

 

 

<EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0"/>

 

 

 

 

</DoubleAnimationUsingKeyFrames>

 

 

 

 

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="CollapsedVisual" Storyboard.TargetProperty="(UIElement.Opacity)">

 

 

 

 

<EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0"/>

 

 

 

 

</DoubleAnimationUsingKeyFrames>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

</VisualStateGroup>

 

 

 

 

</VisualStateManager.VisualStateGroups>

 

 

 

 

<Grid x:Name="ButtonOver" Opacity="0" Margin="0,4,0,0" HorizontalAlignment="Right" VerticalAlignment="Top" Width="16" Height="16">

 

 

 

 

<Rectangle Stroke="#FF027BA6" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto" Fill="#FF254C8B" RadiusX="3" RadiusY="3">

 

 

 

 

</Rectangle>

 

 

 

 

<Rectangle x:Name="CollapsedVisualOver" HorizontalAlignment="Left" VerticalAlignment="Top" Width="2" Height="8" RadiusX="0" RadiusY="0" Fill="#FFFFFFFF" Margin="7,4,0,0" />

 

 

 

 

<Rectangle RadiusX="0" RadiusY="0" Fill="#FFFFFFFF" HorizontalAlignment="Left" VerticalAlignment="Top" Width="8" Height="2" Margin="4,7,0,0" />

 

 

 

 

</Grid>

 

 

 

 

<Grid x:Name="Button" Margin="0,4,0,0" HorizontalAlignment="Right" VerticalAlignment="Top" Width="16" Height="16">

 

 

 

 

<Rectangle Stroke="#FF254C8B" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto" RadiusX="3" RadiusY="3" Fill="#FF254C8B"/>

 

 

 

 

<Rectangle x:Name="CollapsedVisual" HorizontalAlignment="Left" VerticalAlignment="Top" Width="2" Height="8" RadiusX="0" RadiusY="0" Fill="#FFFFFFFF" Margin="7,4,0,0" />

 

 

 

 

<Rectangle RadiusX="0" RadiusY="0" Fill="#FFFFFFFF" HorizontalAlignment="Left" Margin="4,7,0,0" VerticalAlignment="Top" Width="8" Height="2" />

 

 

 

 

</Grid>

 

 

 

 

</Grid>

 

 

 

 

</ControlTemplate>

 

 

 

 

</Setter.Value>

 

 

 

 

</Setter>

 

 

 

 

</Style>

 

0
Petar Mladenov
Telerik team
answered on 04 Jul 2011, 11:59 AM
Hi Kss,

You can achieve this by performing the following steps:
1. The expander style that you posted could be applied easily with the ExpanderStyle property of the RadtreeView
<telerik:RadTreeView ExpanderStyle="{StaticResource ExpanderStyle}">
2. You have to edit the default style of the RadTreeViewItem. You can replace the "Header" ContentPresenter with ContentControl in order to take advantage of its FontWeight property:
<Grid Grid.ColumnSpan="2" Grid.Column="4">
                        <ContentControl  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>
3. Then you have to implement animation like so:
<VisualState x:Name="MouseOver">
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:0.1" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual"/>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="FontWeight" Storyboard.TargetName="Header">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Bold" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
4. The edited style applies to all RadtreeViewItems when you remove its x:key:
<Style  TargetType="telerik:RadTreeViewItem">
You can find these steps realized in the attached project. Let us know if you need further assistance.

All the best,
Petar Mladenov
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
ss
Top achievements
Rank 1
answered on 04 Jul 2011, 01:10 PM
firstly thanks.

its working fine.

in that same way i ahev tried for radmenuitem.but its not working there.

can you help me on this.

here with i am copying my existing radmenu with item style.

 

 

 

<LinearGradientBrush x:Key="BlueBrush" EndPoint="0.5,1" StartPoint="0.5,0">

 

 

 

 

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

 

 

 

 

<GradientStop Color="#FFC3D6EC" />

 

 

 

 

</LinearGradientBrush>

 

 

 

 

<Thickness x:Key="MenuItemPadding">6,0</Thickness>

 

 

 

 

<SolidColorBrush x:Key="PanelBorderBrush" Color="#FF848484"/>

 

 

 

 

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

 

 

 

 

<telerik:Office_SilverTheme x:Key="Theme" IsApplicationTheme="False" Source="/Telerik.Windows.Themes.Office_Silver;component/themes/Generic.xaml"/>

 

 

 

 

<SolidColorBrush x:Key="MenuPopupOuterBorder" Color="White"/>

 

 

 

 

<SolidColorBrush x:Key="MenuPopupBackground" Color="White"/>

 

 

 

 

<SolidColorBrush x:Key="MenuPopupIconsBackground" Color="White"/>

 

 

 

 

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

 

 

 

 

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

 

 

 

 

<Thickness x:Key="MenuPopupIconsSeparatorMargin">27 0 0 0</Thickness>

 

 

 

 

<Thickness x:Key="MenuTopLevelItemMargin">2</Thickness>

 

 

 

 

<ControlTemplate x:Key="TopLevelHeaderTemplate" TargetType="telerik:RadMenuItem">

 

 

 

 

<Grid x:Name="RootElement" Margin="{StaticResource MenuTopLevelItemMargin}">

 

 

 

 

<VisualStateManager.VisualStateGroups>

 

 

 

 

<VisualStateGroup x:Name="CommonStates">

 

 

 

 

<VisualState x:Name="Highlighted"/>

 

 

 

 

<VisualState x:Name="Disabled">

 

 

 

 

<Storyboard>

 

 

 

 

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentGrid">

 

 

 

 

<DiscreteDoubleKeyFrame KeyTime="0" Value="0.5"/>

 

 

 

 

</DoubleAnimationUsingKeyFrames>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

<VisualState x:Name="Normal"/>

 

 

 

 

</VisualStateGroup>

 

 

 

 

<VisualStateGroup x:Name="FocusStates">

 

 

 

 

<VisualState x:Name="Unfocused"/>

 

 

 

 

<VisualState x:Name="Focused"/>

 

 

 

 

</VisualStateGroup>

 

 

 

 

<VisualStateGroup x:Name="CheckStates">

 

 

 

 

<VisualState x:Name="Checked">

 

 

 

 

<Storyboard>

 

 

 

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Tick">

 

 

 

 

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

 

 

 

 

</ObjectAnimationUsingKeyFrames>

 

 

 

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Icon">

 

 

 

 

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

 

 

 

 

</ObjectAnimationUsingKeyFrames>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

<VisualState x:Name="Unchecked"/>

 

 

 

 

<VisualState x:Name="HideIcon">

 

 

 

 

<Storyboard>

 

 

 

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Icon">

 

 

 

 

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

 

 

 

 

</ObjectAnimationUsingKeyFrames>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

</VisualStateGroup>

 

 

 

 

</VisualStateManager.VisualStateGroups>

 

 

 

 

<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>

 

 

 

 

<Telerik_Windows_Controls_Chromes:ButtonChrome x:Name="SelectionChrome" Grid.ColumnSpan="3" CornerRadius="{StaticResource SplitButton_SpanCornerRadius}" RenderNormal="False" RenderMouseOver="{TemplateBinding IsHighlighted}" RenderPressed="{TemplateBinding IsSubmenuOpen}" telerik:StyleManager.Theme="{StaticResource Theme}" d:IsHidden="True"/>

 

 

 

 

<Grid x:Name="ContentGrid" Margin="{TemplateBinding Padding}">

 

 

 

 

<Grid.ColumnDefinitions>

 

 

 

 

<ColumnDefinition/>

 

 

 

 

<ColumnDefinition/>

 

 

 

 

</Grid.ColumnDefinitions>

 

 

 

 

<Path x:Name="Tick" Grid.Column="0" Data="M 0,5.1 L 1.7,5.2 L 3.4,7.1 L 8,0.4 L 9.2,0 L 3.3,10.8 Z" Fill="{TemplateBinding Foreground}" Margin="0 0 4 0" Visibility="Collapsed" VerticalAlignment="Center"/>

 

 

 

 

<ContentPresenter x:Name="Icon" Content="{TemplateBinding Icon}" Grid.Column="0" Margin="0 0 4 0" VerticalAlignment="Center"/>

 

 

 

 

<ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

 

 

 

 

</Grid>

 

 

 

 

<Popup x:Name="PART_Popup" HorizontalOffset="-1" VerticalOffset="-1">

 

 

 

 

<Grid>

 

 

 

 

<Grid x:Name="PopupContentElement" Margin="0 0 3 3" Background="Black">

 

 

 

 

<Telerik_Windows_Controls_Chromes:ShadowChrome telerik:StyleManager.Theme="{StaticResource Theme}"/>

 

 

 

 

<Border BorderBrush="{StaticResource BlueBrush}" BorderThickness="1" Background="{StaticResource BlueBrush}">

 

 

 

 

<Grid>

 

 

 

 

<Rectangle Fill="{StaticResource BlueBrush}" HorizontalAlignment="Left" Width="27"/>

 

 

 

 

<Grid HorizontalAlignment="Left" Margin="{StaticResource MenuPopupIconsSeparatorMargin}" Width="2">

 

 

 

 

<Rectangle Fill="{StaticResource MenuPopupIconsSeparatorLeft}" HorizontalAlignment="Left" Width="1"/>

 

 

 

 

<Rectangle Fill="{StaticResource MenuPopupIconsSeparatorRight}" HorizontalAlignment="Right" Width="1"/>

 

 

 

 

</Grid>

 

 

 

 

<ItemsPresenter Margin="1"/>

 

 

 

 

</Grid>

 

 

 

 

</Border>

 

 

 

 

</Grid>

 

 

 

 

</Grid>

 

 

 

 

</Popup>

 

 

 

 

</Grid>

 

 

 

 

</ControlTemplate>

 

 

 

 

<ControlTemplate x:Key="TopLevelItemTemplate" TargetType="telerik:RadMenuItem">

 

 

 

 

<Grid x:Name="RootElement" Margin="{StaticResource MenuTopLevelItemMargin}">

 

 

 

 

<VisualStateManager.VisualStateGroups>

 

 

 

 

<VisualStateGroup x:Name="CommonStates">

 

 

 

 

<VisualState x:Name="Disabled">

 

 

 

 

<Storyboard>

 

 

 

 

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentGrid">

 

 

 

 

<DiscreteDoubleKeyFrame KeyTime="0" Value="0.5"/>

 

 

 

 

</DoubleAnimationUsingKeyFrames>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

<VisualState x:Name="Highlighted"/>

 

 

 

 

<VisualState x:Name="Normal"/>

 

 

 

 

 

 

 

<VisualState x:Name="MouseOver">

 

 

 

 

<Storyboard>

 

 

 

 

<DoubleAnimation Duration="0:0:0.1" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual"/>

 

 

 

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="FontWeight" Storyboard.TargetName="Header">

 

 

 

 

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

 

 

 

 

</ObjectAnimationUsingKeyFrames>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

</VisualStateGroup>

 

 

 

 

<VisualStateGroup x:Name="FocusStates">

 

 

 

 

<VisualState x:Name="Unfocused"/>

 

 

 

 

<VisualState x:Name="Focused"/>

 

 

 

 

</VisualStateGroup>

 

 

 

 

<VisualStateGroup x:Name="CheckStates">

 

 

 

 

<VisualState x:Name="Checked">

 

 

 

 

<Storyboard>

 

 

 

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Tick">

 

 

 

 

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

 

 

 

 

</ObjectAnimationUsingKeyFrames>

 

 

 

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Icon">

 

 

 

 

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

 

 

 

 

</ObjectAnimationUsingKeyFrames>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

<VisualState x:Name="Unchecked"/>

 

 

 

 

<VisualState x:Name="HideIcon">

 

 

 

 

<Storyboard>

 

 

 

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Icon">

 

 

 

 

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

 

 

 

 

</ObjectAnimationUsingKeyFrames>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

</VisualStateGroup>

 

 

 

 

</VisualStateManager.VisualStateGroups>

 

 

 

 

<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>

 

 

 

 

<Telerik_Windows_Controls_Chromes:ButtonChrome x:Name="SelectionChrome" Grid.ColumnSpan="3" CornerRadius="{StaticResource SplitButton_SpanCornerRadius}" RenderNormal="False" RenderMouseOver="{TemplateBinding IsHighlighted}" RenderPressed="{TemplateBinding IsFocused}" telerik:StyleManager.Theme="{StaticResource Theme}"/>

 

 

 

 

<Grid x:Name="ContentGrid" Margin="{TemplateBinding Padding}">

 

 

 

 

<Grid.ColumnDefinitions>

 

 

 

 

<ColumnDefinition/>

 

 

 

 

<ColumnDefinition/>

 

 

 

 

</Grid.ColumnDefinitions>

 

 

 

 

<Path x:Name="Tick" Grid.Column="0" Data="M 0,5.1 L 1.7,5.2 L 3.4,7.1 L 8,0.4 L 9.2,0 L 3.3,10.8 Z" Fill="{TemplateBinding Foreground}" Margin="0 0 4 0" Visibility="Collapsed" VerticalAlignment="Center"/>

 

 

 

 

<ContentPresenter x:Name="Icon" Content="{TemplateBinding Icon}" Grid.Column="0" Margin="0 0 4 0" VerticalAlignment="Center"/>

 

 

 

 

<ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

 

 

 

 

</Grid>

 

 

 

 

</Grid>

 

 

 

 

</ControlTemplate>

 

 

 

 

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

 

 

 

 

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

 

 

 

 

<Thickness x:Key="MenuSubItemMargin">2</Thickness>

 

 

 

 

<ControlTemplate x:Key="SubMenuHeaderTemplate" TargetType="telerik:RadMenuItem">

 

 

 

 

<Grid x:Name="RootElement" Background="{TemplateBinding Background}" Margin="{StaticResource MenuSubItemMargin}">

 

 

 

 

<VisualStateManager.VisualStateGroups>

 

 

 

 

<VisualStateGroup x:Name="CommonStates">

 

 

 

 

<VisualState x:Name="Highlighted"/>

 

 

 

 

<VisualState x:Name="Disabled">

 

 

 

 

<Storyboard>

 

 

 

 

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentGrid">

 

 

 

 

<DiscreteDoubleKeyFrame KeyTime="0" Value="0.5"/>

 

 

 

 

</DoubleAnimationUsingKeyFrames>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

<VisualState x:Name="Normal"/>

 

 

 

 

</VisualStateGroup>

 

 

 

 

<VisualStateGroup x:Name="FocusStates">

 

 

 

 

<VisualState x:Name="Unfocused"/>

 

 

 

 

<VisualState x:Name="Focused"/>

 

 

 

 

</VisualStateGroup>

 

 

 

 

<VisualStateGroup x:Name="CheckStates">

 

 

 

 

<VisualState x:Name="Checked">

 

 

 

 

<Storyboard>

 

 

 

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Icon">

 

 

 

 

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

 

 

 

 

</ObjectAnimationUsingKeyFrames>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

<VisualState x:Name="Unchecked"/>

 

 

 

 

<VisualState x:Name="HideIcon"/>

 

 

 

 

</VisualStateGroup>

 

 

 

 

</VisualStateManager.VisualStateGroups>

 

 

 

 

<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>

 

 

 

 

<Telerik_Windows_Controls_Chromes:ButtonChrome x:Name="SelectionChrome" Grid.ColumnSpan="3" CornerRadius="{StaticResource SplitButton_SpanCornerRadius}" RenderNormal="False" RenderHighlighted="{TemplateBinding IsHighlighted}" telerik:StyleManager.Theme="{StaticResource Theme}"/>

 

 

 

 

<Grid x:Name="ContentGrid">

 

 

 

 

<Grid.ColumnDefinitions>

 

 

 

 

<ColumnDefinition Width="26"/>

 

 

 

 

<ColumnDefinition Width="*"/>

 

 

 

 

<ColumnDefinition Width="Auto"/>

 

 

 

 

</Grid.ColumnDefinitions>

 

 

 

 

<ContentPresenter x:Name="Icon" Content="{TemplateBinding Icon}" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center"/>

 

 

 

 

<ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

 

 

 

 

<Path x:Name="ExpandIconBackground" Grid.Column="2" Data="M0,0 L0,7 1,7 1,6 2,6 2,5 3,5 3,4 4,4 4,3 3,3 3,2 2,2 2,1 1,1 1,0 z" Fill="{StaticResource ButtonIconBackground_Normal}" Height="7" Margin="6 7 6 5" VerticalAlignment="Center" Width="4"/>

 

 

 

 

<Path x:Name="ExpandIconForeground" Grid.Column="2" Data="M0,0 L0,7 1,7 1,6 2,6 2,5 3,5 3,4 4,4 4,3 3,3 3,2 2,2 2,1 1,1 1,0 z" Fill="{StaticResource ButtonIconForeground_Normal}" Height="7" Margin="6 6 6 6" VerticalAlignment="Center" Width="4"/>

 

 

 

 

</Grid>

 

 

 

 

<Popup x:Name="PART_Popup" HorizontalOffset="-1" VerticalOffset="-1">

 

 

 

 

<Grid>

 

 

 

 

<Grid x:Name="PopupContentElement" Margin="0 0 3 3">

 

 

 

 

<Telerik_Windows_Controls_Chromes:ShadowChrome telerik:StyleManager.Theme="{StaticResource Theme}"/>

 

 

 

 

<Border BorderBrush="{StaticResource BlueBrush}" BorderThickness="1" Background="{StaticResource BlueBrush}">

 

 

 

 

<Grid>

 

 

 

 

<Rectangle Fill="{StaticResource BlueBrush}" HorizontalAlignment="Left" Width="27"/>

 

 

 

 

<Grid HorizontalAlignment="Left" Margin="{StaticResource MenuPopupIconsSeparatorMargin}" Width="2">

 

 

 

 

<Rectangle Fill="{StaticResource MenuPopupIconsSeparatorLeft}" HorizontalAlignment="Left" Width="1"/>

 

 

 

 

<Rectangle Fill="{StaticResource MenuPopupIconsSeparatorRight}" HorizontalAlignment="Right" Width="1"/>

 

 

 

 

</Grid>

 

 

 

 

<ItemsPresenter Margin="1"/>

 

 

 

 

</Grid>

 

 

 

 

</Border>

 

 

 

 

</Grid>

 

 

 

 

</Grid>

 

 

 

 

</Popup>

 

 

 

 

</Grid>

 

 

 

 

</ControlTemplate>

 

 

 

 

<ControlTemplate x:Key="SubMenuItemTemplate" TargetType="telerik:RadMenuItem">

 

 

 

 

<Grid x:Name="RootElement" Background="{TemplateBinding Background}" Margin="{StaticResource MenuSubItemMargin}">

 

 

 

 

<VisualStateManager.VisualStateGroups>

 

 

 

 

<VisualStateGroup x:Name="CommonStates">

 

 

 

 

<VisualState x:Name="Highlighted"/>

 

 

 

 

<VisualState x:Name="Disabled">

 

 

 

 

<Storyboard>

 

 

 

 

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentGrid">

 

 

 

 

<DiscreteDoubleKeyFrame KeyTime="0" Value="0.5"/>

 

 

 

 

</DoubleAnimationUsingKeyFrames>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

<VisualState x:Name="Normal"/>

 

 

 

 

</VisualStateGroup>

 

 

 

 

<VisualStateGroup x:Name="FocusStates">

 

 

 

 

<VisualState x:Name="Unfocused"/>

 

 

 

 

<VisualState x:Name="Focused"/>

 

 

 

 

</VisualStateGroup>

 

 

 

 

<VisualStateGroup x:Name="CheckStates">

 

 

 

 

<VisualState x:Name="Checked">

 

 

 

 

<Storyboard>

 

 

 

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Tick">

 

 

 

 

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

 

 

 

 

</ObjectAnimationUsingKeyFrames>

 

 

 

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Icon">

 

 

 

 

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

 

 

 

 

</ObjectAnimationUsingKeyFrames>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

<VisualState x:Name="Unchecked"/>

 

 

 

 

<VisualState x:Name="HideIcon">

 

 

 

 

<Storyboard>

 

 

 

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Icon">

 

 

 

 

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

 

 

 

 

</ObjectAnimationUsingKeyFrames>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

</VisualStateGroup>

 

 

 

 

</VisualStateManager.VisualStateGroups>

 

 

 

 

<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>

 

 

 

 

<Telerik_Windows_Controls_Chromes:ButtonChrome x:Name="SelectionChrome" Grid.ColumnSpan="3" CornerRadius="{StaticResource SplitButton_SpanCornerRadius}" RenderNormal="False" RenderHighlighted="{TemplateBinding IsHighlighted}" />

 

 

 

 

<Grid x:Name="ContentGrid">

 

 

 

 

<Grid.ColumnDefinitions>

 

 

 

 

<ColumnDefinition Width="26"/>

 

 

 

 

<ColumnDefinition Width="*"/>

 

 

 

 

</Grid.ColumnDefinitions>

 

 

 

 

<Path x:Name="Tick" Grid.Column="0" Data="M 0,5.1 L 1.7,5.2 L 3.4,7.1 L 8,0.4 L 9.2,0 L 3.3,10.8 Z" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Center" Visibility="Collapsed" VerticalAlignment="Center"/>

 

 

 

 

<ContentPresenter x:Name="Icon" Content="{TemplateBinding Icon}" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center"/>

 

 

 

 

<ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

 

 

 

 

</Grid>

 

 

 

 

</Grid>

 

 

 

 

</ControlTemplate>

 

 

 

 

<SolidColorBrush x:Key="MenuItemSeparatorTop" Color="#FF848484"/>

 

 

 

 

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

 

 

 

 

<Thickness x:Key="MenuItemSeparatorMargin">31 4 4 3</Thickness>

 

 

 

 

<ControlTemplate x:Key="SeparatorTemplate" TargetType="telerik:RadMenuItem">

 

 

 

 

<Grid Height="2" Margin="{StaticResource MenuItemSeparatorMargin}">

 

 

 

 

<Rectangle Fill="{StaticResource MenuItemSeparatorTop}" Height="1" VerticalAlignment="Top"/>

 

 

 

 

<Rectangle Fill="{StaticResource MenuItemSeparatorBottom}" Height="1" VerticalAlignment="Bottom"/>

 

 

 

 

</Grid>

 

 

 

 

</ControlTemplate>

 

 

 

 

<Style x:Key="RadMenuItemStyle" TargetType="telerik:RadMenuItem">

 

 

 

 

<Setter Property="Padding" Value="{StaticResource MenuItemPadding}"/>

 

 

 

 

<Setter Property="Background" Value="Transparent"/>

 

 

 

 

<Setter Property="BorderBrush" Value="{StaticResource PanelBorderBrush}"/>

 

 

 

 

<Setter Property="BorderThickness" Value="0"/>

 

 

 

 

<Setter Property="TopLevelHeaderTemplateKey" Value="{StaticResource TopLevelHeaderTemplate}"/>

 

 

 

 

<Setter Property="TopLevelItemTemplateKey" Value="{StaticResource TopLevelItemTemplate}"/>

 

 

 

 

<Setter Property="SubmenuHeaderTemplateKey" Value="{StaticResource SubMenuHeaderTemplate}"/>

 

 

 

 

<Setter Property="SubmenuItemTemplateKey" Value="{StaticResource SubMenuItemTemplate}"/>

 

 

 

 

<Setter Property="SeparatorTemplateKey" Value="{StaticResource SeparatorTemplate}"/>

 

 

 

 

<Setter Property="Template" Value="{StaticResource SubMenuItemTemplate}"/>

 

 

 

 

<Setter Property="HorizontalContentAlignment" Value="Left"/>

 

 

 

 

<Setter Property="VerticalContentAlignment" Value="Center"/>

 

 

 

 

<Setter Property="Telerik_Windows_Controls_Animation:AnimationManager.AnimationSelector">

 

 

 

 

<Setter.Value>

 

 

 

 

<Telerik_Windows_Controls_Animation:AnimationSelector>

 

 

 

 

<Telerik_Windows_Controls_Animation:SlideAnimation AnimationName="Expand" Direction="In" SlideMode="Top" TargetElementName="PopupContentElement"/>

 

 

 

 

</Telerik_Windows_Controls_Animation:AnimationSelector>

 

 

 

 

</Setter.Value>

 

 

 

 

</Setter>

 

 

 

 

<Setter Property="Foreground" Value="Black"/>

 

 

 

 

</Style>

 

 

 

 

 

<!-- RadMenu -->

 

 

 

 

<Style TargetType="telerikNavigation:RadMenu" x:Name="Base_RadMenu">

 

 

 

 

<Setter Property="Background" Value="#3871B9" />

 

 

 

 

<Setter Property="HorizontalContentAlignment" Value="Left" />

 

 

 

 

<Setter Property="VerticalContentAlignment" Value="Center" />

 

 

 

 

<Setter Property="FontSize" Value="13"/>

 

 

 

 

<Setter Property="ItemContainerStyle" Value="{StaticResource RadMenuItemStyle}"/>

 

 

 

 

<Setter Property="IconColumnWidth" Value="35"/>

 

 

 

 

 

</Style>

 

0
ss
Top achievements
Rank 1
answered on 05 Jul 2011, 05:16 AM
the above problem related to radmenuitem onmouseover its working fine.telerik radmenu form people replyed for my issue.

thanks alot.
Tags
TreeView
Asked by
LE DREAU Steeve
Top achievements
Rank 1
Answers by
Petar Mladenov
Telerik team
LE DREAU Steeve
Top achievements
Rank 1
ss
Top achievements
Rank 1
Share this question
or