Implicit styles on RadMenuItems?

[hwsoderlund]

There seems to be some problems with setting implicit styles on the RadMenuItem control. No matter what I try, implicit styles, explicit styles etc., nothing seems to "take". If I hard code the Style directly on the _content_ (in this case a TextBlock) of the RadMenuItem Header, it works, but in my opinion this is too much work. We use the context menus heavily in our app and if I want this to work I need to copy/paste the style reference well over a thousand times. Shouldn't it be possible to set implicit styles globally for the RadMenuItem and its Header content?

I put together some examples just to try out the various options and see if I could get it to work, but no luck so far. The way I see it, all of the menu examples below should work, but only the last one does, where I am setting a style directly on the hard coded TextBlock in the RadMenuItem Header. The example consists of several identical RadContextMenus, each of them built a little differently. The idea is to get the menus in Comic Sans MS at 15pt. But like I said, only the last of the examples work.

<UserControl x:Class="SilverlightApplication3.MainPage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             mc:Ignorable="d"
             d:DesignHeight="300"
             d:DesignWidth="400">

    <UserControl.Resources>

        <!--RadMenuItemStyle-->
        <Style x:Key="RadMenuItemStyle"
               TargetType="telerik:RadMenuItem">
            <Setter Property="FontFamily"
                    Value="Comic Sans MS"></Setter>
        </Style>

        <!--Implicit style for RadMenuItem-->
        <Style TargetType="telerik:RadMenuItem"
               BasedOn="{StaticResource RadMenuItemStyle}">
        </Style>

        <!--Implicit style for RadContextMenu. Seems to have no effect.-->
        <Style TargetType="telerik:RadContextMenu">
            <Setter Property="FontFamily"
                    Value="Comic Sans MS"></Setter>
        </Style>

        <!--TextBlockStyle-->
        <Style x:Key="TextBlockStyle"
               TargetType="TextBlock">
            <Setter Property="FontFamily"
                    Value="Comic Sans MS"></Setter>
            <Setter Property="FontSize"
                    Value="16"></Setter>
        </Style>

        <!--Implicit style for TextBlock-->
        <Style TargetType="TextBlock"
               BasedOn="{StaticResource TextBlockStyle}">
        </Style>

        <!--Implicit style for HyperlinkButton-->
        <Style TargetType="HyperlinkButton">
            <Setter Property="FontFamily"
                    Value="Comic Sans MS"></Setter>
            <Setter Property="FontSize"
                    Value="16"></Setter>
        </Style>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot"
          Background="White">
        <ScrollViewer telerik:StyleManager.Theme="Metro">

            <StackPanel>

                <TextBlock Text="This is only to test that the implicit TextBlock style works on its own. "
                           Margin="20"></TextBlock>

                <HyperlinkButton Content="Bound Menu"
                                 HorizontalAlignment="Left"
                                 VerticalAlignment="Top"
                                 Margin="20">
                    <telerik:RadContextMenu.ContextMenu>
                        <telerik:RadContextMenu EventName="Click"
                                                telerik:StyleManager.Theme="Metro"
                                                Placement="Bottom"
                                                ItemsSource="{Binding MenuItems}">
                            <telerik:RadContextMenu.ItemTemplate>
                                <telerik:HierarchicalDataTemplate>

                                    <!--The implicit TextBlock style should be automatically applied here, but it is not. -->

                                    <TextBlock Text="{Binding}"></TextBlock>

                                </telerik:HierarchicalDataTemplate>
                            </telerik:RadContextMenu.ItemTemplate>
                        </telerik:RadContextMenu>
                    </telerik:RadContextMenu.ContextMenu>
                </HyperlinkButton>

                <HyperlinkButton Content="Hard coded menu with string headers"
                                 HorizontalAlignment="Left"
                                 VerticalAlignment="Top"
                                 Margin="20">
                    <telerik:RadContextMenu.ContextMenu>
                        <telerik:RadContextMenu EventName="Click"
                                                telerik:StyleManager.Theme="Metro"
                                                Placement="Bottom">
                            <telerik:RadContextMenu.Items>

                                <!--The implicit RadMenuItem style should be active here -->

                                <telerik:RadMenuItem Header="Item 1"></telerik:RadMenuItem>
                                <telerik:RadMenuItem Header="Item 2"></telerik:RadMenuItem>
                                <telerik:RadMenuItem Header="Item 3"></telerik:RadMenuItem>

                            </telerik:RadContextMenu.Items>
                        </telerik:RadContextMenu>
                    </telerik:RadContextMenu.ContextMenu>
                </HyperlinkButton>

                <HyperlinkButton Content="Hard coded menu, string headers, explicitly set style on RadMenuItem"
                                 HorizontalAlignment="Left"
                                 VerticalAlignment="Top"
                                 Margin="20">
                    <telerik:RadContextMenu.ContextMenu>
                        <telerik:RadContextMenu EventName="Click"
                                                telerik:StyleManager.Theme="Metro"
                                                Placement="Bottom">
                            <telerik:RadContextMenu.Items>

                                <!--Even if I set the style explicitly on the RadMenuItem it still does not work.  -->

                                <telerik:RadMenuItem Header="Item 1"
                                                     Style="{StaticResource RadMenuItemStyle}"></telerik:RadMenuItem>
                                <telerik:RadMenuItem Header="Item 2"
                                                     Style="{StaticResource RadMenuItemStyle}"></telerik:RadMenuItem>
                                <telerik:RadMenuItem Header="Item 3"
                                                     Style="{StaticResource RadMenuItemStyle}"></telerik:RadMenuItem>

                            </telerik:RadContextMenu.Items>
                        </telerik:RadContextMenu>
                    </telerik:RadContextMenu.ContextMenu>
                </HyperlinkButton>

                <HyperlinkButton Content="Hard coded menu with TextBlock headers"
                                 HorizontalAlignment="Left"
                                 VerticalAlignment="Top"
                                 Margin="20">
                    <telerik:RadContextMenu.ContextMenu>
                        <telerik:RadContextMenu EventName="Click"
                                                telerik:StyleManager.Theme="Metro"
                                                Placement="Bottom">
                            <telerik:RadContextMenu.Items>

                                <!--Both implicit styles should be active (for TextBlock and RadMenuItem), but still no Comic Sans. -->

                                <telerik:RadMenuItem Style="{StaticResource RadMenuItemStyle}">
                                    <telerik:RadMenuItem.Header>
                                        <TextBlock Text="Item 1"></TextBlock>
                                    </telerik:RadMenuItem.Header>
                                </telerik:RadMenuItem>

                                <telerik:RadMenuItem Style="{StaticResource RadMenuItemStyle}">
                                    <telerik:RadMenuItem.Header>
                                        <TextBlock Text="Item 2"></TextBlock>
                                    </telerik:RadMenuItem.Header>
                                </telerik:RadMenuItem>

                                <telerik:RadMenuItem Style="{StaticResource RadMenuItemStyle}">
                                    <telerik:RadMenuItem.Header>
                                        <TextBlock Text="Item 3"></TextBlock>
                                    </telerik:RadMenuItem.Header>
                                </telerik:RadMenuItem>

                            </telerik:RadContextMenu.Items>
                        </telerik:RadContextMenu>
                    </telerik:RadContextMenu.ContextMenu>
                </HyperlinkButton>

                <HyperlinkButton Content="Bound menu with style on TextBlock in data template (this is the only one where Comic Sans MS is correctly applied.)"
                                 HorizontalAlignment="Left"
                                 VerticalAlignment="Top"
                                 Margin="20">
                    <telerik:RadContextMenu.ContextMenu>
                        <telerik:RadContextMenu EventName="Click"
                                                telerik:StyleManager.Theme="Metro"
                                                Placement="Bottom"
                                                ItemsSource="{Binding MenuItems}">
                            <telerik:RadContextMenu.ItemTemplate>
                                <telerik:HierarchicalDataTemplate>

                                    <!--Finally. When setting the style explicitly on TextBlock things work as expected. -->

                                    <TextBlock Text="{Binding}"
                                               Style="{StaticResource TextBlockStyle}"></TextBlock>

                                </telerik:HierarchicalDataTemplate>
                            </telerik:RadContextMenu.ItemTemplate>
                        </telerik:RadContextMenu>
                    </telerik:RadContextMenu.ContextMenu>
                </HyperlinkButton>

            </StackPanel>

        </ScrollViewer>

    </Grid>
</UserControl>

[Todor]

Hi Henrik,

When you want to style all your controlsof a certain type implicitly, you need to declare the styles in the App.xaml file so that they are accessible from any UserControl within your application. This is the way to style all the controls of the targeted type in your application. So the only change you need to do is to move this code-block:

<!--RadMenuItemStyle-->
        <Style x:Key="RadMenuItemStyle"
               TargetType="telerik:RadMenuItem">
            <Setter Property="FontFamily"
                    Value="Comic Sans MS"></Setter>
        </Style>

        <!--Implicit style for RadMenuItem-->
        <Style TargetType="telerik:RadMenuItem"
               BasedOn="{StaticResource RadMenuItemStyle}">
        </Style>

        <!--Implicit style for RadContextMenu. Seems to have no effect.-->
        <Style TargetType="telerik:RadContextMenu">
            <Setter Property="FontFamily"
                    Value="Comic Sans MS"></Setter>
        </Style>

from MainPage.xaml to App.xaml.

Also, remove any style applied explicitly to your RadMenuItems, i.e. applied by x:Key

Style="{StaticResource RadMenuItemStyle}"

Hope this helps.

Greetings,
Todor
the Telerik team

[hwsoderlund]

The reason I put them directly in the usercontrol was just for the purpose of demonstrating the problem. Here is a new code example using App.xaml where, still, none of the menus get the correct style. I have now removed all the implicit TextBlock styling. Am I doing something wrong here?

In App.xaml:

<!--RadMenuItemStyle-->
<Style x:Key="RadMenuItemStyle"
        TargetType="telerik:RadMenuItem">
    <Setter Property="FontFamily"
            Value="Comic Sans MS"></Setter>
</Style>

<!--Implicit style for RadMenuItem-->
<Style TargetType="telerik:RadMenuItem"
        BasedOn="{StaticResource RadMenuItemStyle}">
</Style>

<!--Implicit style for RadContextMenu. Seems to have no effect.-->
<Style TargetType="telerik:RadContextMenu">
    <Setter Property="FontFamily"
            Value="Comic Sans MS"></Setter>
</Style>

And the usercontrol:

<UserControl x:Class="SilverlightApplication3.MainPage2"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             mc:Ignorable="d">

    <Grid x:Name="LayoutRoot"
          Background="White">
        <ScrollViewer telerik:StyleManager.Theme="Metro">

            <StackPanel>

                <!--Databound menu-->
                <HyperlinkButton Content="Databound menu"
                                 HorizontalAlignment="Left"
                                 VerticalAlignment="Top"
                                 Margin="20">
                    <telerik:RadContextMenu.ContextMenu>
                        <telerik:RadContextMenu EventName="Click"
                                                telerik:StyleManager.Theme="Metro"
                                                Placement="Bottom"
                                                ItemsSource="{Binding MenuItems}">
                            <telerik:RadContextMenu.ItemTemplate>
                                <telerik:HierarchicalDataTemplate>

                                    <TextBlock Text="{Binding}"></TextBlock>

                                </telerik:HierarchicalDataTemplate>
                            </telerik:RadContextMenu.ItemTemplate>
                        </telerik:RadContextMenu>
                    </telerik:RadContextMenu.ContextMenu>
                </HyperlinkButton>

                <!--Hard coded RadMenuItems-->
                <HyperlinkButton Content="Hard coded RadMenuItems"
                                 HorizontalAlignment="Left"
                                 VerticalAlignment="Top"
                                 Margin="20">
                    <telerik:RadContextMenu.ContextMenu>
                        <telerik:RadContextMenu EventName="Click"
                                                telerik:StyleManager.Theme="Metro"
                                                Placement="Bottom">
                            <telerik:RadContextMenu.Items>

                                <telerik:RadMenuItem Header="Item 1"></telerik:RadMenuItem>
                                <telerik:RadMenuItem Header="Item 2"></telerik:RadMenuItem>
                                <telerik:RadMenuItem Header="Item 3"></telerik:RadMenuItem>

                            </telerik:RadContextMenu.Items>
                        </telerik:RadContextMenu>
                    </telerik:RadContextMenu.ContextMenu>
                </HyperlinkButton>

                <!--Hard coded menu with TextBlock headers-->
                <HyperlinkButton Content="Hard coded menu with TextBlock headers"
                                 HorizontalAlignment="Left"
                                 VerticalAlignment="Top"
                                 Margin="20">
                    <telerik:RadContextMenu.ContextMenu>
                        <telerik:RadContextMenu EventName="Click"
                                                telerik:StyleManager.Theme="Metro"
                                                Placement="Bottom">
                            <telerik:RadContextMenu.Items>

                                <telerik:RadMenuItem>
                                    <telerik:RadMenuItem.Header>
                                        <TextBlock Text="Item 1"></TextBlock>
                                    </telerik:RadMenuItem.Header>
                                </telerik:RadMenuItem>

                                <telerik:RadMenuItem>
                                    <telerik:RadMenuItem.Header>
                                        <TextBlock Text="Item 2"></TextBlock>
                                    </telerik:RadMenuItem.Header>
                                </telerik:RadMenuItem>

                                <telerik:RadMenuItem>
                                    <telerik:RadMenuItem.Header>
                                        <TextBlock Text="Item 3"></TextBlock>
                                    </telerik:RadMenuItem.Header>
                                </telerik:RadMenuItem>

                            </telerik:RadContextMenu.Items>
                        </telerik:RadContextMenu>
                    </telerik:RadContextMenu.ContextMenu>
                </HyperlinkButton>

            </StackPanel>

        </ScrollViewer>

    </Grid>
</UserControl>

[Todor]

Hello Henrik,

I tried to reproduce your problem locally, but to no avail. Please, find attached a sample project with your source code and the mentioned changes in my last post.

If you want to read more about implicit styles, you can read this article.

I will be glad to help you further.

Kind regards,
Todor
the Telerik team

[hwsoderlund]

At first I was really surprised when I ran your sample project, because you are right. It works. But then I noticed that you have not included a reference to Telerik.Windows.Themes.Metro.dll, and that the default theme is used instead. If you add a reference to the Metro theme assembly, the sample project stops working. See the attached screen shots. I guess now we know that there is a bug somewhere in the Metro theme. :)

[Todor]

Hello Henrik,

When you want to use implicit styles, you should not use telerik:StylesManager, because when you are doing that, you are overriding the implicit styles.

If you want to customize a style from a particular theme, you should base your custom style upon that theme. Here you can read more about that.

MetroTheme is the only theme which uses hard-coded FontFamily properties. So, if you want to change the FontFamily, you have to do that in the theme.In your case, for RadMenu control, the ResourceDictionary you need to use and edit is Telerik.Windows.Controls.Navigation.xaml. 

Please, find the attached same project containing the above changes.

Hope that helps.

Kind regards,
Todor
the Telerik team

[hwsoderlund]

Ok, I can see your point about not using implicit styles and setting the theme at the same time. But why are the font family properties hard coded in the theme? That seems crazy. In the current refactoring I am throwing out our old, heavily designed UI and replacing it with a much more neutral and maintainable Metro-style UI, hence our use of the Metro theme. But we still need to maintain some degree  of customization for the clients, i.e. the color scheme, the font family and the font sizes used. I was expecting this to work the same with the Metro theme as with the other themes. In fact, I am pasting another example below where I hard code the font family directly on the RadContextMenu and also on the RadMenuItems. It has no effect whatsoever, and this is without any implicit styling. To my understanding, locally set properties should always take precedence over the ones set in the style. Am I wrong?

Also, I am fully aware that I can customize the theme, but we are really trying to avoid that. With our previous UI we did a lot of heavy customization and ended up in a really bad situation. Every time Telerik would release an upgrade something would break and we would have to extract a bunch of templates and do the same customizations all over again again. This was repeated in some degree for every new Telerik release. So you can understand if we are trying to stay away from that approach this time around. 

Example with hard coded font family (no implicit styles used at all this time)

In App.xaml.cs:

StyleManager.ApplicationTheme = new MetroTheme();

And the user control:

<UserControl x:Class="SilverlightApplication3.MainPage2"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             mc:Ignorable="d">

    <Grid x:Name="LayoutRoot"
          Background="White">
        <ScrollViewer>

            <StackPanel>

                <!--Databound menu-->
                <HyperlinkButton Content="Databound menu"
                                 HorizontalAlignment="Left"
                                 VerticalAlignment="Top"
                                 Margin="20">
                    <telerik:RadContextMenu.ContextMenu>
                        <telerik:RadContextMenu EventName="Click"
                                                FontFamily="Comic Sans MS"
                                                Placement="Bottom"
                                                ItemsSource="{Binding MenuItems}">
                            <telerik:RadContextMenu.ItemTemplate>
                                <telerik:HierarchicalDataTemplate>
                                    <TextBlock Text="{Binding}"></TextBlock>
                                </telerik:HierarchicalDataTemplate>
                            </telerik:RadContextMenu.ItemTemplate>
                        </telerik:RadContextMenu>
                    </telerik:RadContextMenu.ContextMenu>
                </HyperlinkButton>

                <!--Hard coded RadMenuItems-->
                <HyperlinkButton Content="Hard coded RadMenuItems"
                                 HorizontalAlignment="Left"
                                 VerticalAlignment="Top"
                                 Margin="20">
                    <telerik:RadContextMenu.ContextMenu>
                        <telerik:RadContextMenu EventName="Click"
                                                FontFamily="Comic Sans MS"
                                                Placement="Bottom">
                            <telerik:RadContextMenu.Items>

                                <telerik:RadMenuItem FontFamily="Comic Sans MS" Header="Item 1"></telerik:RadMenuItem>
                                <telerik:RadMenuItem FontFamily="Comic Sans MS" Header="Item 2"></telerik:RadMenuItem>
                                <telerik:RadMenuItem FontFamily="Comic Sans MS" Header="Item 3"></telerik:RadMenuItem>

                            </telerik:RadContextMenu.Items>
                        </telerik:RadContextMenu>
                    </telerik:RadContextMenu.ContextMenu>
                </HyperlinkButton>

                <!--Hard coded menu with TextBlock headers-->
                <HyperlinkButton Content="Hard coded menu with TextBlock headers"
                                 HorizontalAlignment="Left"
                                 VerticalAlignment="Top"
                                 Margin="20">
                    <telerik:RadContextMenu.ContextMenu>
                        <telerik:RadContextMenu EventName="Click"
                                                FontFamily="Comic Sans MS"
                                                Placement="Bottom">
                            <telerik:RadContextMenu.Items>

                                <telerik:RadMenuItem FontFamily="Comic Sans MS">
                                    <telerik:RadMenuItem.Header>
                                        <TextBlock Text="Item 1"></TextBlock>
                                    </telerik:RadMenuItem.Header>
                                </telerik:RadMenuItem>

                                <telerik:RadMenuItem FontFamily="Comic Sans MS">
                                    <telerik:RadMenuItem.Header>
                                        <TextBlock Text="Item 2"></TextBlock>
                                    </telerik:RadMenuItem.Header>
                                </telerik:RadMenuItem>

                                <telerik:RadMenuItem FontFamily="Comic Sans MS">
                                    <telerik:RadMenuItem.Header>
                                        <TextBlock Text="Item 3"></TextBlock>
                                    </telerik:RadMenuItem.Header>
                                </telerik:RadMenuItem>

                            </telerik:RadContextMenu.Items>
                        </telerik:RadContextMenu>
                    </telerik:RadContextMenu.ContextMenu>
                </HyperlinkButton>

            </StackPanel>

        </ScrollViewer>

    </Grid>
</UserControl>

[Yana]

Hello Henrik,

We're sorry to hear about your frustration while using RadControls.  We are always trying to make the upgrades as painless as possible, but you are right that custom themes are not so easy to maintain. However, in this case with the Metro theme there is no other way to change the FontSize and FontFamily of the items except in the theme xaml.  Even if you set the properties directly to the items as in the last example. they are overridden by StyleManager.

We are so sorry for the caused inconvenience.

Regards,
Yana
the Telerik team