Styling Your .NET MAUI Applications

Learn how to make your .NET MAUI applications visually appealing and consistent with various styling techniques.

Understanding Styles

Styles are a powerful mechanism for defining the appearance of your UI elements. They allow you to create reusable definitions for properties like color, font, size, and more, ensuring a cohesive look across your application.

Creating Styles

Styles can be defined in several places:

• App.xaml: For application-wide styles that are available to all pages.
• Page.xaml: For styles specific to a single page.
• ResourceDictionary: For organizing and sharing styles, either locally or globally.

Here's an example of a style definition in App.xaml:

<Application xmlns="..."
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyMauiApp.App">
    <Application.Resources>
        <ResourceDictionary>
            <Style TargetType="Button">
                <Setter Property="BackgroundColor" Value="{StaticResource PrimaryColor}" />
                <Setter Property="TextColor" Value="White" />
                <Setter Property="CornerRadius" Value="5" />
                <Setter Property="Padding" Value="10, 5" />
            </Style>

            <Color x:Key="PrimaryColor">#0078d4</Color>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Applying Styles

Once defined, you can apply styles to individual elements or inherit them.

Applying Explicitly

You can assign a style to an element's Style property:

<Button Text="Click Me" Style="{StaticResource MyButtonStyle}" />

Implicit Styling

If you define a style for a specific control type (e.g., Button) without a x:Key, it will be applied implicitly to all elements of that type within its scope.

Cascading Styles

.NET MAUI supports a form of CSS-like cascading for styling. You can use CSS files to define styles and link them to your application.

Using a CSS File

Create a .css file (e.g., styles.css) in your project and add it to your App.xaml's Resources:

<Application ...>
    <Application.Resources>
        <ResourceDictionary Source="styles.css" />
    </ResourceDictionary>
</Application>

Example styles.css:

/* styles.css */
Button {
    background-color: #00bcf2;
    color: white;
    font-size: 16;
    border-radius: 8;
    padding: 12, 8;
}

.primary-button {
    background-color: #0078d4;
    color: white;
}

.secondary-button {
    background-color: #107c10;
    color: white;
}
        

Applying CSS Styles

In XAML, you can apply styles defined in CSS using selectors:

<Button Text="Primary Action" StyleClass="primary-button" />
<Button Text="Secondary Action" StyleClass="secondary-button" />
<Label Text="Hello, MAUI!" FontSize="20" TextColor="DarkGray" />

Inline Styles

For quick, one-off styling, you can set properties directly on an element:

<Label Text="Styled Directly"
       FontSize="22"
       TextColor="Purple"
       FontAttributes="Bold" />

Theming

For more advanced theming, consider using control templates or dynamic resource references that can change based on an application-wide theme setting.

Common Styling Properties

Here are some commonly used properties you'll style:

• BackgroundColor
• TextColor
• FontSize
• FontFamily
• FontAttributes (Bold, Italic)
• Padding
• Margin
• BorderColor
• BorderRadius
• HeightRequest
• WidthRequest

Interactive Styling (Visual States)

You can define how controls look when they are in different states (e.g., pressed, disabled). This is often done using VisualStateManager within control templates.

Example: Styling Buttons with CSS

Let's see how to apply different styles to buttons using CSS classes.

<!-- In your XAML page -->
<StackLayout Spacing="15">
    <Button Text="Default MAUI Button" />
    <Button Text="Primary Action" StyleClass="primary-button" />
    <Button Text="Secondary Action" StyleClass="secondary-button" />
</StackLayout>

<!-- In your XAML page -->
<StackLayout Spacing="15">
    <Button Text="Styled Button" StyleClass="custom-button" />
    <Button Text="Another Button" />
</StackLayout>

/* In your styles.css */
.custom-button {
    background-color: #9370DB; /* MediumPurple */
    color: white;
    font-size: 18;
    font-weight: bold;
    border-radius: 20; /* More rounded */
    padding: 15, 10;
    border: 2px solid #6A5ACD; /* SlateBlue */
}