Getting started

Material.Avalonia

The way to getting started with our styles library is pretty easy and similar like MDIX.

1. Create AvaloniaUI application

2. Add Material.Avalonia nuget package to your project:

   dotnet add package Material.Avalonia
   

   Or use nightly builds by following this documentation

3. Add styles using one of the methods listed below (Using different style loaders section)

4. You are ready to go!

5. For example, you can modify your MainWindow.axaml to following:

   <Window ...
           xmlns:styles="clr-namespace:Material.Styles;assembly=Material.Styles"
           ...>
       <StackPanel>
           <styles:Card Margin="16">
               <TextBlock Classes="Headline6" Text="Hello world with Material.Avalonia!"/>
           </styles:Card>
       </StackPanel>
   </Window>

6. Run your application.

   Your application will appear an Window to following:

   

Using different style loaders

MaterialTheme (3.0.0-* and higher)

This guide suitable only for 3.0.0-* or higher. If you use 2.5.* or lover version, read here..

1. Edit Application.Styles section in App.xaml file:

   <Application ...
       xmlns:themes="clr-namespace:Material.Styles.Themes;assembly=Material.Styles"
       ...>
       <Application.Styles>
           <themes:MaterialTheme PrimaryColor="Purple" SecondaryColor="Lime" />
       </Application.Styles>
   </Application>

   Base theme (Dark or Light) can be specified in Application element (via RequestedThemeMode property). MaterialTheme will inherit this value. Also, you can specify BaseTheme for MaterialTheme itself. If none of this property specified, app will use OS theme.

   RequestedThemeMode available only for Avalonia 11.0.0-preview* or higher

   ⚠️ If you get the error Cannot resolve symbol MaterialTheme, make sure you have installed the correct version (3.0.0-* or higher).

BundledTheme (1.0.0 and higher)

Deprecated in favor of MaterialTheme which available from 3.0.0-*.

1. Edit Application.Styles and Application.Resources section in App.xaml file:

   <Application ...
       xmlns:themes="clr-namespace:Material.Styles.Themes;assembly=Material.Styles"
       ...>
           <Application.Resources>
               <themes:BundledTheme BaseTheme="Light" PrimaryColor="Teal" SecondaryColor="Amber"/>
           </Application.Resources>
           <Application.Styles>
             <StyleInclude Source="avares://Material.Avalonia/Material.Avalonia.Templates.xaml" />
           </Application.Styles>
   </Application>