Styling .NET MAUI Applications

.NET MAUI (Multi-platform App UI) allows you to style your applications using a variety of methods, enabling you to create a consistent and visually appealing user experience across different platforms. This tutorial will guide you through the primary styling techniques available in .NET MAUI.

1. XAML Styles

The most common and recommended way to apply styles in .NET MAUI is by using XAML styles. These styles can be defined in a separate resource dictionary file or directly within a page's resource dictionary.

1.1 Global Styles (App.xaml)

Styles defined in App.xaml are globally available to all pages within your application.

<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyMauiApp.App">
    <Application.Resources>
        <ResourceDictionary>
            <Style TargetType="Button">
                <Setter Property="BackgroundColor" Value="#0078D4" />
                <Setter Property="TextColor" Value="White" />
                <Setter Property="FontSize" Value="16" />
                <Setter Property="Padding" Value="10,15" />
                <Setter Property="CornerRadius" Value="5" />
            </Style>

            <Style TargetType="Label">
                <Setter Property="TextColor" Value="#333333" />
                <Setter Property="FontSize" Value="14" />
            </Style>
        </ResourceDictionary>
    </Application.Resources>
</Application>

1.2 Page-Specific Styles

Styles defined within a page's Resources dictionary are only available to that specific page.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyMauiApp.MyPage">
    <ContentPage.Resources>
        <ResourceDictionary>
            <Style TargetType="Entry">
                <Setter Property="BackgroundColor" Value="#f0f0f0" />
                <Setter Property="TextColor" Value="#333333" />
                <Setter Property="Padding" Value="10" />
                <Setter Property="BorderColor" Value="#cccccc" />
                <Setter Property="CornerRadius" Value="4" />
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>
    <StackLayout>
        <Entry Placeholder="Enter text" />
    </StackLayout>
</ContentPage>

1.3 Named Styles

You can give styles a name using the x:Key attribute to apply them to specific elements, even if they don't match the TargetType.

<!-- In App.xaml or a ResourceDictionary -->
<Style x:Key="PrimaryButton" TargetType="Button">
    <Setter Property="BackgroundColor" Value="#4CAF50" />
    <Setter Property="TextColor" Value="White" />
</Style>

<!-- In your XAML page -->
<Button Text="Submit" Style="{StaticResource PrimaryButton}" />

1.4 Implicit vs. Explicit Styles

When a Style has a TargetType but no x:Key, it's an implicit style and will be applied automatically to all elements of that type within its scope. If a Style has an x:Key, it's an explicit style and must be applied manually using {StaticResource KeyName}.

2. Visual States

Visual states allow you to define different appearances for a control based on its state (e.g., pressed, disabled, focused). This is often managed within the control's template.

<!-- Example within a ControlTemplate -->
<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="CommonStates">
        <VisualState x:Name="Normal" />
        <VisualState x:Name="Disabled">
            <State//>
                <Setter Property="BackgroundColor" Value="#E0E0E0" />
                <Setter Property="TextColor" Value="#A0A0A0" />
            </State>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

3. Dynamic Styling with C#

While XAML is preferred for declarative styling, you can also apply and modify styles programmatically using C#.

// In your C# code-behind
public partial class MyPage : ContentPage
{
    public MyPage()
    {
        InitializeComponent();

        // Create a new style programmatically
        var customButtonStyle = new Style(typeof(Button))
        {
            Setters = {
                new Setter { Property = Button.BackgroundColorProperty, Value = Colors.Orange },
                new Setter { Property = Button.TextColorProperty, Value = Colors.Black }
            }
        };

        // Apply the style to a specific button
        MyButton.Style = customButtonStyle;

        // Or add it to a ResourceDictionary
        this.Resources.Add("AnotherButtonStyle", customButtonStyle);
    }
}

4. CSS Styling

.NET MAUI supports styling using Cascading Style Sheets (CSS). This can be a familiar approach for web developers.

Create a CSS file (e.g., styles.css) in your project and link it in App.xaml.

/* styles.css */
.primary-button {
    background-color: #4CAF50;
    color: white;
    font-size: 18px;
    padding: 12px 24px;
    border-radius: 8px;
}

label {
    color: #2196F3;
    font-weight: bold;
}

<!-- In App.xaml -->
<Application xmlns="..."
             xmlns:x="..."
             x:Class="MyMauiApp.App">
    <Application.Resources>
        <ResourceDictionary Source="styles.css" />
    </Application.Resources>
</Application>

<!-- In your XAML page -->
<Button Text="Click Me" CssClass="primary-button" />
<Label Text="Hello, MAUI!" />

5. Inline Styling

For quick, one-off styling, you can set properties directly on a control in XAML. This is generally discouraged for maintainability unless for very specific cases.

<Button Text="Inline Styled"
            BackgroundColor="#FF9800"
            TextColor="White"
            FontSize="18"
            Padding="10"
            CornerRadius="10" />

Best Practices

• Use global XAML styles (App.xaml) for common elements like Buttons, Labels, and Entries to ensure consistency.
• Define page-specific styles for elements unique to a particular page.
• Employ named styles (x:Key) for reusability and clarity.
• Prefer XAML styles over inline styling and programmatic styling for better organization and maintainability.
• Leverage Visual States for interactive elements to provide visual feedback.
• Consider CSS for teams familiar with web styling paradigms, but be mindful of supported properties.