Add a Custom View to a Button (SfButton)
24 Jul 20263 minutes to read
You can customize the appearance of the .NET MAUI Button with any custom view by setting the Content property. This is useful for adding spinners, icons, or any composite layout inside the button.
NOTE
When the
Contentproperty is set, theText,ImageSource, andShowIconproperties are not rendered.
The following code samples show how to set the Content of Button to a horizontal layout that contains a ActivityIndicator and a Label.
<VerticalStackLayout>
<buttons:SfButton CornerRadius="10"
Text="SfButton"
Background="#4125BC">
<buttons:SfButton.Content>
<DataTemplate>
<HorizontalStackLayout Spacing = "8"
Padding="5">
<ActivityIndicator Color = "White"
IsRunning="True"/>
<Label Text = "Loading..."
VerticalOptions="Center"
TextColor="White"/>
</HorizontalStackLayout>
</DataTemplate>
</buttons:SfButton.Content>
</buttons:SfButton>
</VerticalStackLayout>var customTemplate = new DataTemplate(() =>
{
var activityIndicator = new ActivityIndicator
{
Color = Colors.White,
IsRunning = true
};
var label = new Label
{
Text = "Loading...",
TextColor = Colors.White,
VerticalOptions = LayoutOptions.Center
};
var stackLayout = new HorizontalStackLayout
{
Spacing = 8,
Padding = new Thickness(5)
};
stackLayout.Children.Add(activityIndicator);
stackLayout.Children.Add(label);
return stackLayout;
});
SfButton button = new SfButton
{
Text = "SfButton",
Background = Color.FromArgb("#4125BC"),
CornerRadius= 10,
Content = customTemplate
};
Content = new VerticalStackLayout
{
Children = { button }
};