layout	post
title	Customization in .NET MAUI Button control \| Syncfusion®
description	Learn here all about Customization support in Syncfusion® .NET MAUI Button (SfButton) control and more.
platform	maui
control	SfButton
documentation	ug

Customization in .NET MAUI Button (SfButton)

The .NET MAUI Button control supports to customize the border color, image width, corner radius, background color, and more. The button control can be customized using the following properties:

Text Customization

The text inside the button can be customized by its text color, font size, font attributes, font family and text alignment.

TextColor

The TextColor property is used to customize the color of text in SfButton.

{% tabs %} {% highlight xaml %}

<buttons:SfButton x:Name="button" WidthRequest="200" Text="Button" TextColor = "White" CornerRadius="10"> </buttons:SfButton>

{% endhighlight %} {% highlight c# %}

SfButton button = new SfButton(); button.Text = "Button"; button.TextColor = Colors.White; button.CornerRadius= 10;

{% endhighlight %} {% endtabs %}

FontAttributes

The FontAttributes property is used to customize the font style of text in SfButton.

{% tabs %} {% highlight xaml %}

<buttons:SfButton x:Name="button" Text="Button" WidthRequest="150" HeightRequest="40" FontAttributes = "Italic" CornerRadius="10"> </buttons:SfButton>

{% endhighlight %} {% highlight c# %}

SfButton button = new SfButton(); button.Text = "Button"; button.FontAttributes = FontAttributes.Italic; button.CornerRadius= 10;

{% endhighlight %} {% endtabs %}

FontFamily

The FontFamily property is used to customize the font family of text in SfButton.

{% tabs %} {% highlight xaml %}

<buttons:SfButton x:Name="button" Text="Button" WidthRequest="150" HeightRequest="40" FontFamily = "Samantha-Demo" CornerRadius="10"> </buttons:SfButton>

{% endhighlight %} {% highlight c# %}

SfButton button = new SfButton(); button.Text = "Button"; button.FontFamily = "Samantha-Demo"; button.CornerRadius= 10;

{% endhighlight %} {% endtabs %}

TextAlignment

The HorizontalTextAlignment and VerticalTextAlignment properties are used to customize the alignment of text in SfButton.

{% tabs %} {% highlight xaml %}

<buttons:SfButton x:Name="button" WidthRequest="150" HeightRequest="40" Text="Button" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"> </buttons:SfButton>

{% endhighlight %} {% highlight c# %}

SfButton button = new SfButton(); button.Text = "Button"; button.HorizontalTextAlignment = TextAlignment.Center; button.VerticalTextAlignment = TextAlignment.Center;

{% endhighlight %} {% endtabs %}

Text Transform

Users can now customize the SfButton text casing using the TextTransform property. They can easily switch between uppercase, lowercase, none, or default casing.

{% tabs %} {% highlight xaml %}

<buttons:SfButton x:Name="button" Text="Submit" TextTransform="Uppercase" WidthRequest="150" HeightRequest="40" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"> </buttons:SfButton>

{% endhighlight %} {% highlight c# %}

SfButton button = new SfButton(); button.Text = "Submit"; button.TextTransform = "Uppercase"; button.HorizontalTextAlignment = TextAlignment.Center; button.VerticalTextAlignment = TextAlignment.Center;

{% endhighlight %} {% endtabs %}

LineBreakMode

The LineBreakMode allows you to wrap or truncate the text. The default value of this property is NoWrap. The following other options are available in LineBreakMode:

NoWrap - Avoids the text wrap.
WordWrap - Wraps the text by words.
CharacterWrap - Wraps the text by character.
HeadTruncation - Truncates the text at the start.
MiddleTruncation - Truncates the text at the center.
TailTruncation - Truncates the text at the end.

{% tabs %} {% highlight xaml %}

<buttons:SfButton x:Name="button" Text="Add Items To Cart" WidthRequest="150" HeightRequest="40" LineBreakMode="MiddleTruncation" ImageSource="Cart.png"> </buttons:SfButton>

{% endhighlight %} {% highlight c# %}

SfButton button = new SfButton(); button.Text = "Add Items To Cart"; button.LineBreakMode = LineBreakMode.MiddleTruncation; button.ImageSource="Cart.png";

{% endhighlight %} {% endtabs %}

Background Customization

The background of the button can be customized by its background color, border color, border width and corner radius.

Background Color

The Background property is used to customize the background color of SfButton.

{% tabs %} {% highlight xaml %}

<buttons:SfButton x:Name="button" Text="Button" WidthRequest="150" HeightRequest="40" Background = "DeepSkyBlue" CornerRadius="10"> </buttons:SfButton>

{% endhighlight %} {% highlight c# %}

SfButton button = new SfButton(); button.Text = "Button"; button.Background = Colors.DeepSkyBlue; button.CornerRadius= 10;

{% endhighlight %} {% endtabs %}

N> When defining the background colors of the SfButton control, always use the Background property instead of the BackgroundColor property.

Stroke

The Stroke property is used to customize the color of border in SfButton.

{% tabs %} {% highlight xaml %}

<buttons:SfButton x:Name="button" Text="Button" Stroke="Red" CornerRadius="10"> </buttons:SfButton>

{% endhighlight %} {% highlight c# %}

SfButton button = new SfButton(); button.Text = "Button"; button.Stroke = Colors.Red; button.CornerRadius= 10;

{% endhighlight %} {% endtabs %}

StrokeThickness

The StrokeThickness property is used to customize the thickness of border in SfButton.

{% tabs %} {% highlight xaml %}

<buttons:SfButton x:Name="button" Text="Button" Stroke="Red" StrokeThickness="6" CornerRadius="10"> </buttons:SfButton>

{% endhighlight %} {% highlight c# %}

SfButton button = new SfButton(); button.Text = "Button"; button.StrokeThickness = 6; button.Stroke = Colors.Red; button.CornerRadius= 10;

{% endhighlight %} {% endtabs %}

CornerRadius

The CornerRadius property is used to customize the rounded edges in SfButton as demonstrated in the following code sample.

{% tabs %} {% highlight xaml %}

<buttons:SfButton x:Name="button" Text="Button" CornerRadius="20" WidthRequest="150" HeightRequest="40"> </buttons:SfButton>

{% endhighlight %} {% highlight c# %}

SfButton button = new SfButton(); button.Text = "Button"; button.CornerRadius = 20;

{% endhighlight %} {% endtabs %}

Image Customization

The Image can be customized by its ShowIcon, ImageSource, ImageSize and ImageAlignment.

ShowIcon

You can enable the Icon image using the ShowIcon property to know whether any image appears to the SfButton.

{% tabs %} {% highlight xaml %}

<buttons:SfButton x:Name="button" Text="Button" ImageSource="Heart.png" ShowIcon="True" WidthRequest="150" HeightRequest="40"> </buttons:SfButton>

{% endhighlight %} {% highlight c# %}

SfButton button = new SfButton(); button.Text = "Button"; button.ImageSource = "Heart.png"; button.ShowIcon = True;

{% endhighlight %} {% endtabs %}

ImageSource

The ImageSource property is used to customize the icon image of SfButton by adding a custom image.

N> Enable the ShowIcon property to enable the ImageSource property.

{% tabs %} {% highlight xaml %}

<buttons:SfButton x:Name="button" Text="Button" ImageSource="Heart.png" ShowIcon="True" CornerRadius="2" WidthRequest="150" HeightRequest="40"> </buttons:SfButton>

{% endhighlight %} {% highlight c# %}

SfButton button = new SfButton(); button.Text = "Button"; button.ImageSource = "Heart.png"; button.ShowIcon = True; button.CornerRadius= 2;

{% endhighlight %} {% endtabs %}

ImageSize

The ImageSize property is used to customize the width of icon image in SfButton.

N> Enable the ShowIcon property to enable the ImageSize property.

{% tabs %} {% highlight xaml %}

<buttons:SfButton x:Name="button" Text="Button" ImageSource="Heart.png" ShowIcon="True" ImageSize="50" WidthRequest="150" HeightRequest="40"> </buttons:SfButton>

{% endhighlight %} {% highlight c# %}

SfButton button = new SfButton(); button.Text = "Button"; button.ImageSource = "Heart.png"; button.ShowIcon = true; button.ImageSize= 50;

{% endhighlight %} {% endtabs %}

ImageAlignment

The ImageAlignment property is used to customize the alignment of icon image in SfButton. The following options are available in ImageAlignment:

Start - Places the image at the left most of SfButton.
End - Places the image at the right most of SfButton.
Top - Places the image at the top of the text.
Bottom - Places the image at the bottom of the text.
'Default - By default the image places at the center of the text.
Left - Although the flow direction has been applied, it always places the image in the left part of SfButton. For example, in the direction of the RTL flow, the image setting will move to the right. Use Left alignment to show this in the same left position.
Right - Although flow direction has been applied, the image is always located in the right part of SfButton. For example, in the direction of the RTL flow, the image setting will move to the left. But use Right alignment to show this in the same right position.

N> Enable the ShowIcon property to enable the ImageAlignment property.

End image alignment in SfButton

{% tabs %} {% highlight xaml %}

<buttons:SfButton x:Name="button" Text="Shopping" WidthRequest="150" HeightRequest="40" TextColor="Black" HorizontalOptions="Center" ImageSource="add_to_card.png" ShowIcon="True" ImageSize="25" Stroke="Black" CornerRadius="10" Background="White" ImageAlignment="End"/>

{% endhighlight %}

{% highlight c# %} SfButton button = new SfButton() { Text = "Shopping", TextColor = Colors.Black, HorizontalOptions = LayoutOptions.Center, ImageSource = "add_to_card.png", ShowIcon = true, ImageSize = 25, Stroke = Colors.Black, CornerRadius= 10, Background = Colors.White, ImageAlignment = Alignment.End };

{% endhighlight %} {% endtabs %}

Start image alignment in SfButton

{% tabs %} {% highlight xaml %}

{% endhighlight %}

{% endhighlight %} {% endtabs %}

Top image alignment in SfButton

{% tabs %} {% highlight xaml %}

{% endhighlight %}

{% highlight c# %} SfButton button = new SfButton() { Text = "Shopping", TextColor = Colors.Black, HorizontalOptions = LayoutOptions.Center, ImageSource = "add_to_card.png", ShowIcon = true, ImageSize= 25, Stroke = Colors.Black, CornerRadius= 10, Background = Colors.White, ImageAlignment = Alignment.Top };

{% endhighlight %} {% endtabs %}

Bottom image alignment in SfButton

{% tabs %} {% highlight xaml %}

{% endhighlight %}

{% endhighlight %} {% endtabs %}

Default image alignment in SfButton

{% tabs %} {% highlight xaml %}

{% endhighlight %}

{% endhighlight %} {% endtabs %}

Left image alignment in SfButton

In RTL flow direction, image alignment with Start will change its direction of placing image to the right. To keep that in same left position, set Left alignment as shown in the following code sample.

{% tabs %} {% highlight xaml %}

<buttons:SfButton x:Name="button" Text="Shopping" TextColor="Black" HorizontalOptions="Center" ImageSource="add_to_card.png" ShowIcon="True" ImageSize="25" Stroke="Black" CornerRadius="10" Background="White" ImageAlignment="Left"/>

{% endhighlight %}

{% highlight c# %}

SfButton button = new SfButton() { Text = "Shopping", TextColor = Colors.Black, HorizontalOptions = LayoutOptions.Center, ImageSource = "add_to_card.png", ShowIcon = true, ImageSize = 25, Stroke= Colors.Black, CornerRadius= 10, Background = Colors.White, ImageAlignment = Alignment.Left };

{% endhighlight %} {% endtabs %}

Right image alignment in SfButton

In RTL flow direction, image alignment with End will change its direction of placing image to the left. To keep that in same right position, set Right alignment as shown in the following code sample.

{% tabs %} {% highlight xaml %}

{% endhighlight %}

{% highlight c# %} SfButton button = new SfButton() { Text = "Shopping", TextColor = Colors.Black, HorizontalOptions = LayoutOptions.Center, ImageSource = "add_to_card.png", ShowIcon = true, ImageSize = 25, Stroke= Colors.Black, CornerRadius= 10, Background = Colors.White, ImageAlignment = Alignment.Right };

{% endhighlight %} {% endtabs %}

BackgroundImageSource

The BackgroundImageSource property is used to set background image for the Button.

{% tabs %}

{% highlight xaml %}

<ContentPage.Content> <buttons:SfButton WidthRequest="100" HorizontalOptions="Center" VerticalOptions="Center" BackgroundImageSource="lion.png"> </buttons:SfButton> </ContentPage.Content>

{% endhighlight %}

{% highlight c# %}

using Syncfusion.Maui.Toolkit.Buttons; StackLayout stackLayout = new StackLayout(); SfButton button = new SfButton(); button.WidthRequest = 100; button.HorizontalOptions = LayoutOptions.Center; button.VerticalOptions = LayoutOptions.Center; button.BackgroundImageSource="lion.png"; stackLayout.Children.Add(button); this.Content = stackLayout;

{% endhighlight %}

{% endtabs %}

BackgroundImageAspect

The BackgroundImageAspect property is used to customize the aspect ratio of background image for the Button.

{% tabs %}

{% highlight xaml %}

<ContentPage.Content> <buttons:SfButton WidthRequest="100" HorizontalOptions="Center" VerticalOptions="Center" BackgroundImageSource="lion.png" BackgroundImageAspect="Fill"> </buttons:SfButton> </ContentPage.Content>

{% endhighlight %}

{% highlight c# %}

using Syncfusion.Maui.Toolkit.Buttons; StackLayout stackLayout = new StackLayout(); SfButton button = new SfButton(); button.WidthRequest = 100; button.HorizontalOptions = LayoutOptions.Center; button.VerticalOptions = LayoutOptions.Center; button.BackgroundImageSource = "lion.png"; button.BackgroundImageAspect = Aspect.Fill; stackLayout.Children.Add(button); this.Content = stackLayout;

{% endhighlight %}

{% endtabs %}

EnableRippleEffect

The EnableRippleEffect property is used to control the presence of the ripple effects.

{% tabs %} {% highlight xaml %}

<buttons:SfButton x:Name="button" Text="Button" EnableRippleEffect="True" />

{% endhighlight %} {% highlight c# %}

SfButton button = new SfButton(); button.Text = "Button"; button.EnableRippleEffect = True;

{% endhighlight %} {% endtabs %}

Command

The Command property is used to associate a command with an instance of SfButton. This property is most often set with MVVM pattern to bind callbacks back into the ViewModel.

N> Default value is [null].

{% tabs %} {% highlight xaml %}

<ContentPage.BindingContext> <local:CommandDemoViewModel /> </ContentPage.BindingContext>

<buttons:SfButton x:Name="button" Text="Button" Background="{Binding Background}" Command="{Binding ButtonCommand}"> </buttons:SfButton>

{% endhighlight %} {% highlight c# %}

// ViewModel

public class CommandDemoViewModel : INotifyPropertyChanged {

private Color _background = Color.Accent;

public Color Background
{
    get { return _background; }
    set
    {
        _background = value;
        NotifyPropertyChanged();
    }
}

private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
{
    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

public event PropertyChangedEventHandler PropertyChanged;

public CommandDemoViewModel()
{
    SetBackgroundColor();
    this.Background=Color.Accent;
}

private void SetBackgroundColor()
{
    //do whatever you want to do here
    this.Background = this.Background == Color.DeepSkyBlue ? Color.Accent : Color.DeepSkyBlue;
}

public ICommand ButtonCommand => new Command(SetBackgroundColor);

}

{% endhighlight %} {% endtabs %}

Navigation Menu

Uh oh!

Customization in .NET MAUI Button (SfButton)

Text Customization

TextColor

FontSize

FontAttributes

FontFamily

TextAlignment

Text Transform

LineBreakMode

Background Customization

Background Color

Stroke

StrokeThickness

CornerRadius

Image Customization

ShowIcon

ImageSource

ImageSize

ImageAlignment

BackgroundImageSource

BackgroundImageAspect

EnableRippleEffect

Command

Uh oh!

FilesExpand file tree

Customization.md

Latest commit

History

Customization.md

File metadata and controls

Customization in .NET MAUI Button (SfButton)

Text Customization

TextColor

FontSize

FontAttributes

FontFamily

TextAlignment

Text Transform

LineBreakMode

Background Customization

Background Color

Stroke

StrokeThickness

CornerRadius

Image Customization

ShowIcon

ImageSource

ImageSize

ImageAlignment

BackgroundImageSource

BackgroundImageAspect

EnableRippleEffect

Command