New to Telerik UI for .NET MAUI? Start a free 30-day trial

Creating Circular Buttons

Environment

Product Telerik UI for .NET MAUI Button
Product Version Telerik Ui for .NET MAUI 0.2.0

Description

How can I create a circular Button based on the Button control for my Telerik UI for .NET MAUI project?

Solution

To create a circular button with the Telerik UI for .NET MAUI Button, adjust its Width, Height, and BorderRadius properties in the following way:

  • Set Width as equal to Height.
  • Set BorderRadius as half of the Width/Height value.

In some cases, you may need to set a BorderWidth value in order for the BorderRadius to take effect.

The following example demonstrates how to implement the suggested approach. Note that the CornerRadius property is not supported on Android. For more information, refer to article on implementing the CornerRadius support.

  1. Define the RadButton:

    <telerikInput:RadButton WidthRequest="120"
                          HeightRequest="120"                                
                          Text="Circle Button"
                          FontSize="Micro"
                          TextColor="White"
                          BackgroundColor="DarkBlue"
                          CornerRadius="60"  />
    
  2. Add the namespace:

    xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.Maui.Controls.Compatibility"
    

    The following image shows the end result.

Button Key Features Example

In this article
Not finding the help you need?