Creating Circular Buttons in .NET MAUI
To create a circular button with the Telerik UI for .NET MAUI Button, adjust its Width
, Height
, and BorderRadius
properties.
-
Width
has to be equal toHeight
. -
BorderRadius
has to be half of theWidth
/Height
value.
In some cases, you may need to set a
BorderWidth
value in order forBorderRadius
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.
<telerik:RadButton WidthRequest="120"
HeightRequest="120"
Text="Circle Button"
FontSize="Micro"
TextColor="White"
BackgroundColor="DarkBlue"
CornerRadius="60" />
Add the namespace:
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
The following image shows the end result.