Need Help for Selected Menu Item Style

3 posts, 0 answers
  1. Andy
    Andy avatar
    13 posts
    Member since:
    Apr 2014

    Posted 24 Jul 2014 Link to this post

    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. Masha
    Admin
    Masha avatar
    355 posts

    Posted 28 Jul 2014 Link to this post

    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.
     
  3. UI for WPF is Visual Studio 2017 Ready
  4. Andy
    Andy avatar
    13 posts
    Member since:
    Apr 2014

    Posted 28 Jul 2014 in reply to Masha Link to this post

    Worked like a charm! Thanks a lot.
Back to Top