How to set custom shape for radbutton

[Mahdi]

Hi

How can I create a custom Hexagons RadButton with material style and effect?

[Dimitar Dinev]

Hello Mahdi,

Thank you for the screenshot.

You can achieve that by editing the control template of RadButton. However, creating a hexagon shaped RadButton in the Material and Fluent themes is not as straightforward as in the other themes. The reason for that is because they have MaterialControl and FluentControl, respectively, which may be more confusing for creating custom shapes.

The main challenge with the Material theme was the ripple effect - the MaterialControl has a property called IsSmartClipped. It sets whether the ripple should be within the boundaries of the MaterialControl. This clip is however a Rectangle that does not match the hexagon shape. If you do not like it, you can either set the property to true to change the ripple shape to its default which is circular, or disable the effect by setting the IsRippleEnabled property to false.

Attached, you can find a sample project with hexagon shaped RadButton. Please, review it and let me know if it delivered the desired result.

Regards,
Dimitar Dinev
Progress Telerik

[Mahdi]

Hello Dimitar Dinev

Thank you for your answer.

This sample was very good but my background is colorful and Ripple effect is not correct.

I used Material because Ripple effect is beautiful; Really there aren't any way for match Ripple on hexagon shape?

[Vicky]

Hi,

The easiest way to visually match the shape of the Ripple effect with the hexagon button is to change the color of the Ripple. A possible way to achieve this is to set the MaterialPalette's RippleColor to the color of your application. If we use the sample project that my colleague sent you in his previous reply, the code snippet for achieving this will look like this:

public MainWindow()
{
    MaterialPalette.Palette.RippleColor = Colors.SteelBlue;
    InitializeComponent();
}

This change will affect the ripple color for all your MaterialControls in the application and will work best if the application's background is the same in all views.

Please, give it a try and let me know if it works for you.

Best Regards,
Vicky
Progress Telerik

[Mahdi]

Hi Vicky

Thanks for your answer.

My background color is gradient color.

[Vicky]

Hi Mahdi,

Thank you for the attached screenshot.

The suggested approach for changing the MaterialPalette's RippleColor to be in sync with the application background might not deliver the expected results for gradient colors. Still, this approach is valid for solid colors. If you need to have gradient background, you can consider implementing a custom control that inherits the MaterialControl and modifies its clipping logic. If you choose to try this out, here are some guiding steps that you could follow:

• Implement a custom method that creates a custom clip geometry in the desired shape (e.g. GenerateCustomClipGeometry)
• Implement a custom method that will be called when this clip needs to be applied (e.g. ApplyCustomSmartClip) - the following code snippet shows the default implementation of MaterialControl's ApplySmartClip method. Please keep in mind that this method is also called also for the methods OnCornerRadiusChanged and OnIsSmartClippedChanged.
  

  internal virtual void ApplySmartClip()
  {
  	Rect boundingRect = new Rect(this.RenderSize);
  	Rect innerRect = CalculateRectIncludedBorderThickness(boundingRect, this.BorderThickness);
  	if (boundingRect.Size.Height > 0 && boundingRect.Size.Width > 0)
  	{
  		this.Clip = GenerateClipGeometry(innerRect, new Radiuses(this.CornerRadius, this.BorderThickness));
  	}
  }

• Override MaterialControl's OnRenderSizeChanged event in your custom class and call the implemented ApplyCustomSmartClip method:
  

  public class HexagonShapeMaterialControl : MaterialControl
  {
  	protected override void OnRenderSizeChanged(SizeChangedInfo sizeInfo)
  	{
  		base.OnRenderSizeChanged(sizeInfo);
  		if (this.IsSmartClipped)
  		{
  			ApplyCustomSmartClip();
  		}
  	}
  }

I hope that you find this information helpful. Such custom implementations go out of the scope of our support services. If you require any further assistance with similar customizations, I can suggest contacting our Professional Services team.

Regards,
Vicky
Progress Telerik