Contextmenu, Seperator -> Background ignored

[Froggie]

In a sample application the Background of the Seperator and the Contextmenu are ignored.
Is this a Bug or am I doing something wrong?

See attached Image. Seperator has a gray background and the ContextMenu is not LimeGreen.

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <telerik:RadTreeListView>
            <telerik:RadContextMenu.ContextMenu>
                <telerik:RadContextMenu x:Name="treeContextMenu" Background="LimeGreen">
                    <telerik:RadMenuItem Header="Test 1" Background="White"/>
                    <telerik:RadMenuItem Header="Test 2" Background="White"/>
                    <telerik:RadMenuItem IsSeparator="True" Background="White"/>
                    <telerik:RadMenuItem Header="Test 3" Background="White"/>
                    <telerik:RadMenuItem Header="Test 4" Background="White"/>
                    <telerik:RadMenuItem Header="Test 5" Background="White"/>
                </telerik:RadContextMenu>
            </telerik:RadContextMenu.ContextMenu>
        </telerik:RadTreeListView>
    </Grid>
</Window>

[Dani]

Hello Sebastian,

The behavior of RadContextMenu when an explicit Background is set is indeed not proper. Background change should be reflected by RadContextMenu.

We have logged and will further test and fix the issue. Meanwhile I would suggest you use a simple work-around. Set the Background of the Border in the PopupContentElement to {TemplateBinding Background} in the style of RadContextMenu:

<Style x:Key="RadContextMenuStyle" TargetType="telerikNavigation:RadContextMenu">
            <Setter Property="IconColumnWidth" Value="28" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="Background" Value="{StaticResource MenuPopupBackground}" />
            <Setter Property="BorderBrush" Value="{StaticResource MenuPopupOuterBorder}" />
            <Setter Property="Foreground" Value="{StaticResource ControlForeground_Normal}" />
            <Setter Property="SnapsToDevicePixels" Value="True" />
            <Setter Property="FocusVisualStyle" Value="{x:Null}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerikNavigation:RadContextMenu">
                        <Grid>
                            <Grid x:Name="PopupContentElement" >

                                <Border BorderThickness="{TemplateBinding BorderThickness}"
                                BorderBrush="{StaticResource MenuPopupOuterBorder}"
                                Background="{TemplateBinding Background}">
                                    <Grid>
                                        <Grid Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IconColumnWidth}" HorizontalAlignment="Left">
                                            <Rectangle Fill="{StaticResource MenuPopupIconsBackground}"
                                            Margin="0 0 2 0" />

                                            <Grid HorizontalAlignment="Right" Margin="{StaticResource MenuPopupIconsSeparatorMargin}">
                                                <Rectangle Width="1" HorizontalAlignment="Right" Margin="0 0 1 0" Fill="{StaticResource MenuPopupIconsSeparatorLeft}" />
                                                <Rectangle Width="1" HorizontalAlignment="Right" Margin="0 0 0 0" Fill="{StaticResource MenuPopupIconsSeparatorRight}" />
                                            </Grid>
                                        </Grid>
                                        <ItemsPresenter Margin="1" />
                                    </Grid>
                                </Border>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

The Separator menu items do not have a background because they are not truely menu items. They serve only as visual elements and do not contain in their templates any element that would reflect a Background change as other menu item templates would. We think this is the proper behavior in view of the function they have in the menu structure.

If you wish to customize them, you will need to manually modify the SeparatorTemplate of RadMenuItem.

I hope this information will be helpful.

Kind regards,
Dani
the Telerik team

[Froggie]

Thanks for your feedback and clarification.