.NET MAUI

Using .NET MAUI Community Toolkit

The .NET Community Toolkit recently debuted. Let's take a look at how to use some of it's features, and how we can contribute more!

Brandon Minnick

• 4 min read
Using .NET MAUI Community Toolkit
.NET Bot with Community Toolkit

Installing the .NET MAUI Community Toolkits

There are currently two Community Toolkits focused on .NET MAUI:

Both NuGet Packages can be added to any project targeting .NET 6 or later:

  1. Open a net6.0 project in Visual Studio
  2. In the Visual Studio Package Manager Console, enter the following command:
Install-Package CommunityToolkit.Maui

or

Install-Package CommunityToolkit.Maui.Markup

Converters

The Converters found in ComunityToolkit.Maui  can be easiliy added to our MVVM Bindings allowing us to easily convert the value between our ViewModel and our View.

Some of the popular converters include:

  • InvertedBoolConverter
  • ListToStringConverter
  • TextCaseConverter
  • ...and more!

Check out this sample app to see how to use CommunityToolkit.Maui.Converters: https://github.com/brminnick/HelloMauiToolkit

Using Converters in .NET MAUI Community Toolkit, XAML

  1. Install the .NET MAUI Community Toolkit NuGet Package

    Install-Package CommunityToolkit.Maui

  2. In XAML, add the following XML Namespace:

    xmlns:converters="clr-namespace:CommunityToolkit.Maui.Converters;assembly=CommunityToolkit.Maui"

  3. In XAML, add the converter to your Binding

    
<Button
    Text="Get Data"
    IsEnabled="{Binding Path=IsBusy, Converter={converters:InvertedBoolConverter}} />

Using Converters in .NET MAUI Community Toolkit, C#

Note: The following example uses the C# Markup Extensions found in .NET MAUI Markup Community Toolkit

  1. Install the .NET MAUI Community Toolkit + .NET MAUI Markup Community Toolkit NuGet Packages

    Install-Package CommunityToolkit.Maui
Install-Package CommunityToolkit.Maui.Markup

  2. In C#, add the following namespaces:

    using CommunityToolkit.Maui;
using CommunityToolkit.Maui.Markup;

  3. In C#, add the converter to your Binding

    new Button().Bind(Button.IsVisibleProperty, nameof(ViewModel.IsBusy), converter: new InvertedBoolConverter())

Behaviors

The Behaviors are found in ComunityToolkit.Maui  and let us add functionality to user interface controls without having to subclass them.

Some of the popular converters include:

  • EventToCommandBehavior
  • UserStoppedTypingBehavior
  • ...and more!

Using Behaviors with .NET MAUI Community Toolkit, XAML

  1. Install the .NET MAUI Community Toolkit NuGet Package

    Install-Package CommunityToolkit.Maui

  2. In XAML, add the following XML Namespace:

    xmlns:behaviors="clr-namespace:CommunityToolkit.Maui.Behaviors;assembly=CommunityToolkit.Maui"

  3. In XAML, add the Behavior to your UI

    <SearchBar Placeholder="Search..." >
    <SearchBar.Behaviors>
        <behaviors:UserStoppedTypingBehavior 
            Command="{Binding SearchCommand}"
            StoppedTypingTimeThreshold="1000"
            MinimumLengthThreshold="3"
            ShouldDismissKeyboardAutomatically="True" />
    </SearchBar.Behaviors>
</SearchBar>

Using Behaviors with .NET MAUI Community Toolkit, C#

Note: The following example uses the C# Markup Extensions found in .NET MAUI Markup Community Toolkit

  1. Install the .NET MAUI Community Toolkit + .NET MAUI Markup Community Toolkit NuGet Packages

    Install-Package CommunityToolkit.Maui
Install-Package CommunityToolkit.Maui.Markup

  2. In C#, add the following namespaces:

    using CommunityToolkit.Maui;
using CommunityToolkit.Maui.Markup;

  3. In C#, add the converter to your Binding

    var userStoppedTypingBehavior = new UserStoppedTypingBehavior
{
    MinimumLengthThreshold = 3,
    StoppedTypingTimeThreshold = 1000,
    ShouldDismissKeyboardAutomatically = true
}.Bind(UserStoppedTypingBehavior.CommandProperty, nameof(ViewModel.SearchCommand));

var searchBar = new SearchBar();
searchBar.Behaviors.Add(userStoppedTypingBehavior);

C# Markup Extensions

For .NET MAUI developers who prefer to write UI in C# instead of XAML, the .NET MAUI Markup Community Toolkit makes life A LOT easier!

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

Check out this sample app to see how to use CommunityToolkit.Maui.Markup: https://github.com/brminnick/HelloMauiMarkup

Creating a Grid with .NET MAUI Markup Community Toolkit

With C# Markup Markup extensions, we can define our Rows + Columns with a custom Enum and then use the fluent C# extensions methods to create our Grid!

using System;
using CommunityToolkit.Maui.Markup;
using Microsoft.Maui;
using Microsoft.Maui.Controls;
using Microsoft.Maui.Essentials;
using static CommunityToolkit.Maui.Markup.GridRowsColumns;

namespace HelloMauiMarkup;

class MainPage : ContentPge
{
    public MainPage()
    {
        BindingContext = new MainViewModel();
        
        Content = new Grid
        {
            RowSpacing = 25,
            ColumnSpacing = 0,

            Padding = Device.RuntimePlatform switch
            {
                Device.iOS => new Thickness(30, 60, 30, 30),
                _ => new Thickness(30)
            },

            RowDefinitions = Rows.Define(
                (Row.HelloWorld, 44),
                (Row.Welcome, Auto),
                (Row.Count, Auto),
                (Row.ClickMeButton, Auto),
                (Row.Image, Star)),
                
            ColumnDefinitions = Columns.Define(
            	(Column.Text, Star),
                (Column.Number, Star)),

            Children =
            {
                new Label { Text = "Hello World" }
					.Row(Row.HelloWorld).ColumnSpan(All<Column>())
					.Font(size: 32)
					.CenterHorizontal().TextCenter(),

                new Label { Text = "Welcome to .NET MAUI Markup Community Toolkit Sample" }
    	            .Row(Row.Welcome).ColumnSpan(All<Column>())
                    .Font(size: 18)
        	        .CenterHorizontal().TextCenter(),

				new Label { Text = "Current Count: " }
                	.Row(Row.Count).Column(Column.Text)
					.Font(bold: true)
					.End().TextEnd(),

				new Label()
                	.Row(Row.Count).Column(Column.Number)
                    .Font(bold: true)
                    .Start().TextStart()
                    .Bind<Label, int, string>(Label.TextProperty, nameof(MainViewModel.ClickCount), convert: count => count.ToString())

                new Button { Text = "Click Me" }
                	.Row(Row.ClickMeButton)
	                .Font(bold: true)
    	            .CenterHorizontal()
					.BindCommand(nameof(ViewModel.ClickMeButtonCommand)),

                new Image { Source = "dotnet_bot.png", WidthRequest = 250, HeightRequest = 310 }
					.Row(Row.Image).ColumnSpan(All<Column>())
					.CenterHorizontal()
			}
		};
    }

    enum Row { HelloWorld, Welcome, Count, ClickMeButton, Image }
    enum Column { Text, Number }
}

Contribute to .NET MAUI Toolkit

While the community toolkit libraries are built in collaboration with the .NET team at Microsoft, it is truly a community effort. The core team, Andrei Misiukevich, Pedro Jesus, Gerald Versluis, Javier Suárez, and (myself) Brandon Minnick, are here mostly to move things forward.

Your help and input is very much required. Whether that is through triaging issues, updating Docs, participating in discussions or adding actual code, we will need your help!

To learn how to contribute, check out "Contributing to .NET MAUI Community Toolkit": https://devblogs.microsoft.com/dotnet/contributing-to-net-maui-community-toolkit/

Sign up for more like this.

Enter your email
Subscribe