Highlighted VisualState doesnt work in a modified copy of the Menu Customizacion example

[Yunid]

Hi,

I just added a new MenuItem Type which is almost the same that the MenuItemTopLevel. I called  MenuItemTopLevelLink and the different is that this one would be linkeable and wont display a popup because it has not subitems. The main changes were changing the original MenuItemTopLevelControlTemplate:

<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 20 6" HorizontalAlignment="Right" 
                               VerticalAlignment="Center" FontSize="12" />
                    <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 MenuDorpDownInnerBorder}" 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="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>
                    </VisualStateManager.VisualStateGroups> 
                </Grid>
            </ControlTemplate>
 

To this format, where I just removed the popup and the path, and I added a VisualState Highlighted:

<ControlTemplate x:Key="MenuItemTopLevelLinkControlTemplate" 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 20 6" HorizontalAlignment="Right" VerticalAlignment="Center" FontSize="12" />                    
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:0.2"/>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="Highlighted">
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundVisual" 
                               Storyboard.TargetProperty="Opacity">
                            <LinearDoubleKeyFrame KeyTime="00:00:00.1" Value="1" />
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Unfocused" />
                <VisualState x:Name="Focused"/>                    
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</ControlTemplate>

It supposes to change the Opacity of the BackgroundVisual rectangle when the mouse pass over the menu item. I checked and the VisualState is reached (I put some wrong values just to check if the something happened if the mouse was over the item and I got the exception I was expecting), but the defined changes are not happening (the opacity of the rectangle doesn't seems to change).

Can I get some help to detect what is going on? or what should I do to modify this example and put linkeables TopLevelMenuItems  with the ability to change the background color at the mouse over event?

Thanks,
Yunid

[Dani]

Hi Yunid,

In that case,you need to use the full set of visual groups and visual states. The follwoing snippet, when placed in the duplicated control template of yours, will produce the desired mouse over effect when a TopLevel item has no subitems:

<VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Disabled"/>
                        <VisualState x:Name="Highlighted">
                            <Storyboard>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundVisual" Storyboard.TargetProperty="Opacity">
                                    <LinearDoubleKeyFrame KeyTime="00:00:00.1" Value="1" />
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Normal"/>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="FocusStates">
                        <VisualStateGroup.Transitions>
                            <VisualTransition GeneratedDuration="0:0:0.2"/>
                        </VisualStateGroup.Transitions>
                        <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>

I hope this helps.

All the best,
Dani
the Telerik team

[Yunid]

Thanks Dani, that solved my problem.

Yunid