Apply Style To RadSeparator

[Lee Weisenberger]

I have a context menu defined as follows:

<telerikNavigation:RadContextMenu.ContextMenu>
    <telerikNavigation:RadContextMenu Opened="RadContextMenu_Opened" ItemClick="RadContextMenu_ItemClick" ItemContainerStyle="{StaticResource MenuItemStyle1}">
        <telerikNavigation:RadMenuItem x:Name="cutMenu" Header="Cut" Icon="Images/CutHS.png"  />
        <telerikNavigation:RadMenuItem x:Name="copyMenu" Header="Copy" Icon="Images/CopyHS.png"/>
        <telerikNavigation:RadMenuItem IsSeparator="True" />
        <telerikNavigation:RadSeparator />
        <telerikNavigation:RadMenuItem x:Name="pasteMenu" Header="Paste" Icon="Images/PasteHS.png" />
    </telerikNavigation:RadContextMenu>
</telerikNavigation:RadContextMenu.ContextMenu>

The problem is that custom style that I created does not apply to either of the two menu separators define above.

I even tried to create a style specifically targeted to a RadSeparator and that didn't work.

Why doesn't the style apply to either of the separators and how do I get it to work?

Thank you.

[Boyan]

Hello Lee Weisenberger,

You should be able to set separator style using ItemContainerStyle. When edit the ItemContainerStyle in Blend in the Xaml that is generated you should fine this lines:

<ControlTemplate x:Key="SeparatorTemplate" TargetType="telerikNavigation:RadMenuItem">
            <Grid Height="1" Margin="{StaticResource MenuItemSeparatorMargin}">
                <Rectangle Fill="{StaticResource MenuItemSeparatorTop}" Height="1" VerticalAlignment="Top"/>
                <Rectangle Fill="{StaticResource MenuItemSeparatorBottom}" Height="1" VerticalAlignment="Bottom"/>
            </Grid>
        </ControlTemplate>

You can change this in order to modify the look of the separator. Then use RadMenuItem with IsSeparator set to true, as RadSeparator is obsolete. This should work for you.

If you still have problems please let me know.

Regards,
Boyan
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Lee Weisenberger]

I'm not sure I understand what you are suggesting.  I have already created a style for the RadMenuItem as follows:

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
    xmlns:Telerik_Windows_Controls_Chromes="clr-namespace:Telerik.Windows.Controls.Chromes;assembly=Telerik.Windows.Controls"
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls" >



    <Style x:Key="MenuItemStyle1" TargetType="telerikNavigation:RadMenuItem">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Padding" Value="4,3,2,3"/>
        <Setter Property="Template">
            <Setter.Value>

                <ControlTemplate TargetType="telerikNavigation:RadMenuItem">
                    <Grid>
                        <Grid.Background>
                            <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" SpreadMethod="Reflect" StartPoint="0.5,0">
                                <LinearGradientBrush.RelativeTransform>
                                    <CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="273.27"/>
                                </LinearGradientBrush.RelativeTransform>
                                <GradientStop Color="#FFB1330D" Offset="0.181"/>
                                <GradientStop Color="#FFD45700" Offset="0.879"/>
                            </LinearGradientBrush>
                        </Grid.Background>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Presenter"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Unfocused"/>
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Bg"/>
                                        <ColorAnimation Duration="0" To="#40FFFFFF" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="InnerBorder"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Rectangle Fill="{TemplateBinding Background}" RadiusY="2" RadiusX="2" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="1"/>
                        <Rectangle x:Name="Bg" Opacity="0" RadiusY="2" RadiusX="2" Stroke="#8071CBF1" StrokeThickness="1">
                            <Rectangle.Fill>
                                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                    <GradientStop Color="#34C5EBFF" Offset="0"/>
                                    <GradientStop Color="#34080605" Offset="1"/>
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>
                        <Rectangle x:Name="InnerBorder" Margin="1" RadiusY="2" RadiusX="2" Stroke="Transparent"/>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition MinWidth="24" Width="Auto"/>
                                <ColumnDefinition Width="4"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="17"/>
                            </Grid.ColumnDefinitions>
                            <ContentPresenter Content="{TemplateBinding Icon}" Margin="1" VerticalAlignment="Center"/>
                            <ContentPresenter x:Name="Presenter" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="2" Margin="{TemplateBinding Padding}"/>
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

Now why doesn't that apply to my RadMenuItem that uses "IsSeparator='True'"?

<telerikNavigation:RadContextMenu.ContextMenu>
    <telerikNavigation:RadContextMenu Opened="RadContextMenu_Opened" ItemClick="RadContextMenu_ItemClick" ItemContainerStyle="{StaticResource MenuItemStyle1}">
        <telerikNavigation:RadMenuItem x:Name="cutMenu" Header="Cut" Icon="Images/CutHS.png"  />
        <telerikNavigation:RadMenuItem x:Name="copyMenu" Header="Copy" Icon="Images/CopyHS.png"/>
        <telerikNavigation:RadMenuItem IsSeparator="True" />
        <telerikNavigation:RadSeparator />
        <telerikNavigation:RadMenuItem x:Name="pasteMenu" Header="Paste" Icon="Images/PasteHS.png" />
    </telerikNavigation:RadContextMenu>
</telerikNavigation:RadContextMenu.ContextMenu>

If I'm reading your post correctly, it looks like I'm already doing what you are suggesting.  Is there something else that I need to do, or is there something specific that I'm doing wrong?

Also, when I tried to paste your code into my project I get errors in the editor that say that the resource MenuItemSeparatorMargin, MenuItemSeparatorTop, and MenuItemSeparatorBottom can not be resolved.  

Am I missing something?

[Boyan]

Hi Lee Weisenberger,

Sorry for not explaining myself right. When IsSeparator= True then ControlTemplate is using SeparatorTemplateKey . So in order to style the separator you should add this code to your style:

<Setter Property="SeparatorTemplateKey">
              <Setter.Value>
                  <ControlTemplate x:Key="SeparatorTemplate" TargetType="telerikNavigation:RadMenuItem">
                      <Grid Height="10" Margin="0, 3, 0, 0">
                          <Rectangle Fill="Red" Height="5" VerticalAlignment="Top"/>
                          <Rectangle Fill="Green" Height="5" VerticalAlignment="Bottom"/>
                      </Grid>
                  </ControlTemplate>
              </Setter.Value>
          </Setter>

I have also applied a sample project. Please let me know if you need more help.



All the best,
Boyan
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Lee Weisenberger]

Thanks.  That worked.