Customize .NET MAUI UI with Handlers, Effects & CSS

Are you still using renderers to customize your .NET MAUI UI? Well, it’s time to ditch the old-school approach. With handlers and effects, you can tailor your app’s visuals and behavior in a cleaner, more maintainable way—and with less code.

Let’s walk through how to take full control of your MAUI UI using handlers, effects, and CSS.

Creating Custom UI Components

In many real-world applications, the default set of UI controls just isn’t enough. You often need a custom look or unique behavior that the built-in controls don’t provide. This is where custom UI components come into play. By creating reusable and extendable components, you simplify your layout, improve code maintainability, and keep your styling consistent across the app.

Extending Built-In Controls

Let’s say you want a button that shakes when clicked. First, create a custom control by extending the existing Button class:

public class ShakingButton : Button
{
    public ShakingButton()
    {
        Clicked += async (s, e) => await Shake();
    }

    private async Task Shake()
    {
        uint timeout = 50;
        await this.TranslateTo(-15, 0, timeout);
        await this.TranslateTo(15, 0, timeout);
        await this.TranslateTo(-10, 0, timeout);
        await this.TranslateTo(10, 0, timeout);
        await this.TranslateTo(0, 0, timeout);
    }
}

This subclass adds a fun animated feedback to button clicks. You can now use ShakingButton like any other MAUI control. This type of extension is useful for consistent branding, unique animations, or behavior patterns.

Building Reusable UI Components

Say you often use a styled label with a specific color and padding. Instead of repeating styling in XAML, wrap it in a custom component:

public class TitleLabel : Label
{
    public TitleLabel()
    {
        TextColor = Colors.DarkBlue;
        FontSize = 24;
        Padding = new Thickness(10);
        FontAttributes = FontAttributes.Bold;
    }
}

This keeps your code clean and DRY (Don’t Repeat Yourself). These components can be easily used throughout your app, improving consistency and reducing the risk of errors when adjusting styling.

Working with Handlers and Effects

.NET MAUI replaces the older renderer architecture from Xamarin.Forms with a more flexible and performant handler-based approach. Handlers allow you to modify native views at a lower level, while effects give you a way to encapsulate platform-specific tweaks without fully replacing a control.

Modifying UI Behavior Without Renderers

Handlers are the modern way to customize controls across platforms. Here’s how to modify a native property on iOS and Android for an Entry control:

Microsoft.Maui.Handlers.EntryHandler.Mapper.AppendToMapping("CustomFont", (handler, view) =>
{
#if ANDROID
    handler.PlatformView.Typeface = Android.Graphics.Typeface.Monospace;
#elif IOS
    handler.PlatformView.Font = UIKit.UIFont.FromName("Courier", 18);
#endif
});

This code injects platform-specific styling directly into the native views. No need to subclass or use old renderers. This makes your customizations lighter, more maintainable, and easier to integrate with the rest of the MAUI ecosystem.

Applying Platform-Specific Effects

Want to add a shadow on Android only? Define a platform effect like so:

Shared Code:

public class ShadowEffect : RoutingEffect
{
    public ShadowEffect() : base("MyApp.ShadowEffect") {}
}

Android Implementation:

[assembly: ResolutionGroupName("MyApp")]
[assembly: ExportEffect(typeof(AndroidShadowEffect), nameof(ShadowEffect))]
namespace MyApp.Platforms.Android
{
    public class AndroidShadowEffect : PlatformEffect
    {
        protected override void OnAttached()
        {
            Control.Elevation = 10;
        }

        protected override void OnDetached() {}
    }
}

Use it in XAML or C#:

<Label Text="Platform shadow" >
    <Label.Effects>
        <local:ShadowEffect />
    </Label.Effects>
</Label>

Effects allow you to apply small visual or behavioral tweaks without rewriting the entire control. They are reusable, lightweight, and often much easier to debug.

Styling with CSS

.NET MAUI gives you multiple options for styling your application, including traditional XAML styles and modern CSS-based styling. CSS allows frontend developers or designers more familiar with web technologies to jump in and contribute.

Using CSS for UI Styling

Add a .css file to your project:

.my-button {
    background-color: #007ACC;
    color: white;
    font-size: 18px;
    padding: 12px;
}

Apply styles in XAML:

<Button Text="Styled with CSS" StyleClass="my-button" />

This approach separates style from layout, making your XAML cleaner and easier to read. It also opens up the door to using media queries or shared stylesheets across large projects.

Defining Global Styles

You can load the CSS globally in App.xaml.cs:

Resources.Add(new StyleSheet() { Source = new Uri("styles.css", UriKind.Relative) });

Global CSS makes it easy to define themes or reuse styles throughout the app. You can even dynamically switch stylesheets at runtime for themes like light/dark mode.

FAQ: Your MAUI Customization Questions Answered

Conclusion: Own Your MAUI UI the Modern Way

You no longer need to wrestle with renderers or clunky styling to get a great UI in .NET MAUI. With handlers, effects, and CSS, your UI is both flexible and future-ready.

So go ahead—customize that UI like a pro. And if you learned something new, leave a comment or share this with your team!