πŸ“Œ Understanding BasedOn in XAML Styles: Reducing Duplication and Promoting Reusability

Ali RazaAli Raza
2 min read

When building beautiful, maintainable user interfaces in .NET MAUI (or Xamarin.Forms), styles play a critical role in ensuring consistency across your app. However, as your UI grows, you'll often find yourself repeating the same style setters over and over. That's where the BasedOn attribute comes in a powerful feature in XAML for style inheritance and code reuse.

πŸ”„ The Problem: Repeating Yourself

Consider you have multiple labels in your app that share common properties, such as FontFamily, TextColor, and HorizontalOptions, but differ slightly in FontSize. Without BasedOn, you'd have to copy all these setters each time, increasing the chance of inconsistency and error.

<Style x:Key="MicroSemiBoldHorizontalCenter" TargetType="Label">
    <Setter Property="TextColor" Value="Black"/>
    <Setter Property="FontSize" Value="Micro"/>
    <Setter Property="FontFamily" Value="PoppinsSemibold"/>
    <Setter Property="HorizontalOptions" Value="Center"/>
</Style>

<Style x:Key="SmallSemiBoldHorizontalCenter" TargetType="Label">
    <Setter Property="TextColor" Value="Black"/>
    <Setter Property="FontSize" Value="Small"/>
    <Setter Property="FontFamily" Value="PoppinsSemibold"/>
    <Setter Property="HorizontalOptions" Value="Center"/>
</Style>

In this example, 3 out of 4 properties are duplicated.

βœ… The Solution: Using BasedOn

The BasedOn attribute allows one style to inherit the properties of another. This means you define the shared properties in a base style, and then only override or add what's different in the derived style.

<Style x:Key="MicroSemiBoldHorizontalCenter" TargetType="Label">
    <Setter Property="TextColor" Value="Black"/>
    <Setter Property="FontSize" Value="Micro"/>
    <Setter Property="FontFamily" Value="PoppinsMedium"/>
    <Setter Property="HorizontalOptions" Value="Center"/>
</Style>

<Style x:Key="SmallSemiBoldHorizontalCenter" TargetType="Label" BasedOn="{StaticResource MicroSemiBoldHorizontalCenter}">
    <Setter Property="FontSize" Value="Small"/>
</Style>

Here, SmallSemiBoldHorizontalCenter inherits from MicroSemiBoldHorizontalCenter, reusing all its setters except for FontSize, which is overridden.

🎯 Benefits of Using BasedOn

  • Avoids Duplication: Common styling logic is declared once and reused.

  • Improves Maintainability: Updating the base style (e.g., changing FontFamily) updates all derived styles automatically.

  • Promotes Consistency: Prevents style drift across your UI components.

  • Enhances Readability: Derived styles are concise and focused on what's different.

✍️ Final Thoughts

The BasedOn attribute is an essential tool for writing clean, maintainable XAML. It’s especially valuable in enterprise-grade apps with large and dynamic UIs. Whether you’re building a style system from scratch or refactoring a legacy codebase, adopting BasedOn can lead to a more scalable and readable codebase.

0
Subscribe to my newsletter

Read articles from Ali Raza directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Ali Raza
Ali Raza

πŸš€ Tech Lead | .NET MAUI Expert | Mobile App Developer I'm Ali Raza, a passionate Tech Lead with over 6 years of experience in mobile app development. I specialize in .NET MAUI/Xamarin and have led multiple high-impact projects, including enterprise apps, fintech solutions, and eSIM technology. πŸ”Ή What I Do: βœ” .NET MAUI & Xamarin – Building cross-platform apps with robust architectures βœ” eSIM & Fintech Apps – Leading innovations in digital connectivity & finance βœ” Performance Optimization – Creating high-quality, scalable mobile solutions βœ” Mentorship & Community Sharing – Helping developers master .NET MAUI πŸ“’ Sharing Weekly Insights on .NET MAUI/Xamarin to help developers level up! Follow me for deep dives into Native Interop, API Optimization, and Advanced UI/UX techniques. Let’s connect and build something amazing! πŸš€