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

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

2 Answers 44 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Yunid
Top achievements
Rank 1
Yunid asked on 31 May 2011, 10:28 PM
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

2 Answers, 1 is accepted

Sort by
0
Accepted
Dani
Telerik team
answered on 01 Jun 2011, 10:03 AM
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
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
Yunid
Top achievements
Rank 1
answered on 01 Jun 2011, 02:30 PM
Thanks Dani, that solved my problem.

Yunid
Tags
Menu
Asked by
Yunid
Top achievements
Rank 1
Answers by
Dani
Telerik team
Yunid
Top achievements
Rank 1
Share this question
or