Avatar View in .NET MAUI Community Toolkit

Avatar View in .NET MAUI Community Toolkit

.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 to your app. In this tutorial, we’ll walk you
through the steps for adding Avatar View in .NET MAUI using .NET MAUI Community
Toolkit.

Quick Links:

Project Setup:

  • Launch Visual Studio 2022, 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 for it, and click the Next button:

  • In the Additional information window, click the Create button:

  • Once the project is created, we can able to 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 achieve drawing in our App is to use
Community.ToolKit.Maui NuGet package. It is a collection of reusable elements
such as animations, behaviors converters, among others, for developing
applications for iOS, Android, macOS and WinUI using MAUI.

Install .NET MAUI Community Toolkit

  • Install
    .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 utilised in programmes 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 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 help to set the text to the view
    • ImageSource: This property help 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″

    Full Code:

    Demo

    Download Code:

    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 to you, do like, share the article & star the repository
    on GitHub.

Next Post

10 Low-Cost Options for Advertising a Small Business 

I admit it. I was an advertising basher. I thought that paying for advertising a small business was a waste of money with little to no return. But I was so wrong.   Paid advertising can be a solid marketing strategy for small businesses and entrepreneurs who don’t like creating content, […]
10 Low-Cost Options for Advertising a Small Business