DOCSEARCHbyAlgolia
Submit Docs

.NET MAUI Markup Community Toolkit

repository·main·Indexed 20 days ago

https://github.com/communitytoolkit/maui.markup

A collection of Fluent C# extension methods for building .NET MAUI applications using C# instead of XAML. It provides tools for fluent data binding via Bind(), element sizing with Size(), and structured Grid layouts using GridRowsColumns, while maintaining support for MVVM, Bindings, and Resource Dictionaries.

Tokens
1.4K
Snippets
5
Records
6
Agent score
20%

What's inside communitytoolkit-maui.markup

  1. Install and initialize the .NET MAUI Markup Community Toolkit

    main

    To use the toolkit in your .NET MAUI application, you must initialize it in your MauiProgram.cs file by calling the UseMauiCommunityToolkitMarkup() extension method on the MauiAppBuilder.

    using CommunityToolkit.Maui.Markup;

public static MauiApp CreateMauiApp()
{
    var builder = MauiApp.CreateBuilder();
    // Initialise the toolkit
    builder.UseMauiApp<App>().UseMauiCommunityToolkitMarkup();
    // the rest of your logic...
}

  2. Initialize the .NET MAUI Community Toolkit Markup

    main

    To enable the markup features provided by the toolkit, you must call the UseMauiCommunityToolkitMarkup() extension method on your MauiAppBuilder within your MauiProgram.cs file.

    using CommunityToolkit.Maui.Markup;

public static MauiApp CreateMauiApp()
{
    var builder = MauiApp.CreateBuilder();

    // Initialise the toolkit
    builder.UseMauiApp<App>().UseMauiCommunityToolkitMarkup();

    // the rest of your logic...
    return builder.Build();
}

  3. Submit a new feature proposal

    main

    The .NET MAUI Community Toolkit follows a structured workflow for new features:

    1. Discussion: Start a relevant discussion in the GitHub Discussions tab.
    2. Proposal: Submit a detailed formal proposal as a GitHub Issue labeled proposal.
    3. Championing: A core team member must 'Champion' the proposal to bring it to the monthly Community Standup.
    4. Approval: The core team votes; a majority (>50%) is required for adoption.
    5. Implementation: Once approved, a Pull Request is submitted, accompanied by a new sample in the Toolkit Sample app.
    6. Documentation: Documentation must be submitted to the MicrosoftDocs/CommunityToolkit repository.
    7. Merge: The feature is merged after PR and documentation approval.

  4. Build complex layouts using GridRowsColumns

    main

    The toolkit allows for a highly readable, fluent way to define Grid structures. You can use Rows.Define and Columns.Define to set up definitions, and use enum types to provide semantic names for rows and columns. This avoids magic numbers and makes layout logic much clearer.

    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,
                    BackgroundColor = Colors.AliceBlue,
                }.Row(Row.TextEntry).Column(Column.Input)
                 .FontSize(15)
                 .Placeholder("Enter number")
                 .TextColor(Colors.Black)
                 .Height(44)
                 .Margin(5, 5)
                 .Bind(Entry.TextProperty, static (ViewModel vm) vm => vm.RegistrationCode)
            }
        };
    }

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

  6. Define fluent Bindings with Bind()

    main

    The toolkit provides a fluent Bind extension method for BindableObject to reduce the verbosity of data binding in C#. You can chain it directly to a control definition and use a lambda expression to specify the target property and the source ViewModel property.

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