CSharp for Markup in Xamarin Forms

Table of Contents

CSharp for Markup in Xamarin Forms. It has always been possible to use CSharp code (C#) to create views in Xamarin Forms, but the truth is that with all the features that XAML has in favor it can be a bit difficult for new developers to make the decision to use CSharp.

With the appearance of new Frameworks such as Flutter or SwiftUI, we have noticed how developers have accepted and adapted to create User Interfaces (UI) declaratively.

That is why I come to introduce you to CSharpForMarkup to create declarative styles with C# instead of XAML in Xamarin Forms.

The goal is to make Xamarin Forms more attractive for additional developer audiences that don’t have XAML skills / preference.



CSharpForMarkup is by definition faster than XAML, even when compared to XAML with precompiled XAML and compiled bindings. At it’s core XAML is just an object serialization format, built on top of the UI API that you directly access from C# when you use CSharpForMarkup. You simply bypass the XAML layer, and the compiler optimizes your C# markup better than XAML.

Vincent Hoogendoorn

CSharp for Markup

CSharpForMarkup is simply a file with some extensions that help us to be able to create declarative UIs in a fluid and understandable way through an API that can be modified or extended in a very simple way.

These extensions were created with the purpose of improving readability by creating UI in Xamarin Forms with CSharp. In addition, they have good documentation.

Comparison between C# and XAML code

The code between languages is really similar and a developer with a little experience can adapt to this environment in a few hours. Let’s see:

...
<Entry Placeholder="Sigueme en las redes @luismatosluna" Keyboard="Numeric"
       Margin="{StaticResource myMargin}" HeightRequest="20"
       Grid.Row="2" Grid.ColumnSpan="2"
       Text="{Binding RegistrationCode, Mode=TwoWay}" />
...
...
new Entry { Placeholder = "Sigueme en las redes @luismatosluna", Keyboard = Keyboard.Numeric,
            Margin = myMargin, HeightRequest = 20 }
            .Grid.Row(2) .Grid.ColumnSpan(2)
            .Bind(nameof(vm.RegistrationCode), BindingMode.TwoWay),
...
...
new Entry { Placeholder = "Sigueme en las redes @luismatosluna", Keyboard = Keyboard.Numeric }            
            .Grid.Row(2) .Grid.ColumnSpan(2) .Margin(myMargin) .Height(20) 
            .Bind(nameof(vm.RegistrationCode), BindingMode.TwoWay),
...

Advantage

  • Faster than XAML
    HotReload in LiveSharp
  • Better IDE compatibility
  • Designed for human readability.
  • New developers do not need to learn XAML
  • Best IntelliSense (for example, the margins in XAML are strings)
  • It does not affect the MVVM design since it literally only changes the XAML for CSharp
  • If you are currently working with XAML, it is easy to adapt because the syntax is very similar.
  • If you already work with Xamarin Forms you just have to learn a simple API that you can modify or adapt.
  • Eliminate link mechanisms. You do not need XAML Extensions, Value ConverterTriggersXAML Compilation or Compiled Bindings.
  • You can continue separating the UI and the logic of your UI into separate partial classes/files, for example, HomePage.cs + HomePage.logic.cs.

Summary

I have always thought that having several options for doing things is an advantage. Personally I have not used CSharpForMarkup but I will start using it at the beginning with the custom controls to see how it goes and if I like it, I may leave aside the XAML for a bit.

Every time I have to create custom controls, I find it easier in XAML than in CSharp, when these are small I write them in CSharp and nothing happens. All this because in XAML there is a small cost that we have to pay for performance. But now with CSharpForMarkup I can create those controls and make my views more fluid.

As I mentioned before, it is always good to have several options and more if you know when to use each one. This functionality is being asked to be included and supported in Xamarin Forms; check it out here and support it.Support this great initiative and give you the opportunity to see how it evolves. Let’s break the Like button, let’s celebrate, let’s give it love, let’s take off this project and, above all, share with the whole community.
I think this may be the beginning of great things for the near future. I said the same with Visual and Shell before the official launch and I was not mistaken.

Of interest…

[bucket id=”11123″ title=”Thanks for reading”]

Share this content!

Facebook
Twitter
LinkedIn
Telegram
WhatsApp