How to create your own theme for .NET MAUI Button (SfButton)?
This article guides you through the process of creating a custom theme for the .NET MAUI Button. Beyond applying default Dark or Light themes, you can customize your theme as desired.
In this example, we’ll customize the Button
control by setting a custom theme. To apply theme changes to your control, add SfButtonStyles along with theme keys in the resource dictionary. The following code demonstrates initializing the custom theme in the App.xaml
page.
XAML:
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:syncTheme="clr-namespace:Syncfusion.Maui.Themes;assembly=Syncfusion.Maui.Core"
xmlns:buttons="clr-namespace:Syncfusion.Maui.Buttons;assembly=Syncfusion.Maui.Buttons">
<Application.Resources>
<syncTheme:SyncfusionThemeDictionary>
<syncTheme:SyncfusionThemeDictionary.MergedDictionaries>
<buttons:SfButtonStyles/>
<ResourceDictionary>
<x:String x:Key="SfButtonTheme">CommonTheme</x:String>
<Color x:Key="SfButtonNormalBackground">LightYellow</Color>
<Color x:Key="SfButtonNormalTextColor">Red</Color>
<Color x:Key="SfButtonNormalStroke">Green</Color>
</ResourceDictionary>
</syncTheme:SyncfusionThemeDictionary.MergedDictionaries>
</syncTheme:SyncfusionThemeDictionary>
</Application.Resources>
</Application>
Initialize the control in XAML page:
XAML:
<buttons:SfButton x:Name="button"
Text="MY OWN THEME"/>
Output:
Conclusion:
I hope you enjoyed learning how to create your theme for the .NET MAUI Button (SfButton).
Refer to our .NET MAUI Button’s feature tour page for other groundbreaking features. Explore our .NET MAUI Button documentation to understand how to present and manipulate data.
Check out our .NET MAUI components from the License and Downloads page for current customers. 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 comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!