The .NET MAUI Markup Community Toolkit is a collection of Fluent C# Extension Methods that allows developers to continue architecting their apps using MVVM, Bindings, Resource Dictionaries, etc., without the need for XAML
All features are contributed by you, our amazing .NET community, and maintained by a core set of maintainers.
And – the best part – the features you add to the .NET MAUI Toolkit may one day be included into the official .NET MAUI library! We leverage the Community Toolkits to debut new features and work closely with the .NET MAUI engineering team to nominate features for promotion.
In order to use the .NET MAUI Community Toolkit you need to call the extension method in your MauiProgram.cs file as follows:
using CommunityToolkit.Maui.Markup;
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
// Initialise the toolkit
builder.UseMauiApp<App>().UseMauiCommunityToolkitMarkup();
// the rest of your logic...
}Here are some brief examples showing how common tasks can be achieved through the use of the Markup package.
First let's take a look at how a Binding could be defined without the Markup package:
var entry = new Entry();
entry.SetBinding(Entry.TextProperty, new Binding(nameof(ViewModel.RegistrationCode));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, nameof(ViewModel.RegistrationCode))For further details on the possible options for the Bind method refer to the BindableObject extensions documentation.
First let's take a look at how an Entry could be sized without the Markup package:
var entry = new Entry();
entry.WidthRequest = 200;
entry.HeightRequest = 40;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.
The following example shows setting the page content to a new Grid containing a Label and an Entry, in C#:
class SampleContentPage : ContentPage
{
public SampleContentPage()
{
Grid grid = new Grid
{
RowDefinitions =
{
new RowDefinition { Height = new GridLength(36, GridUnitType.Absolute) }
},
ColumnDefinitions =
{
new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) },
new ColumnDefinition { Width = new GridLength(2, GridUnitType.Star) }
}
}
Label label = new Label { Text = "Code: " };
grid.Children.Add(label);
GridLayout.SetColumn(label, 0);
GridLayout.SetRow(label, 0);
Entry entry = new Entry
{
Placeholder = "Enter number",
Keyboard = Keyboard.Numeric,
BackgroundColor = Colors.AliceBlue,
TextColor = Colors.Black,
FontSize = 15,
HeightRequest = 44,
Margin = new Thickness(5)
};
grid.Children.Add(entry);
GridLayout.SetColumn(label, 1);
GridLayout.SetRow(label, 0);
entry.SetBinding(Entry.TextProperty, new Binding(nameof(ViewModel.RegistrationCode));
Content = grid;
}
}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. Finally, the Page.Content property is set to the Grid object.
C# Markup enables this code to be re-written 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,
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, nameof(ViewModel.RegistrationCode))
}
};
}
enum Row { TextEntry }
enum Column { Description, Input }
}This example is identical to the previous example, but the C# Markup fluent API simplifies the process of building the UI in C#.
C# Markup extensions also allow developers to use an enum to define names for Columns and Rows (e.g. Column.Input).
New features will follow this workflow, described in more detail in the steps below
Debate pertaining to new Maui Toolkit features takes place in the form of Discussions in this repo.
If you want to suggest a feature, discuss current design notes or proposals, etc., please open a new Discussion topic.
Discussions that are short and stay on topic are much more likely to be read. If you leave comment number fifty, chances are that only a few people will read it. To make discussions easier to navigate and benefit from, please observe a few rules of thumb:
- Discussion should be relevant to the .NET MAUI Toolkit. If they are not, they will be summarily closed.
- Choose a descriptive topic that clearly communicates the scope of discussion.
- Stick to the topic of the discussion. If a comment is tangential, or goes into detail on a subtopic, start a new discussion and link back.
- Is your comment useful for others to read, or can it be adequately expressed with an emoji reaction to an existing comment?
Once you have a fully fleshed out proposal describing a new feature in syntactic and semantic detail, please open an issue for it, and it will be labeled as a Proposal. The comment thread on the issue can be used to hash out or briefly discuss details of the proposal, as well as pros and cons of adopting it into the .NET MAUI Toolkit. If an issue does not meet the bar of being a full proposal, we may move it to a discussion, so that it can be further matured. Specific open issues or more expansive discussion with a proposal will often warrant opening a side discussion rather than cluttering the comment section on the issue.
When a member of the .NET MAUI Toolkit core team finds that a proposal merits promotion into the Toolkit, they can Champion it, which means that they will bring it to the monthly .NET MAUI Toolkit Community Standup.
The .NET MAUI Toolkit core team will collectively vote to work on adopting and/or modifying the proposal, requiring a majority approval (i.e. greater than 50%) to be added to the Toolkit.
Once a Proposal has been championed and has received a majority approval from the .NET MAUI Toolkit core team, a Pull Request can be opened.
After a Pull Request has been submitted, it will be reviewed and approved by the Proposal Champion.
Every new feature also requires an associated sample to be added to the .NET MAUI Toolkit Sample app.
Before a Pull Request can be merged into the .NET MAUI Toolkit, the Pull Request Author must also submit the documentation to our documentation repository.
Once a Pull Request has been reviewed + approved AND the documentation has been written, submitted and approved, the new feature will be merged adding it to the .NET MAUI Toolkit
As a part of the .NET Foundation, we have adopted the .NET Foundation Code of Conduct. Please familiarize yourself with that before participating with this repository. Thanks!
This project is supported by the .NET Foundation.