Home / Community & Support / Developer Productivity Tools Forums / Silverlight > Menu > MenuItemTopLevel Highlighted VisualState

• Robin

  Posted on Oct 28, 2011 (permalink)

  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

  Reply

• Dani Dani

  Posted on Nov 1, 2011 (permalink)

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

  Reply

• Robin

  Posted on Nov 2, 2011 (permalink)

  Hi Dani,
  
  this solved my problem.
  
  Thank you very much for your help.
  
  

  Reply

• Robin

  Posted on Nov 2, 2011 (permalink)

  Hi Dani,
  
  this solved my problem.
  
  Thank you very much for your help.
  

  Reply

• Robin

  Posted on Nov 2, 2011 (permalink)

  Hi Dani,
  
  this solved my problem.
  
  Thank you very much for your help.

  Reply

• Robin

  Posted on Nov 2, 2011 (permalink)

  Hi Dani,
  
  this solved my problem.
  
  Thank you very much for your help.

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Silverlight > Menu > MenuItemTopLevel Highlighted VisualState