2

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.

ToolmakerSteve
  • 18,547
  • 14
  • 94
  • 196
master_ruko
  • 629
  • 1
  • 4
  • 22
  • @ToolmakerSteve If a someone can't link to a resource and they can't answer from personal experience, what option is left? – master_ruko Jun 24 '23 at 06:05
  • 1
    There are thousands of technical help site and advice forums. StackOverflow has a specific purpose, and this is not it. – Tim Roberts Jun 24 '23 at 06:10
  • And I can't seem to find any on styling with C# only. – master_ruko Jun 24 '23 at 10:04
  • Okay. I've removed part of question to focus on that. Ideal would have been if you showed what you do know how to do (an example in XAML; e.g. for a Label), and then attempt to do that in c# (`new Label` + how do I translate that Style XAML into c# to apply to this label?). Also giving links that you did find, would help us to know what you had found, and would help others in future who have similar question. Thanks. – ToolmakerSteve Jun 24 '23 at 19:10
  • @ToolmakerSteve thank you, and I will try to do better in the future. Don't have time right now to review your answer, but thank you for posting one. – master_ruko Jun 25 '23 at 22:10

1 Answers1

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.

ToolmakerSteve
  • 18,547
  • 14
  • 94
  • 196
  • 1
    Thank you for that excellent answer! It was the last section about actually making the c# styles implicit that I hadn't figured out yet. – master_ruko Jul 16 '23 at 03:59