MenuItemTopLevel Highlighted VisualState

[Robin]

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

[Dani]

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

[Robin]

Hi Dani,

this solved my problem.

Thank you very much for your help.

[Robin]

Hi Dani,

this solved my problem.

Thank you very much for your help.

[Robin]

Hi Dani,

this solved my problem.

Thank you very much for your help.

[Robin]

Hi Dani,

this solved my problem.

Thank you very much for your help.