Need Help for Selected Menu Item Style

[Andy]

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>

 

[Masha]

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

 

 

[Andy]

Worked like a charm! Thanks a lot.