> ## Content Index
> Fetch the complete content index at: https://codetraveler.io/llms.txt
> Use this file to discover other available public pages before exploring further.

# Using .NET MAUI Community Toolkit
- URL: https://codetraveler.io/2021/10/18/using-net-maui-community-toolkit-2/
- Published: 2021-10-18T09:00:00.000Z
- Updated: 2021-11-10T21:21:55.000Z
- Description: 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!
- Author: Brandon Minnick
- Tags: .NET MAUI, Xamarin, maui, dotnet, .NET, iOS, Android, Xamarin.iOS, Xamarin.Android, macOS, MacCatalyst, WinUI, Toolkit, Community, CommunityToolkit, Markup, C#, Markup Extensions

## Installing the .NET MAUI Community Toolkits

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

- [**CommunityToolkit.Maui**](https://www.nuget.org/packages/CommunityToolkit.Maui/?ref=codetraveler.io)  
  - A collection of Animations, Behaviors, Converters and UI Controls for development with .NET MAUI. It simplifies and demonstrates common developer tools building iOS, Android, macOS and Windows apps with .NET MAUI
  - Sample App: [https://github.com/brminnick/HelloMauiToolkit](https://github.com/brminnick/HelloMauiToolkit?ref=codetraveler.io)
- [**CommunityToolkit.Maui.Markup**](https://www.nuget.org/packages/CommunityToolkit.Maui.Markup/?ref=codetraveler.io)  
  - A set of fluent helper methods to simplify building declarative .NET MAUI user interfaces in C#
  - Sample App: [https://github.com/brminnick/HelloMauiMarkup](https://github.com/brminnick/HelloMauiMarkup?ref=codetraveler.io)

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](https://docs.microsoft.com/nuget/consume-packages/install-use-packages-powershell?ref=codetraveler.io#opening-the-console-and-console-controls?WT.mc%5Fid=mobile-39516-bramin), enter the following command:

```bash
Install-Package CommunityToolkit.Maui
```

or

```bash
Install-Package CommunityToolkit.Maui.Markup
```

## Converters

The Converters found in `[ComunityToolkit.Maui](https://github.com/CommunityToolkit/Maui/blob/main/src/CommunityToolkit.Maui/Converters/ColorToStringConverter.shared.cs?ref=codetraveler.io)` can be easiliy added to our [MVVM Bindings](https://docs.microsoft.com/xamarin/xamarin-forms/xaml/xaml-basics/data-bindings-to-mvvm?WT.mc%5Fid=dotnet-45066-bramin&ref=codetraveler.io) 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](https://github.com/brminnick/HelloMauiToolkit?ref=codetraveler.io)

#### Using Converters in .NET MAUI Community Toolkit, XAML

1. Install the .NET MAUI Community Toolkit NuGet Package  
```bash  
Install-Package CommunityToolkit.Maui  
```
2. In XAML, add the following [XML Namespace](https://www.w3schools.com/xml/xml%5Fnamespaces.asp?ref=codetraveler.io):  
```xml  
xmlns:converters="clr-namespace:CommunityToolkit.Maui.Converters;assembly=CommunityToolkit.Maui"  
```
3. In XAML, add the converter to your `Binding`  
```xml  
<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](https://www.nuget.org/packages/CommunityToolkit.Maui.Markup/?ref=codetraveler.io)

1. Install the .NET MAUI Community Toolkit + .NET MAUI Markup Community Toolkit NuGet Packages  
```bash  
Install-Package CommunityToolkit.Maui  
Install-Package CommunityToolkit.Maui.Markup  
```
2. In C#, add the following namespaces:  
```cs  
using CommunityToolkit.Maui;  
using CommunityToolkit.Maui.Markup;  
```
3. In C#, add the converter to your `Binding`  
```cs  
new Button().Bind(Button.IsVisibleProperty, nameof(ViewModel.IsBusy), converter: new InvertedBoolConverter())  
```

## Behaviors

The Behaviors are found in `[ComunityToolkit.Maui](https://github.com/CommunityToolkit/Maui/blob/main/src/CommunityToolkit.Maui/Converters/ColorToStringConverter.shared.cs?ref=codetraveler.io)` 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  
```bash  
Install-Package CommunityToolkit.Maui  
```
2. In XAML, add the following [XML Namespace](https://www.w3schools.com/xml/xml%5Fnamespaces.asp?ref=codetraveler.io):  
```xml  
xmlns:behaviors="clr-namespace:CommunityToolkit.Maui.Behaviors;assembly=CommunityToolkit.Maui"  
```
3. In XAML, add the Behavior to your UI  
```xml  
<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](https://www.nuget.org/packages/CommunityToolkit.Maui.Markup/?ref=codetraveler.io)

1. Install the .NET MAUI Community Toolkit + .NET MAUI Markup Community Toolkit NuGet Packages  
```bash  
Install-Package CommunityToolkit.Maui  
Install-Package CommunityToolkit.Maui.Markup  
```
2. In C#, add the following namespaces:  
```cs  
using CommunityToolkit.Maui;  
using CommunityToolkit.Maui.Markup;  
```
3. In C#, add the converter to your `Binding`  
```cs  
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](https://www.nuget.org/packages/CommunityToolkit.Maui.Markup/?ref=codetraveler.io) 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](https://github.com/brminnick/HelloMauiMarkup?ref=codetraveler.io)

### 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`!

```csharp
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](https://twitter.com/Andrik%5FJust4Fun?ref=codetraveler.io), [Pedro Jesus](https://twitter.com/pj%5Fsouz?ref=codetraveler.io), [Gerald Versluis](https://twitter.com/jfversluis?ref=codetraveler.io), [Javier Suárez](https://twitter.com/jsuarezruiz?ref=codetraveler.io), and (myself) [Brandon Minnick](https://twitter.com/TheCodeTraveler?ref=codetraveler.io), 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/](https://devblogs.microsoft.com/dotnet/contributing-to-net-maui-community-toolkit/?WT.mc%5Fid=dotnet-45066-bramin&ref=codetraveler.io)