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

Need Help for Selected Menu Item Style

2 Answers 233 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Andy
Top achievements
Rank 1
Andy asked on 24 Jul 2014, 03:45 PM
Hi, Need a little help to find out how to apply Selected Menu item style. In my case, the IsHighlighted works when we hover over the menu item. But not able to apply the same style, when the menu option is selected. Will appreciate your help.
<UserControl.Resources>
 
    <Style TargetType="{x:Type telerik:RadMenuItem}">
        <Setter Property="Foreground" Value="White"></Setter>
        <Setter Property="Margin" Value="0,0,10,-8"></Setter>
        <Setter Property="FontSize" Value="14"></Setter>
        <Setter Property="Padding" Value="10,6,10,12"></Setter>
        <Setter Property="Cursor" Value="Hand"></Setter>
        <Setter Property="Effect">
            <Setter.Value><DropShadowEffect ShadowDepth="1" Direction="330" Color="Black" Opacity="0.2" BlurRadius="3"/></Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type telerik:RadMenuItem}">
                    <ControlTemplate.Resources>
                        <LinearGradientBrush x:Key="Blue" EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FF3386E5" Offset="0"/>
                            <GradientStop Color="#FF0053BC" Offset="1"/>
                        </LinearGradientBrush>
                    </ControlTemplate.Resources>
                    <Border CornerRadius="0,0,5,5" x:Name="HoverBlue" Background="Transparent">
                        <TextBlock Text="{TemplateBinding Header}" FontSize="14" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" Effect="{TemplateBinding Effect}" Margin="{TemplateBinding Padding}"></TextBlock>
                    </Border>                       
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsHighlighted" Value="True">
                            <Setter TargetName="HoverBlue" Property="Background" Value="{StaticResource Blue}"/>
                        </Trigger>
                         
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="Logo" TargetType="{x:Type telerik:RadMenuItem}">
        <Setter Property="Foreground" Value="White"></Setter>
        <Setter Property="Margin" Value="5,3,10,0"></Setter>
        <Setter Property="Cursor" Value="Hand"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type telerik:RadMenuItem}">
                    <Border Background="{DynamicResource TrunomiLogo}" Width="26" Height="26"></Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
 
    </Style>
 
</UserControl.Resources>
<Grid>
    <telerik:RadMenu Height="32" VerticalAlignment="Top">
        <telerik:RadMenu.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FF9D9D9D" Offset="0"/>
                <GradientStop Color="#FF7F7F7F" Offset="1"/>
            </LinearGradientBrush>
        </telerik:RadMenu.Background>
        <telerik:RadMenuItem Style="{StaticResource Logo}" Header="Logo" />
        <telerik:RadMenuItem Header="Dashboard" Command="{Binding DashboardClicked}"></telerik:RadMenuItem>
        <telerik:RadMenuItem Header="Entity Manager" Command="{Binding EntityManagerClicked}"></telerik:RadMenuItem>
        <telerik:RadMenuItem Header="Message Center" Command="{Binding MessageCenterManagerClicked}"></telerik:RadMenuItem>
        <telerik:RadMenuItem Header="Audit" Command="{Binding AuditManagerClicked}"></telerik:RadMenuItem>
        <telerik:RadMenuItem Header="Reporting" Command="{Binding ReportingManagerClicked}"></telerik:RadMenuItem>
        <telerik:RadMenuItem Header="Admin" IsEnabled="False"></telerik:RadMenuItem>
        <telerik:RadMenuItem Header="Help" IsEnabled="False"></telerik:RadMenuItem>
    </telerik:RadMenu>
</Grid>

 

2 Answers, 1 is accepted

Sort by
0
Masha
Telerik team
answered on 28 Jul 2014, 11:04 AM
Hello Andy,

I suggest that you use IsChecked property of RadMenuItem to achieve the desired approach as follow:

<Trigger Property="IsChecked" Value="True">
  <Setter TargetName="HoverBlue" Property="Background" Value="{StaticResource Blue}"/>
</Trigger>

However you will also need to handle the ItemClick event of the RadMenu in order to uncheck the other RadMenuItems when you click on a new one. For your convenience I have created a sample project which demonstrates the exact scenario.


Hope this helps.

Regards,
Masha
Telerik
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
Andy
Top achievements
Rank 1
answered on 28 Jul 2014, 07:54 PM
Worked like a charm! Thanks a lot.
Tags
Menu
Asked by
Andy
Top achievements
Rank 1
Answers by
Masha
Telerik team
Andy
Top achievements
Rank 1
Share this question
or