Category / Section
How to create a different shape of Xamarin.Forms button
1 min read
This article explains how to customize the corner of Xamarin.Forms button to have a different shape as shown in the following image.
The previous UI has been obtained with the CornerRadius property as shown in the following code sample.
<ContentPage.Resources>
<Style TargetType="button:SfButton" x:Key="sfButtonStyle">
<Setter Property="BackgroundColor" Value="DeepSkyBlue"/>
<Setter Property="HeightRequest" Value="50"/>
<Setter Property="WidthRequest" Value="95"/>
<Setter Property="Text" Value="SfButton"/>
<Setter Property="Margin" Value="8,12,8,0"/>
<Setter Property="TextColor" Value="Black"/>
</Style>
</ContentPage.Resources>
<FlexLayout
HorizontalOptions="Start"
VerticalOptions="Center"
Direction="Row"
Wrap="Wrap"
Margin="8"
JustifyContent="Start"
AlignContent="Start"
AlignItems="Start">
<button:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="20" />
<button:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="20,0,0,20" />
<button:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="0,20,20,0" />
<button:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="0" />
<button:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="0,20,0,20" />
<button:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="20,0,20,0" />
<button:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="20,0,0,0" />
<button:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="0,20,0,0" />
<button:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="0,0,20,0" />
<button:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="0,0,0,20" />
<button:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="0,0,20,20" />
<button:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="20,20,0,0" />
<button:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="20,40,40,20" />
<button:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="40,20,20,40" />
<button:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="40,20,40,20" />
<button:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="20,40,20,40" />
<button:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="20,40,40,40" />
<button:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="40,20,40,40" />
<button:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="40,40,20,40" />
<button:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="40,40,40,20" />
<button:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="40,40,20,20" />
<button:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="20,20,40,40" />
<button:SfButton Style="{StaticResource sfButtonStyle}" CornerRadius="30,20,40,5" />
</FlexLayout>
See also
How to create a toggle Xamarin.Forms Button
How to create a Xamarin.Forms image button
How to create a background image support Xamarin.Forms button
