This is a migrated thread and some comments may be shown as answers.

How to set custom shape for radbutton

5 Answers 116 Views
Buttons
This is a migrated thread and some comments may be shown as answers.
Mahdi
Top achievements
Rank 1
Mahdi asked on 08 Oct 2019, 11:42 AM

Hi

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

5 Answers, 1 is accepted

Sort by
0
Dimitar Dinev
Telerik team
answered on 09 Oct 2019, 11:06 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Mahdi
Top achievements
Rank 1
answered on 10 Oct 2019, 02:50 PM

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?

0
Vicky
Telerik team
answered on 15 Oct 2019, 08:46 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Mahdi
Top achievements
Rank 1
answered on 17 Oct 2019, 02:46 PM

Hi Vicky

Thanks for your answer.

My background color is gradient color.

0
Vicky
Telerik team
answered on 18 Oct 2019, 10:05 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Buttons
Asked by
Mahdi
Top achievements
Rank 1
Answers by
Dimitar Dinev
Telerik team
Mahdi
Top achievements
Rank 1
Vicky
Telerik team
Share this question
or