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

3 posts, 1 answers
  1. Yunid
    Yunid avatar
    2 posts
    Member since:
    May 2011

    Posted 31 May 2011 Link to this post

    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. Answer
    Dani
    Admin
    Dani avatar
    848 posts

    Posted 01 Jun 2011 Link to this post

    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
  3. DevCraft banner
  4. Yunid
    Yunid avatar
    2 posts
    Member since:
    May 2011

    Posted 01 Jun 2011 Link to this post

    Thanks Dani, that solved my problem.

    Yunid
Back to Top