.NET MAUI
Topics in this category
Advanced & Enterprise Advanced Data Binding & Collections App Lifecycle & Windows Best Practices & Architecture Concurrency & Threading Controls & Views Data Binding & MVVM Dependency Injection & Services Desktop - WinUI & Mac Catalyst Device Features & Essentials Fonts, Icons & Media Forms, Input & Validation Fundamentals & Architecture Gestures & Animations Graphics & Drawing Local Storage & Data Maps & Location Migration from Xamarin.Forms Native Interop & Libraries Networking & APIs
.NET MAUI

Styling, Resources & Themes

6 question(s)

What is a ResourceDictionary and how do you use it?

Beginner
A ResourceDictionary stores reusable resources (colors, styles, templates, converters) keyed by x:Key. Define it at app, page, or control scope; reference resources with StaticResource (resolved once) or DynamicResource (tracks changes). App-level resources in App.xaml are available everywhere.
<Application.Resources>
    <ResourceDictionary>
        <Color x:Key="Primary">#512BD4</Color>
    </ResourceDictionary>
</Application.Resources>
<Button BackgroundColor="{StaticResource Primary}" />
Real-world example Brand colors defined once in App.xaml are reused across every page via StaticResource.

Common follow-ups: StaticResource vs DynamicResource? | Where do global resources live?

Resources Styling Styling Resources & Themes

What is the difference between an implicit and an explicit Style?

Beginner
An explicit Style has an x:Key and is applied where referenced via Style="{StaticResource ...}". An implicit Style has no key, only a TargetType, and applies automatically to all controls of that type in scope. Implicit styles set defaults; explicit styles are opt-in variants.
<Style TargetType="Button">              <!-- implicit: all buttons -->
    <Setter Property="CornerRadius" Value="8" />
</Style>
<Style x:Key="Danger" TargetType="Button"> <!-- explicit -->
    <Setter Property="BackgroundColor" Value="Red" />
</Style>
Real-world example All buttons get rounded corners via an implicit style, while delete buttons opt into a red 'Danger' explicit style.

Common follow-ups: How do styles inherit? | What is BasedOn?

Styling Resources Styling Resources & Themes

How do you merge and organize multiple ResourceDictionaries?

Intermediate
Split resources into separate XAML dictionaries (Colors.xaml, Styles.xaml) and combine them via MergedDictionaries in App.xaml. This keeps theming modular and lets you swap a dictionary (e.g., a theme) at runtime by replacing entries in Application.Current.Resources.MergedDictionaries.
<ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
        <local:Colors />
        <local:Styles />
    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
Real-world example A design system lives in Colors.xaml and Styles.xaml, merged in App.xaml and shared across the whole app.

Common follow-ups: How do you swap a theme dictionary at runtime? | Why split dictionaries?

Resources Themes Styling Resources & Themes

What is BasedOn style inheritance and when is it useful?

Intermediate
BasedOn lets a Style inherit setters from another keyed Style, overriding or adding a few. It reduces duplication when you have variants of a base look (e.g., a base button plus primary/secondary variants). The base style must be keyed and in scope.
<Style x:Key="BaseButton" TargetType="Button">
    <Setter Property="CornerRadius" Value="8" />
</Style>
<Style x:Key="Primary" TargetType="Button"
       BasedOn="{StaticResource BaseButton}">
    <Setter Property="BackgroundColor" Value="{StaticResource Primary}" />
</Style>
Real-world example Primary and secondary buttons share corner radius and padding from a base style, differing only in color.

Common follow-ups: Must the base style be keyed? | How does this reduce duplication?

Styling Resources Styling Resources & Themes

What is the VisualStateManager and how do you use it?

Advanced
VisualStateManager (VSM) defines named visual states (Normal, Focused, Disabled, PointerOver, or custom) with setters applied when the state is active. Controls change state automatically (CommonStates) or you set states in code. It centralizes state-based styling without triggers.
<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="CommonStates">
        <VisualState x:Name="Normal" />
        <VisualState x:Name="Disabled">
            <VisualState.Setters>
                <Setter Property="Opacity" Value="0.4" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>
Real-world example Disabled buttons dim automatically through a Disabled visual state instead of manual opacity toggling in code.

Common follow-ups: How do custom states get triggered? | VSM vs triggers?

VisualStateManager Styling Styling Resources & Themes

What are Triggers in MAUI and what types exist?

Advanced
Triggers apply setters or actions in response to conditions: PropertyTrigger (a property value), DataTrigger (a bound value), EventTrigger (an event), and MultiTrigger (multiple conditions). They enable declarative reactive styling, though VSM or converters are often preferred for complex cases.
<Entry.Triggers>
    <DataTrigger TargetType="Entry"
        Binding="{Binding HasError}" Value="True">
        <Setter Property="BackgroundColor" Value="MistyRose" />
    </DataTrigger>
</Entry.Triggers>
Real-world example An input field turns pink when its bound HasError is true, giving instant validation feedback declaratively.

Common follow-ups: DataTrigger vs converter? | What is a MultiTrigger?

Triggers Data Binding & MVVM Styling Resources & Themes