MenuItemTopLevel Highlighted VisualState

6 posts, 0 answers
  1. Robin
    Robin avatar
    19 posts
    Member since:
    Feb 2011

    Posted 28 Oct 2011 Link to this post

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

    Posted 01 Nov 2011 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  3. DevCraft banner
  4. Robin
    Robin avatar
    19 posts
    Member since:
    Feb 2011

    Posted 02 Nov 2011 Link to this post

    Hi Dani,

    this solved my problem.

    Thank you very much for your help.

  5. Robin
    Robin avatar
    19 posts
    Member since:
    Feb 2011

    Posted 02 Nov 2011 Link to this post

    Hi Dani,

    this solved my problem.

    Thank you very much for your help.
  6. Robin
    Robin avatar
    19 posts
    Member since:
    Feb 2011

    Posted 02 Nov 2011 Link to this post

    Hi Dani,

    this solved my problem.

    Thank you very much for your help.
  7. Robin
    Robin avatar
    19 posts
    Member since:
    Feb 2011

    Posted 02 Nov 2011 Link to this post

    Hi Dani,

    this solved my problem.

    Thank you very much for your help.
Back to Top
DevCraft banner