How do Styling using C# Markup and CommunityToolkit.Maui.Markup?

Question

I've been exploring Maui for a while and have some questions related to styling. Most resources I've found seem to predominantly use XAML for styling purposes, focusing on documents like 'page.xaml' and 'style.xaml'. However, my personal preference leans towards using C# markup, and I've opted to work with CommunityToolkit.Maui.Markup.

I noticed that this library provides a Style<T> class. Does this mean I should transition from 'style.xaml' to 'style.cs', utilizing Style<T> for my styling needs? If that's the case, I would appreciate any guidance on how I can automatically apply these styles to my controls.

Answer 1

google maui c# markup apply style returns first hit:
C# Markup.

Some markup extensions require these steps:

• Install nuget CommunityToolkit.Maui.Markup.
• using CommunityToolkit.Maui.Markup; at top of source file.

---

Define and apply a Style in C#

Searching that doc for "Style" gives a link to Style<T>, which contains this example:

using CommunityToolkit.Maui.Markup;
...

  new Label
  {
    Style = new Style<Entry>(
            (Entry.TextColorProperty, Colors.Red),
            (Entry.BackgroundColorProperty, Colors.White),
            (Entry.FontAttributesProperty, FontAttributes.Bold))
  }

As well as other useful information about applying Style in C#.

As with any c#, if you want to re-use a style, store it in a member:

public static Style MyStyle;

public static void InitMyStyle()
{
    MyStyle = new Style<Entry>(
            (Entry.TextColorProperty, Colors.Red),
            (Entry.BackgroundColorProperty, Colors.White),
            (Entry.FontAttributesProperty, FontAttributes.Bold));
}

...
    InitMyStyle();
    var myentry = new Entry
    {
        Style = MyStyle
    };

---

Automatically apply a C#-defined Style ("Implicit Style")

(I haven't found any doc that shows C# for this technique. I show how, after the XAML.)

XAML

Style apps using XAML / Implicit Styles shows how to define (in XAML) a Style that will be applied to ALL elements of a given type (those that don't explicitly set their Style property):

<ContentPage.Resources>
    <Style TargetType="Label">
        <Setter Property="BackgroundColor" Value="Yellow" />
        <Setter Property="TextColor" Value="Blue" />
    </Style>
</ContentPage.Resources>

(Similar can be done for the entire app, by defining in App.xaml.
In default Maui template, there is a similar definition in styles.xaml, which is included in App.xaml's MergedDictionaries.)

C#

To define this "Implicit Style" in C#, add it to a ResourceDictionary.

To add it to App's global dictionary:

public App()
{
    InitializeComponent();

    InitImplicitStyles();   // Added

    MainPage = new AppShell();
}

private void InitImplicitStyles()
{
    var myLabelStyle = new Style<Label>(
        (Label.TextColorProperty, Colors.Blue),
        (Label.BackgroundColorProperty, Colors.Yellow));
        
    ResourceDictionary rd = this.Resources;
    // This overrides the one in styles.xaml.
    // An Implicit Style is looked up using UI Element's FullName.
    rd[typeof(Label).FullName] = myLabelStyle;
}

Similar code can be used in any code-behind file, to affect only UI elements in that class.

public partial class MyPage : ContentPage
{
  public MyPage()
  {
    InitializeComponent();   // If there is any XAML.

    InitImplicitStyles();   // Added

    BindingContext = ...;   // If Binding is used.
  }

// See previous code snippet for "InitImplicitStyles(){ ... }".

There, this.Resources refers to MyPage's ResourceDictionary.