Post
Ask Question

Avatar View in .NET MAUI Community Toolkit

Introduction

.NET MAUI is a powerful platform for building cross-platform mobile applications, and with the right tools and resources, it's easy to implement Avatar View into your App. This tutorial will walk you through the steps for adding Avatar View in .NET MAUI using .NET MAUI Community Toolkit.

Project Setup

  • Launch Visual Studio, and in the start window, click Create a new project to create a new project.
  • In the Create a new project window, select MAUI in the All project types drop-down, select the .NET MAUI App template, and click the Next button.
  • In the Configure your new project window, name your project, choose a suitable location, and click the Next button.
  • In the Additional information window, click the Create button:
  • Once the project is created, we can see the Android, iOS, Windows, and other running options in the toolbar. Press the emulator or run button to build and run the App

Implementation

.NET MAUI Community Toolkit is the key to achieving drawing in our App is to use Community.ToolKit.Maui NuGet package. It is a collection of reusable elements such as animations, behavior converters, and among others, for developing applications for iOS, Android, macOS, and WinUI using MAUI.

Install .NET MAUI Community Toolkit

  • Install the .NET MAUI Community Toolkit NuGet package on your .NET MAUI application.
  • Now initialize the plugin. Go to your MauiProgram.cs file. In the CreateMauiApp method, place in the .UseMauiApp< App>() line, and just below it, add the following line of code. 
    var builder = MauiApp.CreateBuilder();
builder
	.UseMauiApp<App>()
	.UseMauiCommunityToolkit()
	.ConfigureFonts(fonts =>
	{
		fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
		fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
	});
  • A graphical representation known as an avatar is connected to a particular user in order to identify them. This is frequently utilized in programs that we use every day. Therefore, it's crucial that you have access to the tools that will enable you to accomplish it. This tutorial will teach you how to quickly and easily construct the.NET Maui Community Toolkit AvatarView!
  • Add the following namespace in the XAML file. 
    xmlns:toolkit="clr-namespace:CommunityToolkit.Maui.Views;assembly=CommunityToolkit.Maui"
  • Once the namespace is added, you have to add the AvatarView tag with the properties that we required like below. 
    <toolkit:AvatarView Text="AM"
					FontSize="30"
                    TextColor="White"
                    BackgroundColor="Green"
                    BorderColor="White"
                    BorderWidth="5" 
                    HeightRequest="150"
                    WidthRequest="150"                                
                    CornerRadius="120"
                    ImageSource="dotnet_bot.png"/>

    AvatarView's Properties

    • Text- This property helps to set the text to the view
    • ImageSource- This property helps to set the image to the view
    • CornerRadius- Determines the shape of the control. The properties can be set in the below ways.
    • Sample 1- CornerRadius="120"
    • Sample 2- CornerRadius="120,40,120,40"

The complete code is given below.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="MauiAvatarView.MainPage"
             BackgroundColor="Black">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <toolkit:AvatarView Text="AM"
                                FontSize="30"
                      TextColor="White"
                      BackgroundColor="Green"
                      BorderColor="White"
                      BorderWidth="5" 
                      HeightRequest="150"
                      WidthRequest="150"                                
                    CornerRadius="120"
                                ImageSource="dotnet_bot.png"/>

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

You can download the code from GitHub. If you have any doubts, feel free to post a comment. If you liked this article and it is useful, do like and share it.


Similar Articles