Skip to main content

​
Styles

The Styles class is a collection of style objects that can be applied to controls in Avalonia UI. It provides a hierarchical styling system with resource support.

​
Namespace

Avalonia.Styling

​
Inheritance

Object → AvaloniaObject → Styles
Implements: IAvaloniaList\<IStyle\>, IStyle, IResourceProvider

​
Constructors

​
Styles()
constructor
Creates a new instance of the Styles class.
​
Styles(IResourceHost owner)
constructor
Creates a new instance with the specified owner.Parameters:
  • owner (IResourceHost): The resource host that owns this styles collection

​
Properties

​
Count
int
Gets the number of styles in the collection.
​
Resources
IResourceDictionary
Gets or sets the resource dictionary for this styles collection.Resources defined here are available to all controls that use these styles.
​
Owner
IResourceHost
Gets the owner of the styles collection.
​
this[int index]
IStyle
Gets or sets the style at the specified index.

​
Methods

​
Add
void
Adds a style to the collection.Parameters:
  • style (IStyle): The style to add
​
AddRange
void
Adds multiple styles to the collection.Parameters:
  • items (IEnumerable<IStyle>): The styles to add
​
Insert
void
Inserts a style at the specified index.Parameters:
  • index (int): The index to insert at
  • style (IStyle): The style to insert
​
Remove
bool
Removes a style from the collection.Parameters:
  • style (IStyle): The style to remove
Returns: true if the style was removed
​
TryGetResource
bool
Tries to find a resource with the specified key.Parameters:
  • key (object): The resource key
  • theme (ThemeVariant?): The theme variant
  • value (out object?): The found resource value
Returns: true if the resource was found

​
Events

​
CollectionChanged
NotifyCollectionChangedEventHandler
Occurs when the collection changes.
​
OwnerChanged
EventHandler
Occurs when the owner changes.

​
Usage in XAML

​
Application-Level Styles

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Application.Styles>
        <!-- Type-based style -->
        <Style Selector="Button">
            <Setter Property="Background" Value="LightBlue" />
            <Setter Property="Padding" Value="8,4" />
        </Style>
        
        <!-- Class-based style -->
        <Style Selector="Button.accent">
            <Setter Property="Background" Value="Purple" />
            <Setter Property="Foreground" Value="White" />
        </Style>
    </Application.Styles>
</Application>

​
Window-Level Styles

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Window.Styles>
        <Style Selector="TextBlock">
            <Setter Property="FontSize" Value="14" />
        </Style>
        
        <Style Selector="TextBlock.header">
            <Setter Property="FontSize" Value="20" />
            <Setter Property="FontWeight" Value="Bold" />
        </Style>
    </Window.Styles>
    
    <StackPanel>
        <TextBlock Text="Normal text" />
        <TextBlock Text="Header" Classes="header" />
    </StackPanel>
</Window>

​
Styles with Resources

<Styles xmlns="https://github.com/avaloniaui">
    <Styles.Resources>
        <SolidColorBrush x:Key="PrimaryBrush" Color="#4A90E2" />
        <SolidColorBrush x:Key="SecondaryBrush" Color="#7B68EE" />
    </Styles.Resources>
    
    <Style Selector="Button.primary">
        <Setter Property="Background" Value="{StaticResource PrimaryBrush}" />
    </Style>
    
    <Style Selector="Button.secondary">
        <Setter Property="Background" Value="{StaticResource SecondaryBrush}" />
    </Style>
</Styles>

​
Usage in Code

​
Creating Styles Programmatically

using Avalonia;
using Avalonia.Controls;
using Avalonia.Media;
using Avalonia.Styling;

// Create a styles collection
var styles = new Styles();

// Add a resource
styles.Resources.Add("PrimaryColor", new SolidColorBrush(Colors.Blue));

// Create and add a style
var buttonStyle = new Style(x => x.OfType<Button>());
buttonStyle.Setters.Add(new Setter(
    Button.BackgroundProperty, 
    new SolidColorBrush(Colors.LightBlue)
));
buttonStyle.Setters.Add(new Setter(
    Button.PaddingProperty, 
    new Thickness(8, 4)
));

styles.Add(buttonStyle);

// Add to application
Application.Current.Styles.Add(styles);

​
Adding Multiple Styles

var stylesList = new List\<IStyle\>
{
    buttonStyle,
    textBlockStyle,
    borderStyle
};

window.Styles.AddRange(stylesList);

​
Advanced Styling

​
Nested Styles

<Styles>
    <Style Selector="Button">
        <Setter Property="Background" Value="Gray" />
        
        <!-- Nested style for hover state -->
        <Style Selector="^:pointerover">
            <Setter Property="Background" Value="LightGray" />
        </Style>
        
        <!-- Nested style for pressed state -->
        <Style Selector="^:pressed">
            <Setter Property="Background" Value="DarkGray" />
        </Style>
    </Style>
</Styles>

​
Conditional Styles

<Styles>
    <!-- Style for buttons in dark theme -->
    <Style Selector="Button">
        <Style Selector="^[(local|ThemeVariant)=Dark]">
            <Setter Property="Background" Value="#2D2D30" />
            <Setter Property="Foreground" Value="White" />
        </Style>
    </Style>
</Styles>

​
Include External Styles

<Application.Styles>
    <FluentTheme />
    
    <!-- Include external style file -->
    <StyleInclude Source="/Styles/CustomStyles.axaml" />
    
    <!-- Additional styles -->
    <Style Selector="Button">
        <Setter Property="CornerRadius" Value="4" />
    </Style>
</Application.Styles>

​
Style Precedence

Styles are applied in this order (later styles override earlier ones):
  1. Application styles
  2. Window/UserControl styles
  3. Inline styles (Style property)
  4. Local property values
More specific selectors have higher precedence than less specific ones.

​
Best Practices

Place common styles at the application level and specific styles closer to where they’re used.
<!-- App.axaml - Common styles -->
<Application.Styles>
    <Style Selector="Button">...</Style>
</Application.Styles>

<!-- MainWindow.axaml - Window-specific styles -->
<Window.Styles>
    <Style Selector="Button.special">...</Style>
</Window.Styles>
Extract common styles into separate files for reusability.
<StyleInclude Source="/Themes/ButtonStyles.axaml" />
Define colors, brushes, and other values as resources to make theme changes easier.

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us