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

[Solved] MenuItemTopLevel Highlighted VisualState

5 Answers 175 Views

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

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

Robin asked on 28 Oct 2011, 08:50 AM

Hi there,

I completely restyled the whole RadMenu to match our needs.

I still got a problem with the top level MenuItems.
The VisualState "Highlighted" as mentioned in your documentation seems not to work.

I just want to change the "DropDownArrow" for example, but it's not working.

Here is the ControlTemplate that I use:

<ControlTemplate x:Key="MenuItemTopLevelControlTemplate"

TargetType="telerik:RadMenuItem">

<Grid>

<Rectangle x:Name="BackgroundVisual"

Fill="{StaticResource MenuItemTopLevelBackground_MouseOver}"

Opacity="0" />

<TextBlock x:Name="TextElement"

Text="{Binding Content}"

TextDecorations="None"

Foreground="White"

FontWeight="Bold"

Margin="10 6 25 6"

HorizontalAlignment="Right"

VerticalAlignment="Center"

FontSize="14" />

<Path x:Name="DropDownArrow"

Fill="White"

Data="M0,0 L2,0 1,1"

Stretch="Uniform"

Width="7"

Height="5"

HorizontalAlignment="Right"

VerticalAlignment="Center"

Margin="8 0 10 0" />

<Popup x:Name="PART_Popup"

HorizontalOffset="-1"

VerticalOffset="-1">

<Border x:Name="PopupContent"

Margin="0 1 0 0"

BorderBrush="{StaticResource MenuDropDownBorder}"

BorderThickness="1"

Background="{StaticResource MenuDropDownFrame}"

Padding="6">

<Border Background="{StaticResource MenuDropDownBackground}"

BorderBrush="{StaticResource MenuDropDownInnerBorder}"

BorderThickness="1">

<ItemsPresenter Margin="8 4" />

</Border>

</Popup>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualStateGroup.Transitions>

<VisualTransition GeneratedDuration="0:0:0.2" />

</VisualStateGroup.Transitions>

<VisualState x:Name="Highlighted">

<Storyboard>

<ColorAnimationUsingKeyFrames Storyboard.TargetName="DropDownArrow"

Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">

<LinearColorKeyFrame KeyTime="00:00:00"

Value="Black" />

</ColorAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Disabled" />

<VisualState x:Name="Normal" />

<VisualState x:Name="Focused">

<Storyboard>

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundVisual"

Storyboard.TargetProperty="Opacity">

<LinearDoubleKeyFrame KeyTime="00:00:00.1"

Value="1" />

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

</Grid>

</ControlTemplate>

The Focused VisualState works fine.

I hope you can help me.

Best regards
Robin

5 Answers, 1 is accepted

answered on 01 Nov 2011, 10:17 AM

Hi Robin,

The problem lies in the VisualStateGroups of your template. Please, try adding all needed visual states - FocusStates in a separate VisualStateGroup, and CheckStates in a separate VisualStateGroup.

Here is your modified template:

<ControlTemplate x:Key="MenuItemTopLevelControlTemplate"

TargetType="telerik:RadMenuItem">

<Grid>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualStateGroup.Transitions>

<VisualTransition GeneratedDuration="0:0:0.2" />

</VisualStateGroup.Transitions>

<VisualState x:Name="Highlighted">

<Storyboard>

<ColorAnimationUsingKeyFrames Storyboard.TargetName="DropDownArrow"

Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">

<LinearColorKeyFrame KeyTime="00:00:00"

Value="Magenta" />

</ColorAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Disabled" />

<VisualState x:Name="Normal" />

</VisualStateGroup>

<VisualStateGroup x:Name="FocusStates">

<VisualState x:Name="Unfocused"/>

<VisualState x:Name="Focused">

<Storyboard>

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundVisual"

Storyboard.TargetProperty="Opacity">

<LinearDoubleKeyFrame KeyTime="00:00:00.1" Value="1" />

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="CheckStates">

<VisualState x:Name="Checked"/>

<VisualState x:Name="Unchecked"/>

<VisualState x:Name="HideIcon"/>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Rectangle x:Name="BackgroundVisual"

Fill="{StaticResource MenuItemTopLevelBackground_MouseOver}"

Opacity="0" />

<TextBlock x:Name="TextElement"

Text="{Binding Content}"

TextDecorations="None"

Foreground="White"

FontWeight="Bold"

Margin="10 6 25 6"

HorizontalAlignment="Right"

VerticalAlignment="Center"

FontSize="14" />

<Path x:Name="DropDownArrow"

Fill="White"

Data="M0,0 L2,0 1,1"

Stretch="Uniform"

Width="7"

Height="5"

HorizontalAlignment="Right"

VerticalAlignment="Center"

Margin="8 0 10 0" />

<Popup x:Name="PART_Popup"

HorizontalOffset="-1"

VerticalOffset="-1">

<Border x:Name="PopupContent"

Margin="0 1 0 0"

BorderBrush="{StaticResource MenuDropDownBorder}"

BorderThickness="1"

Background="{StaticResource MenuDropDownFrame}"

Padding="6">

<Border Background="{StaticResource MenuDropDownBackground}"

BorderBrush="{StaticResource MenuDropDownInnerBorder}"

BorderThickness="1">

<ItemsPresenter Margin="8 4" />

</Border>

</Popup>

</Grid>

</ControlTemplate>

Also, please remember to place the VSM code directly inside the root element of your control template.

I hope this helps.

Best wishes,
Dani
the Telerik team

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