Setting a gradient fill pattern for RadMenuItem

[Kathy]

We are cloning a dialog to be very similar to the Cell Styles dialog in excel and one of the things we need to do is to put a gradient style ( ie. 50% gray, crosshatch, etc ) on a RadMenuItem. Each of our cells is a RadMenuItem. Do you have any samples where something like this was accomplished?

[Dinko | Tech Support Engineer]

Hi Kathy,

What you can do to achieve this is to use LinearGradientBrush class and specify inside it GradientStop with a different color. For example, the below code snippet shows the LinearGradientBrush of the RadButton control in the default theme (Office_Black). 

<LinearGradientBrush  EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FFFFFFFF" Offset="0"/>
    <GradientStop Color="#FFDCDCDC" Offset="0.50"/>
    <GradientStop Color="#FFADADAD" Offset="0.50"/>
    <GradientStop Color="#FFD4D4D4" Offset="1"/>
</LinearGradientBrush>

To apply this to all RadMenuItems you can use Implicit Style.

<Style TargetType="telerik:RadMenuItem" BasedOn="{StaticResource RadMenuItemStyle}">
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush  EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFFFFFFF" Offset="0"/>
                <GradientStop Color="#FFDCDCDC" Offset="0.50"/>
                <GradientStop Color="#FFADADAD" Offset="0.50"/>
                <GradientStop Color="#FFD4D4D4" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
</Style>

As a side note: If you are using NoXAML binaries, the BasedOn property needs to be set to the default style of the control. Otherwise, the implicit style will override the default one and the control will not appear.

Regards,
Dinko
Progress Telerik

[Kathy]

I figured out how to do the crosshatching and it looks nice. But now they also want the background color to change. Right now, I use the brush I created for the crosshatching to be the fill for the background. Is it possible to have both the crosshatch and the background color?

[Vladimir Stoyanov]

Hello Kathy,

Can you elaborate on what you mean by "Is it possible to have both the crosshatch and the background color?"? Can you send me some pictures of the expected result? This will hopefully allow me to better understand the requirements and try to think of a suitable suggestion. 

Looking forward to your reply.

Regards,
Vladimir Stoyanov
Progress Telerik

[Kathy]

I've attached a few screen shots. If you open up Excel, fill in some cell values and then click cell styles, you will get a dialog with various cell styles. The first screen shot, PatternsNoFill, will show you what I currently have. We have black lines and dots against a white background. Picture YellowPlusDots shows how a user can pick a fill color and a pattern. Picture UltimateGoal shows what I need to do, have the yellow background with the black crosshatch pattern. We're doing this with the RadMenuItems class, each cell that we have in our dialog is a RadMenuItem. I was able to figure out how to do the basic horizontal and vertical lines, but not sure how I can do that plus have a colored background.

[Vladimir Stoyanov]

Hello Kathy,

Thank you for the shared pictures and the provided description. 

Can you check out the following articles, where similar scenarios were discussed? 

- Creating a Hatched / Patterned Brush in WPF 

- Create a hatch pattern in WPF

To recap you can try the approach of using a VisualBrush to achieve the Background and the pattern at the same time. 

I hope you find this helpful.

Regards,
Vladimir Stoyanov
Progress Telerik