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
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
>
Best wishes,
Petar Mladenov
the Telerik team
Please read FOREground, thanks
Regards
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}"
/>
<
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
>
All the best,
Petar Mladenov
the Telerik team
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
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
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
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
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>
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}"
>
<
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
>
<
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
>
<
Style
TargetType
=
"telerik:RadTreeViewItem"
>
All the best,
Petar Mladenov
the Telerik team
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>
thanks alot.