📌 Understanding BasedOn in XAML Styles: Reducing Duplication and Promoting Reusability

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.