Using RuntimePlatform with Styles

[HobDev]

I saw something like this on XAML:

<Style x:Key="ButtonStyle" TargetType="Button">
<Setter Property="CornerRadius">
<OnPlatform x:TypeArguments="x:Int32" Android="40" iOS="20"> 
</Setter>
</Style>

How to convert this to the C# markup style:

I want to define the styles such that once assigned to an UI element it take cares of platform differences. I don't need to define different styles for different platforms.

[mrlacey]

<OpinionThatIWouldLikeFeedbackOn>
Styles are a XAML thing. Mixing them and C# Markup has the potential to give you a codebase that is still a mix of the two.

Declarative (XAML) and procedural languages (C#) have very fundamental differences and if you try and directly port one to the other you'll get bad code.

Don't try and write the direct C# equivalent of XAML.
Instead, ask yourself "How (in C#) would I create multiple types which have the same encapsulated logic?"

In doing that you might come up with the idea to use a factory method, or something similar.
So, you might have something like:

private Button CreateButton(string text)
{
    var btn = new Button().Text(text);
    // ... Add other properties as appropriate

#if ANDROID
    btn.CornerRadius = 40;
#elif IOS
    btn.CornerRadius = 20;
#endif

    return btn;
}

Then, whenever you need a button, you call CreateButton() and it gives you one that is always styled the same way.
Additionally, all your logic about the creation and styling of a Button is in one place.

</OpinionThatIWouldLikeFeedbackOn>

[brminnick]

I have a similar opinion on using Styles with C# UI: I don't recommend using them. Styles are more of a XAML thing because of the limitations inherent in XAML.

When making my UIs in C#, instead of using a Style, I just create a custom class.

For example, instead of using a Style to ensure every Page has a BackgroundColor = Colors.Black, I'll create a class (see below) and use my custom class wherever I need a page with a dark background color.

class DarkBackgroundPage : ContentPage
{
  public DarkBackgroundPage()
  {
    BackgroundColor = Colors.Black;
  }
}

[mrlacey]

Whether using XAML or C#, I think most developers (and code bases) would benefit from using more simple custom classes

[brminnick]

Hey @HobDev! You can see how we're using Styles in the sample app, here:

Maui.Markup/samples/CommunityToolkit.Maui.Markup.Sample/App.cs

Line 9 in 74ed765

Resources = new AppStyles();

You need to create a ResourceDictionary, add Styles to it and assign assign your new ResourceDictionary to App.Resources.

[brminnick]

And you can use IDeviceInfo.Platform To differentiate styles between iOS + Android

class AppStyles : ResourceDictionary
{
    public AppStyles(IDeviceInfo deviceInfo)
    {
        if(deviceInfo.Platform == DevicePlatform.iOS)
        {
	        // ... iOS Styles
        }
        if(deviceInfo.Platform == DevicePlatform.Android)
        {
	        // ... Android Styles
        }
    }
}

[HobDev]

Using custom classes is a very good idea. It decreases the complexity.
Many thanks

[HobDev]

It seems like it's not possible to ditch the styles altogether. I am themeing the app with styles:

public static Style Regular16LabelStyle => new Style<Label>(
          (Label.FontSizeProperty, 16),
          (Label.LineBreakModeProperty, LineBreakMode.WordWrap),
           (Label.FontFamilyProperty, "OpenSansRegular")          
          ).AddAppThemeBinding(Label.TextColorProperty, Colors.Black, Colors.White);

Now when I want to use custom classes I can't use AppThemeBinding in them. I have to add AppThemBinding separately everywhere the Custom contol is used. Another way is to use style in the custom class itself in order to add AppThemeBinding.