How to Create a Different Shape of .NET MAUI Button

This section illustrates how to create a different shape of .NET MAUI Button. In .NET MAUI, you can customize the shape of a button using the CornerRadius property to create various shapes. The CornerRadius property defines the radius of each corner of the button. Here is an example of how to create different shapes for .NET MAUI buttons:

Define a button style in your XAML resources:

 <ContentPage.Resources>
     <Style TargetType="buttons:SfButton" x:Key="sfButtonStyle">            
         <Setter Property="HeightRequest" Value="50"/>
         <Setter Property="WidthRequest" Value="95"/>
         <Setter Property="Text" Value="Button"/>
         <Setter Property="Margin" Value="8,12,8,0"/>           
     </Style>
 </ContentPage.Resources>

Use a FlexLayout to arrange and display your custom-shaped buttons:

     <FlexLayout
      HorizontalOptions="Start" 
      VerticalOptions="Center" 
      Direction="Row" 
      Wrap="Wrap" 
      Margin="8"
      JustifyContent="Start" 
      AlignContent="Start" 
      AlignItems="Start">

      <buttons:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="20" />
      <buttons:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="20,0,0,20" />
      <buttons:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="0,20,20,0" />
      <buttons:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="0" />
      <buttons:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="0,20,0,20" />
      <buttons:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="20,0,20,0" />
      <buttons:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="20,0,0,0" />
      <buttons:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="0,20,0,0" />
      <buttons:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="0,0,20,0" />
      <buttons:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="0,0,0,20" />
      <buttons:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="0,0,20,20" />
      <buttons:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="20,20,0,0" />

      <buttons:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="20,40,40,20" />
      <buttons:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="40,20,20,40" />
      <buttons:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="40,20,40,20" />
      <buttons:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="20,40,20,40" />
      <buttons:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="20,40,40,40" />
      <buttons:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="40,20,40,40" />
      <buttons:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="40,40,20,40" />
      <buttons:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="40,40,40,20" />
      <buttons:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="40,40,20,20" />
      <buttons:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="20,20,40,40" />
      <buttons:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="30,20,40,5" />
  </FlexLayout>

Output

I hope you enjoyed learning how to create a different shape of .NET MAUI button.

You can refer to our .NET MAUI Button feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Button documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI components from the License and downloads page. If you are new to Syncfusion, try our 30-day free trial to check out our .NET MAUI Button and other .NET MAUI components.

Please let us know in the following comments section if you have any queries or require clarifications. You can also contact us through our support forums, Direct - Trac, or feedback portal. We are always happy to assist you!