From XAML to C# · FmgLib.MauiMarkup

FmgLib.MauiMarkup provides a fluent extension method for every property that you can set in XAML. Once you internalize a handful of mapping rules, you can translate any XAML snippet mechanically.

The Mapping Rules#

XAML concept	FmgLib.MauiMarkup equivalent
`<Label ... />` element	`new Label()`
Attribute `Text="Hi"`	`.Text("Hi")`
Attached property `Grid.Row="1"`	`.Row(1)` (see Attached Properties)
Property element `<Label.Content>…`	The same fluent method taking the object: `.Content(new … )`
Child collection (implicit content)	`.Children(...)`, `.Items(...)`, `.Content(...)` depending on the container
`{Binding Path=Name}`	`.Text(e => e.Path("Name"))` (see Property Bindings)
`{StaticResource key}`	Just use the C# object/constant directly
`{DynamicResource key}`	`.BackgroundColor(e => e.DynamicResource("key"))`
`{OnPlatform ...}`	`.FontSize(e => e.OnAndroid(20).OniOS(24).Default(22))`
`{OnIdiom ...}`	`.FontSize(e => e.OnPhone(20).OnDesktop(40).Default(30))`
`{AppThemeBinding Light=…, Dark=…}`	`.TextColor(e => e.OnLight(Colors.Black).OnDark(Colors.White))`
`x:Name="myLabel"`	`.Assign(out var myLabel)`
Event attribute `Clicked="OnClicked"`	`.OnClicked(OnClicked)`
`<Style TargetType="Button">`	`new Style<Button>(e => e …)` (see Styling)
`<DataTemplate>`	`.ItemTemplate(() => new …)` — a lambda producing the view

Side-by-Side Examples#

Simple control#

XAML

XML

<Image
    Source="dotnet_bot.png"
    HeightRequest="100"
    WidthRequest="150"
    Grid.Row="0"
    Grid.Column="1"
    Grid.RowSpan="2"
    Opacity=".8" />

new Image()
.Source("dotnet_bot.png")
.Row(0)
.Column(1)
.RowSpan(2)
.SizeRequest(150, 100)   // convenience: sets WidthRequest + HeightRequest at once
.Opacity(.8)

SizeRequest(width, height) is one of several convenience shorthands the library adds beyond 1:1 property mapping. You can of course also write .WidthRequest(150).HeightRequest(100).

Text formatting#

XAML

XML

<Label Text="fmglib.mauimarkup"
       FontSize="12"
       Grid.Row="1"
       TextColor="Green"
       FontAttributes="Bold"
       Margin="5,3,0,5" />

new Label()
.Text("fmglib.mauimarkup")
.FontSize(12)
.Row(1)
.TextColor(Colors.Green)
.FontAttributes(FontAttributes.Bold)
.Margin(new Thickness(5, 3, 0, 5))

Margin and Padding also have friendlier overloads:

.Margin(10)                    // all sides
.Margin(10, 5)                 // horizontal, vertical
.Margin(5, 3, 0, 5)            // left, top, right, bottom
.Margin(left: 5, bottom: 5)    // named — unspecified sides default to 0

A page with nested content#

XAML

XML

<ContentPage BackgroundImageSource="background.jpg">
    <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
        <ActivityIndicator IsRunning="True"
                           HeightRequest="70"
                           WidthRequest="70" />
    </StackLayout>
</ContentPage>

C# (inside the page class)

this
.BackgroundImageSource("background.jpg")
.Content(
    new StackLayout()
    .Center()
    .Children(
        new ActivityIndicator()
        .IsRunning(true)
        .HeightRequest(70)
        .WidthRequest(70)
        .Center()
    )
);

Bindings#

XAML

XML

<Label Text="{Binding Value, Source={x:Reference slider}, StringFormat='Slider: {0}'}" />

new Slider().Assign(out var slider).Minimum(1).Maximum(20),

new Label()
.Text(e => e.Path("Value").Source(slider).StringFormat("Slider: {0}"))

DataTemplates#

XAML

XML

<CollectionView ItemsSource="{Binding Products}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Label Text="{Binding Name}" FontSize="20" />
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

new CollectionView()
.ItemsSource(e => e.Path("Products"))
.ItemTemplate(() =>
    new Label()
    .Text(e => e.Path("Name"))
    .FontSize(20)
)

The lambda passed to ItemTemplate plays the role of the <DataTemplate> element: it is invoked once per realized item, and bindings inside it resolve against the item's BindingContext.

Resources and styles#

XAML

XML

<ContentPage.Resources>
    <Style TargetType="Entry">
        <Setter Property="TextColor" Value="White" />
    </Style>
</ContentPage.Resources>

this.Resources(
    new ResourceDictionary
    {
        new Style<Entry>(e => e.TextColor(Colors.White))
    }
)

What You Gain Over XAML#

One language — logic and UI live together; no code-behind/x:Name plumbing.
Compile-time safety — a typo in a property name is a build error, not a runtime crash.
Full IntelliSense & refactoring — rename a view model property and every "binding" written with compiled bindings follows.

Real control flow — use if, loops, LINQ, local functions and helper methods while building UI:

new VerticalStackLayout()
.Children(
    menuItems.Select(item =>
        (IView)new Button().Text(item.Title).OnClicked(_ => Navigate(item))
    ).ToArray()
)

Composability — extract any subtree into a plain method:

static Border Card(string title, View content) =>
    new Border()
    .StrokeShape(new RoundRectangle().CornerRadius(12))
    .Padding(16)
    .Content(
        new VerticalStackLayout().Spacing(8).Children(
            new Label().Text(title).FontAttributes(FontAttributes.Bold),
            content
        )
    );

Fluent Properties — everything property methods accept (values, bindings, per-platform builders…)
Attached Properties — full XAML attached-property → method table
Event Handlers — On<Event> method patterns

The Mapping Rules#

Side-by-Side Examples#

Simple control#

Text formatting#

A page with nested content#

Bindings#

DataTemplates#

Resources and styles#

What You Gain Over XAML#

Related Topics#