C# Markup

Article
05/25/2023

Overview

C# Markup is a set of fluent helper methods and classes designed to simplify the process of building declarative .NET Multi-platform App UI (.NET MAUI) user interfaces in code. The fluent API provided by C# Markup is available in the CommunityToolkit.Maui.Markup namespace.

Just as with XAML, C# Markup enables a clean separation between UI (View) and Business Logic (View Model).

C# Markup is available on all platforms supported by .NET MAUI, and supports .NET Hot Reload.

NuGet package

The C# Markup package can be included in your project(s) as described in our Getting started guide.

Examples

Here are some brief examples showing how common tasks can be achieved through the use of the Markup package.

Bindings

C# Markup allows us to define the binding fluently and therefore chain multiple methods together to reduce the verbosity of our code:

new Entry().Bind(Entry.TextProperty, static (ViewModel vm) => vm.RegistrationCode, static (ViewModel vm, string text) => vm.RegistrationCode = text)

For further details on the possible options for the Bind method refer to the BindableObject extensions documentation.

Sizing

C# Markup allows us to define the sizing fluently and therefore chain multiple methods together to reduce the verbosity of our code:

new Entry().Size(200, 40);

For further details on the possible options for the Size method refer to the VisualElement extensions documentation.

In-depth example

This example creates a Grid object, with child Label and Entry objects. The Label displays text, and the Entry data binds to the RegistrationCode property of the viewmodel. Each child view is set to appear in a specific row in the Grid, and the Entry spans all the columns in the Grid. In addition, the height of the Entry is set, along with its keyboard, colors, the font size of its text, and its Margin.

C# Markup extensions also allow developers to define names for Columns and Rows (e.g. Column.Input) using an enum.

C# Markup enables this to be defined using its fluent API:

using static CommunityToolkit.Maui.Markup.GridRowsColumns;

class SampleContentPage : ContentPage
{
    public SampleContentPage()
    {
        Content = new Grid
        {
            RowDefinitions = Rows.Define(
                (Row.TextEntry, 36)),

            ColumnDefinitions = Columns.Define(
                (Column.Description, Star),
                (Column.Input, Stars(2))),

            Children =
            {
                new Label()
                    .Text("Code:")
                    .Row(Row.TextEntry).Column(Column.Description),

                new Entry
                {
                    Keyboard = Keyboard.Numeric,
                }.Row(Row.TextEntry).Column(Column.Input)
                 .BackgroundColor(Colors.AliceBlue)
                 .FontSize(15)
                 .Placeholder("Enter number")
                 .TextColor(Colors.Black)
                 .Height(44)
                 .Margin(5, 5)
                 .Bind(Entry.TextProperty, static (ViewModel vm) => vm.RegistrationCode, static (ViewModel vm, string text) => vm.RegistrationCode = text)
            }
        };
    }

    enum Row { TextEntry }
    enum Column { Description, Input }
}

Converters

The C# Markup package provides the ability to define IValueConverter and IMultiValueConverter implementations inline when building your applications UI.

Converter	Description
`FuncConverter`	The `FuncConverter` provides the ability to define an `IValueConverter` implementation inline when build your UI.
`FuncMultiConverter`	The `FuncMultiConverter` provides the ability to define an `IMultiValueConverter` implementation inline when build your UI.

Extensions

Note

C# Markup includes extension methods that set specific view properties. They are designed to improve code readability, and can be used in combination with property setters. It's recommended to always use an extension method when one exists for a property, but you can choose your preferred balance.

Extension	Description
`AbsoluteLayout`	The AbsoluteLayout extensions provide a series of extension methods that support positioning `View`s in `AbsoluteLayout`s.
`AutomationProperties`	The `AutomationProperties` extensions provide a series of extension methods that support the configuring of accessibility related settings.
`BindableLayout`	The `BindableLayout` extensions provide a series of extension methods that support configuring its `EmptyView`, `ItemSource` and `ItemTemplate`.
`BindableObject`	The `BindableObject` extensions provide a series of extension methods that support configuring `Binding`s on a `BindableObject`.
`DynamicResourceHandler`	The `DynamicResourceHandler` extensions provide a series of extension methods that support configuring `IDynamicResourceHandler` which can be used to theme an App.
`Element`	The `Element` extensions provide a series of extension methods that support configuring the padding, effects, font attributes, dynamic resources, text, and text color of an `Element`.
`FlexLayout`	The FlexLayout extensions provide a series of extension methods that support positioning a `View` in a `FlexLayout`.
`Grid`	The Grid extensions provide a series of extension methods that support configuring a Grid.
`Image`	The `Image` extensions provide a series of extension methods that support configuring `IImage` controls.
`ItemsView`	The `ItemsView` extensions provide a series of extension methods that support configuring `ItemsView` controls such as `CarouselView` and `CollectionView`.
`Label`	The `Label` extensions provide a series of extension methods that support configuring `Label` controls.
`Placeholder`	The `Placeholder` extensions provide a series of extension methods that support configuring `IPlaceholder` controls.
`SemanticProperties`	The `SemanticProperties` extensions provide a series of extension methods that support the configuring of accessibility related settings.
`Style`	`Style<T>` provides a series of fluent extension methods that support configuring `Microsoft.Maui.Controls.Style`.
`TextAlignment`	The `TextAlignment` extensions provide a series of extension methods that support configuring the `HorizontalTextAlignment` and `VeticalTextAlignment` properties on controls implementing `ITextAlignment`.
`View`	The `View` extensions provide a series of extension methods that support configuring the alignment of controls inheriting from `View`.
`VisualElement`	The `VisualElement` extensions provide a series of extension methods that support configuring the sizing, styling and behaviors of a `VisualElement`.

Share via