With the release of .NET 10 , Microsoft has officially removed MessagingCenter , a long-standing feature that many Xamarin.Forms and early MAUI developers relied on for lightweight communication between components. If your app still uses MessagingCenter, this change may feel disruptive — but the truth is, better, safer, and more maintainable options have already replaced it.

This article explains why MessagingCenter is gone, the recommended modern alternatives, and how you can migrate your MAUI app smoothly without breaking existing functionality.

Why MessagingCenter Was Removed

MessagingCenter was originally introduced for simple publish–subscribe messaging, but over time developers ran into repeated issues:

• Hidden communication made debugging difficult
• Subscriptions often caused memory leaks
• It didn’t align with dependency injection or MVVM best practices
• Modern .NET messaging tools are cleaner and more efficient

To encourage better architecture and avoid unpredictable behavior, Microsoft removed MessagingCenter entirely in .NET 10.

Meet the Modern Replacement: WeakReferenceMessenger

The best replacement — and Microsoft’s deliberate direction — is WeakReferenceMessenger , part of the .NET Community Toolkit.

Why it’s better

• Strongly typed messages
• No memory leaks thanks to weak references
• Great for MVVM
• Fully supported and actively updated
• Faster and more optimized than MessagingCenter

It provides the same pub/sub workflow, but without the pitfalls.

Basic Usage Examples

Send a message

WeakReferenceMessenger.Default.Send(new UserLoggedInMessage(userId));

Receive a message

WeakReferenceMessenger.Default.Register<UserLoggedInMessage>(this, (r, m) =>
{
    // Handle login message
});

Message definition

public class UserLoggedInMessage : ValueChangedMessage<string>
{
    public UserLoggedInMessage(string value) : base(value) { }
}

This pattern is clean, simple, and scales beautifully as your app grows.

Migrating From MessagingCenter to WeakReferenceMessenger

Here’s a common real-world example.

Old (MessagingCenter):

MessagingCenter.Subscribe<HomePage, string>(this, "LoggedIn", (sender, value) =>
{
    // handle login
});

New (WeakReferenceMessenger):

    WeakReferenceMessenger.Default.Register<LoggedInMessage>(this, (r, m) =>
{
    // handle login
});

Send the message

WeakReferenceMessenger.Default.Send(new LoggedInMessage("success"));

Migration Tips for Large Apps

If your MAUI app uses MessagingCenter heavily, follow this structured migration path:

1. Search for all MessagingCenter usages
2. Create equivalent message classes
3. Replace subscriptions with registrations
4. Replace publish calls with messenger sends
5. Test navigation scenarios for memory leaks

With WeakReferenceMessenger’s weak references, cleanup becomes much easier.

Why the New Approach Is Better for Your App

Switching to modern messaging patterns gives you:

• Cleaner, more predictable architecture
• Faster message handling
• Zero hidden dependencies
• Fewer memory leaks
• Easier debugging and testing
• Future-proofing for new .NET MAUI updates

MessagingCenter may be gone, but the alternatives are significantly better.

Final Thoughts

The removal of MessagingCenter in .NET 10 marks the end of an old era — and the beginning of a cleaner, more modern approach to app communication. Whether you migrate to WeakReferenceMessenger , traditional events, or a DI-driven pattern, your MAUI app will benefit from improved maintainability and performance.

A critical deadline is approaching for .NET MAUI developers who distribute applications through Google Play. Beginning November 1, 2025, Google Play will mandate that all new applications and updates designed for Android 15 and higher must be compatible with 16 KB page sizes on 64-bit devices.

Understanding the 16 KB Memory Page Requirement

Android is transitioning from its traditional 4 KB memory page architecture to a larger 16 KB format. This shift is designed to enhance performance on modern devices equipped with substantial RAM. The benefits of this architectural change extend beyond system-level improvements and directly impact individual applications:

• Faster Application Launch: Applications experience an average 3.16% reduction in launch time, with some apps seeing improvements up to 30%
• Enhanced Energy Efficiency: Power consumption during app launch decreases by an average of 4.56%
• Better System Responsiveness: The overall Android operating system becomes more responsive. For example, the native camera app shows 4.48% faster hot starts and 6.60% faster cold starts

Compatibility with .NET MAUI

The positive news for developers is that .NET MAUI 9 includes native support for 16 KB page sizes. To ensure your application meets Google's requirements, simply migrate your .NET MAUI (or .NET for Android) project to .NET 9. Once upgraded, your application will automatically comply with the 16 KB page size standard.

Important Note: Keep in mind that .NET MAUI 8 reached its end-of-support date on May 14, 2025, according to the official .NET MAUI support policy.

Auditing Your Project Dependencies

Compliance isn't just about your main application—every dependency in your .NET MAUI project must also support 16 KB page sizes. During the build process, the system will alert you to any non-compliant dependencies with warnings similar to:

Android 16 will require 16 KB page sizes, shared library '{library_name}' does not have a 16 KB page size. Please inform the authors of the NuGet package '{package_name}' version '{version}' which contains '{file_path}'. See https://developer.android.com/guide/practices/page-sizes for more details.

When encountering these warnings, follow this approach:

• Upgrade the problematic dependency to a newer version with 16 KB support
• Reach out to package maintainers if no compatible version exists
• Consider alternative packages if the original is no longer actively maintained

For developers who want to perform additional verification, Google provides command-line tools in their documentation that can help validate compliance for your application and its dependencies.

Your Preparation Checklist

To meet the November 2025 deadline, follow these steps:

• Migrate to .NET 9 if you're currently on an earlier version
• Analyze all dependencies for 16 KB page size compatibility
• Update or substitute any dependencies that don't meet the requirements
• Thoroughly test your application in a 16 KB environment using Android emulators or developer options on physical Android devices

Critical Reminder: Don't postpone this work until the last moment. Begin your preparation immediately to ensure smooth app submissions that comply with Google Play policies and maintain uninterrupted release schedules.

Final Thoughts

While the 16 KB page size requirement introduces a new compliance obligation, it also delivers tangible performance improvements. The .NET MAUI 9 framework is already equipped to handle this requirement—your responsibility is ensuring your dependencies are equally prepared. Upgrade to .NET 9, conduct a thorough dependency audit, and validate your application in 16 KB testing environments to be ready well before the November 2025 cutoff date.

In an exciting development for .NET MAUI, Syncfusion has made significant open-source contributions by releasing 14 essential UI components for free, empowering developers to enhance their applications. These components, found on GitHub and accessible via NuGet, include popular elements like Shimmer and offer capabilities for improved interactivity and visual appeal in .NET MAUI projects. This collaboration underscores Syncfusion’s commitment to the .NET ecosystem and signals a robust future for cross-platform development.

Syncfusion’s contributions align with Microsoft’s broader strategy to expand .NET MAUI’s open-source potential, paving the way for additional community involvement and accelerating the platform’s maturity. A noteworthy part of this collaboration is the ongoing support from Syncfusion for any potential issues and their active involvement in refining the developer experience.

In addition to these components, Microsoft and Syncfusion are working on introducing a new .NET MAUI project template with .NET 9. This template will come preconfigured with Syncfusion’s UI tools, alongside other third-party toolkits, to streamline project setup for developers. This streamlined experience will make it easier for developers to create well-structured, cross-platform applications that perform seamlessly on multiple devices.

Overall, this partnership demonstrates how .NET MAUI is evolving with rich community-driven contributions and shows promising advancements for developers aiming to build sophisticated, cross-platform mobile and desktop applications.

For more details, you can read the original blog post here.

 

 

Adding custom fonts in .NET MAUI (Multi-platform App UI) is a powerful way to improve your app’s design and branding, making it stand out to users across all platforms, including Android, iOS, Windows, and macOS. In this guide, we’ll go through each step required to integrate custom fonts into your .NET MAUI app effectively, helping you achieve a polished, professional look.

Why Use Custom Fonts in .NET MAUI?

Custom fonts provide numerous benefits:

• Brand Consistency: Reinforce your brand identity by using fonts that align with your style.
• Improved Readability: Choose fonts that enhance the readability and aesthetics of your app, improving the user experience.
• Unique Design: Differentiate your app from others by using custom fonts that reflect the purpose and personality of your app.

Adding custom fonts in .NET MAUI is simple and can significantly impact your app's overall design.

Steps to Add Custom Fonts in .NET MAUI

This tutorial breaks down the process into three essential steps:

1. 1. Add the Font File to Your .NET MAUI Project
2. 2. Register the Font in MauiProgram.cs
3. 3. Use the Custom Font in Your XAML or C# Code

Let’s go through each step in detail.

Step 1: Add the Font File to Your .NET MAUI Project

• Download the Font: Find a .ttf (TrueType Font) or .otf (OpenType Font) file of your desired font.
• Place the Font in the Correct Folder: Drag and drop the font file into the Resources/Fonts folder in your .NET MAUI project. This step is crucial because .NET MAUI loads custom fonts directly from this folder.
• Example: If your font file is named MyCustomFont.ttf, place it in Resources/Fonts.

Step 2: Register the Font in MauiProgram.cs

After adding the font file to your project, the next step is to register it in MauiProgram.cs to ensure .NET MAUI recognizes it.

• Open MauiProgram.cs in your project.
• Locate the ConfigureFonts Method: Inside the CreateMauiApp method, find ConfigureFonts and add a new line to register your font file. Here’s how it should look:

  builder.ConfigureFonts(fonts =>
  {
      fonts.AddFont("MyCustomFont.ttf", "MyCustomFontAlias");
  });
  

  • "MyCustomFont.ttf" is the font file name located in Resources/Fonts.
  • "MyCustomFontAlias" is the alias name for the font, which you will use to apply the font in XAML or C#.

Step 3: Use the Custom Font in XAML or C#

With the font registered, it’s now ready to use in your UI.

Using the Font in XAML

To apply the custom font to a control in XAML, use the FontFamily property with the alias you created.

<Label Text="Hello, .NET MAUI!"
       FontFamily="MyCustomFontAlias"
       FontSize="24"
       TextColor="Black"/>

Using the Font in C#

If you prefer to set the font programmatically in C#, you can apply it like this:

Label label = new Label
{
    Text = "Hello, .NET MAUI!",
    FontFamily = "MyCustomFontAlias",
    FontSize = 24,
    TextColor = Colors.Black
};

Tips for Successful Font Integration

• Check File Names: Ensure that the font file name in MauiProgram.cs matches the actual file name, including case sensitivity.
• Confirm Licensing: Verify the font’s licensing if you’re using it commercially to avoid copyright issues.
• Compatibility: Test the font across all supported platforms to make sure it appears correctly on Android, iOS, Windows, and macOS.

Benefits of Using Custom Fonts in .NET MAUI

Custom fonts bring a range of benefits:

• Consistent Appearance: Once set up, the font will appear consistently across all platforms.
• Enhanced User Experience: A well-chosen font can make your app more user-friendly and visually appealing.
• Cross-Platform Design: MAUI makes it easy to use custom fonts without additional platform-specific coding, simplifying cross-platform development.

Wrapping Up

Custom fonts can transform the look and feel of your .NET MAUI app, making it more engaging and unique. By following these steps, you’ll be able to easily add and apply custom fonts across all pages in your app. This customization not only enhances user experience but also boosts your app's professionalism and appeal. With .NET MAUI, you can bring your app's design to life with fonts that make an impression! Start experimenting with different fonts and see how they can elevate your app's style.

Introduction

In this tutorial, we will show you how to implement a long press gesture in .NET MAUI using TouchBehavior from the MAUI Community Toolkit. Learn how to trigger long press events or commands with parameters and see a live example of updating a button image on a successful long press.

Quick Links:

• Project Setup
• Install Plugin
• Implementation
• Download Code

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
  

Install Plugin

We need to install the "CommunityToolkit.MAUI" by searching in nuget manager and click "Install" to install the plugin

Implementation

Here, we will add the long press behaviour to the image control and you can use as per your need:

• Add the below code in the xaml file to have wire-up the event or command between the designer and view model. Add Namespace

  xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

• Add the following code in your element. In this example, I used Image control

  <Image.Behaviors>
        <toolkit:TouchBehavior LongPressCommand="LongPressCommand" LongPressDuration="2000" />
  </Image.Behaviors>

• The event code will be look like the below

  LongPressCommand = new Command(() =>
  {
  	count++;
  
  	if (count == 1)
  		CounterBtn.Text = $"Long pressed {count} time";
  	else
  		CounterBtn.Text = $"Long pressed {count} times";
  
  	SemanticScreenReader.Announce(CounterBtn.Text);
  });

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.

Tweet

Video Tutorial and Demo:

Introduction

This article explores the concept of .NET MAUI handlers and how they are used in development. Handlers act as a bridge between virtual views and native views on each platform. In simpler terms, they are responsible for instantiating the underlying native view and mapping the cross-platform control API to the native view API. This essentially allows developers to use the same code across different platforms without worrying about the underlying implementation details.

Key concepts of handlers include property mappers and command mappers. These mappers define what actions are taken when a property or command changes. Handlers also support lifecycle events that allow developers to perform actions when a handler is created or changed.

Quick Links:

• Project Setup
• Implementation
• Download Code

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

Here's a simple example for a .NET MAUI Entry handler:

• Conditional Compilation: #if ANDROID and #endif are conditional compilation directives. They ensure the code within them is only compiled for the Android platform and similar to other platforms as well.
• Entry Handler Customization:  This code customizes the appearance of Entry controls with the name "BorderlessEntry".

  Microsoft.Maui.Handlers.EntryHandler.Mapper.AppendToMapping("BorderlessEntry", (handler, view) =>
  {
      if (view is Entry)
      {
          #if ANDROID
          handler.PlatformView.SetBackgroundColor(Microsoft.Maui.Graphics.Colors.Beige.ToAndroid());
          #elif IOS
          handler.PlatformView.BorderStyle = UIKit.UITextBorderStyle.None;
          #elif WINDOWS
          handler.PlatformView.BorderThickness = new Microsoft.UI.Xaml.Thickness(10);
          #endif
      }
  });
  

• It uses the EntryHandler.Mapper.AppendToMapping method to register a custom mapping for this specific named control.
• The lambda expression defines what happens when an Entry with the name "BorderlessEntry" is encountered.
• Inside the lambda, it checks if the view is indeed an Entry control.
• Then, depending on the platform (Android, iOS, or Windows), it applies platform-specific styling:
  • On Android, the background color is set to beige.
  • On iOS, the border style is removed to create a borderless look.
  • On Windows, a border thickness of 10 is applied.

This code demonstrates how to customize the appearance of an Entry control in .NET MAUI using handlers. By registering a custom mapping for "BorderlessEntry", you can achieve a platform-specific, borderless look for entries with that specific name. This allows for targeted styling without affecting all Entry controls in your app.

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.

Tweet

Conclusion:

You can customize various other aspects of the Entry control using platform-specific properties and methods within the handler. This approach allows for a more granular control over the appearance of your UI elements on different platforms while maintaining cross-platform compatibility.

Introduction

Building a secure .NET MAUI app is essential. Rooted/jailbroken devices bypass security measures, leaving them vulnerable. This can impact your app's data and functionality. Let's explore the risks and how to implement root/jailbreak detection in your .NET MAUI app.

Quick Links:

• Project Setup
• Install Plugin
• Implementation
• Download Code

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
  

Install Plugin:

• Open your Nuget Package Manager and search "banditoth.MAUI.JailbreakDetector" and install the latest version in your project.
  

Implementation

• Open MainPage.xaml file and update the UI as per your requirement. In this sample, I have added a button to check whether the device is rooted or not.
• You can dependency inject the jailbreak detector instance, by resolving an instance of IJailbreakDetector. Store the instance in a private readonly field in your class, or use it directly.

  IJailbreakDetectorConfiguration jailbreakDetectorConfiguration = new JailbreakSettings();
  jailbreakDetectorConfiguration.MaximumPossibilityPercentage = 20;
  jailbreakDetectorConfiguration.MaximumWarningCount = 1;
  jailbreakDetectorConfiguration.CanThrowException = true;
  
  IJailbreakDetector jailbreakDetector = new JailberakDetectorService(jailbreakDetectorConfiguration);

• Use the following code to check the device is rooted or not.

  if (jailbreakDetector.IsSupported())
  {
  	var isRooted = await jailbreakDetector.IsRootedOrJailbrokenAsync();
  	if (isRooted)
  	{
  		await DisplayAlert("ANDROIDMADS - .NET MAUI", "DEVICE IS ROOTED", "OK");
  	}
  	else
  	{
  		await DisplayAlert("ANDROIDMADS - .NET MAUI", "DEVICE IS NOT ROOTED", "OK");
  	}
  }

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.

Tweet

In the ever-evolving landscape of technology, tools and frameworks continuously evolve, and developers must stay ahead of the curve. One significant evolution in recent times is the transition from Xamarin.Forms to .NET MAUI (Multi-platform App UI). This shift brings about a series of changes and deadlines that developers must navigate skillfully. In this article, we'll simplify and explore the essential milestones and recommendations to smoothly transition from Xamarin to .NET MAUI.

Saying Farewell to Xamarin

Xamarin.Forms, the precursor to .NET MAUI, is reaching its twilight phase. Existing Xamarin.Forms projects now have the imperative of migrating to .NET MAUI, with Xamarin itself approaching its expiration date. It's vital to note that support for all Xamarin SDKs, including Xamarin.Forms, will come to an end after May 1, 2024.

For those seeking comprehensive insights into this transition, detailed information and guidelines are available in the official documentation.

Navigating the Transition to .NET 7

Complicating matters further is the impending end of support for .NET 7, scheduled for May 14, 2023. To mitigate potential challenges, it's wise to initiate migrations well in advance, allowing ample time to address any arising issues during the process. For detailed information, delve into the resources provided.

Embracing Visual Studio Code

As Visual Studio for Mac faces retirement by August 31, 2024, developers may find themselves at a crossroads. However, there's no cause for concern as the transition to .NET MAUI can seamlessly continue using Visual Studio Code. Learn how to implement the MAUI Extension for Visual Studio Code and access additional resources in the official documentation.

Understanding App Store Transition Deadlines

The transition timeline extends beyond development environments to app distribution platforms. It's anticipated that by April 2025, the Apple App Store will likely stop accepting submissions of Xamarin applications built with Xcode 15. Similarly, the Google Play Store is expected to cease supporting Xamarin apps targeting API 34 by August 2025.

For more information on these transitions, refer to the provided links.

Fostering Community Engagement

In the spirit of community collaboration, developers are encouraged to share their feedback with the Microsoft team through David Ortinau's facilitated platform. Your experiences are invaluable in enriching the community and streamlining the migration process from Xamarin to .NET MAUI. Participate in the feedback survey to contribute to this collective effort.

Showcasing Your .NET MAUI Creations

As .NET MAUI gains momentum, Microsoft eagerly seeks to showcase applications developed using this framework. Your contributions and feedback play a pivotal role in shaping the future of .NET MAUI. Keep an eye out for Microsoft events where .NET MAUI applications are celebrated and showcased.

In conclusion, transitioning from Xamarin to .NET MAUI signifies a significant milestone in the realm of cross-platform app development. By staying informed, proactive, and leveraging available resources, developers can navigate this transition with confidence and agility, propelling their projects into the future.

Certainly! Here's a tabulated overview of the key dates and their details:

Date	Event	Details
May 1, 2024	End of Xamarin Official Support	Support for all Xamarin SDKs, including Xamarin.Forms, will cease after this date.
May 14, 2023	End of .NET 7 Official Support	Support for .NET 7 will be terminated, urging developers to plan migration strategies well in advance.
August 31, 2024	Retirement of Visual Studio for Mac	Visual Studio for Mac will be retired, prompting developers to transition to alternative environments such as Visual Studio Code.
April 2025	Apple App Store Transition Deadline	The anticipated final deadline for the Apple App Store to accept submissions of Xamarin applications built with Xcode 15.
August 2025	Google Play Store Transition Deadline	The expected final deadline for the Google Play Store to accept Xamarin apps targeting API 34.

These dates serve as crucial milestones for developers navigating the transition from Xamarin to .NET MAUI. It's essential to stay informed and plan accordingly to ensure a smooth and seamless transition process.

Introduction

Imagine building an app that works on different devices like phones and computers using .NET MAUI. Sometimes, it's tricky to show images in your app, especially when they're encoded in Base64. This blog helps you figure out how to do that easily. We'll break down the steps, making it simple for 10th-grade students to follow along. By the end, you'll know how to make your app look cool with Base64 images in .NET MAUI!

Quick Links:

• Project Setup
• Implementation
• Demo
• Download Code

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

• Open MainPage.xaml file and update the UI as per requirement. And below my screen design.

  <?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"
               x:Class="MauiBase64Image.MainPage">
  
      <ScrollView>
          <VerticalStackLayout
              Spacing="25"
              Padding="30,0"
              VerticalOptions="Center">
  
              <Label
                  x:Name="base64Result"
                  Text=""
                  MaxLines="5"
                  SemanticProperties.HeadingLevel="Level1"
                  FontSize="12"
                  HorizontalOptions="Center" />
  
              <Button
                  x:Name="EncodeBtn"
                  Text="Base64 Encode"
                  Clicked="OnEncodeClicked"
                  HorizontalOptions="Center" />
  
              <Image
                  x:Name="imagePreview"
                  HeightRequest="200"
                  HorizontalOptions="Center" />
  
              <Button
                  x:Name="DecodeBtn"
                  Text="Base64 Decode"
                  Clicked="OnDecodeClicked"
                  HorizontalOptions="Center" />
  
          </VerticalStackLayout>
      </ScrollView>
  
  </ContentPage>

Base64 String to Image:

If you're into turning one thing into another, the Convert class in .NET is like a superhero! It helps change stuff, even binary files, into this special code called Base64.

Here's a little example code that shows how to use this superhero class to make a special picture show up in a .NET MAUI app. But here's the trick: don't use the word 'using' like we usually do when talking to the computer. If we do that, it might close the door too early before the picture is ready to show.

var imageBytes = Convert.FromBase64String(base64Result.Text);
MemoryStream imageDecodeStream = new(imageBytes);
imagePreview.Source = ImageSource.FromStream(() => imageDecodeStream);

Image to Base64 String:

Now, let's learn how to do the opposite – turning a picture into a base64 string! We use something called Convert.ToBase64String() in .NET MAUI, which is like a tool for this job.

As you might have guessed, the first step is changing our picture into something called a byte array, which is like breaking it into small pieces. In .NET MAUI, you can grab a file from your app (maybe in the Resources\Raw folder) using the FileSystem tools.

using var imageEncodeStream = await FileSystem.OpenAppPackageFileAsync("icon.png");
using var memoryStream = new MemoryStream();

imageEncodeStream.CopyTo(memoryStream);
base64Result.Text = Convert.ToBase64String(memoryStream.ToArray());

Here's how it works: we turn the picture into a Stream, put it in a special memory place called MemoryStream, and then change it into those small pieces, the byte array. Take a look at this code example to see how it's done.

See those 'using' words? They make sure everything is cleaned up nicely when we finish. Remember, there could be different ways to get files, but as long as you can turn your picture into a byte array, you're good to go in your .NET MAUI journey!

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.

Tweet

Introduction

Hey! Ever wanted to create cool apps for different devices like phones and computers? Well, .NET MAUI makes it super easy. It's like a superhero for app creators! Now, imagine adding fun things like videos to your apps. That's where the Community Toolkit comes in – a toolbox that lots of developers work on together. Today, we're exploring the Video Player control, a cool feature powered by .NET MAUI and its friendly Community Toolkit. Get ready for an adventure in making your apps more exciting with videos!

Quick Links:

• Project Setup
• Install Plugin
• Implementation
• Demo
• Download Code

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
  

Install Plugin:

• Open Terminal or Command Prompt: Open a terminal or command prompt window. You can usually find this on your computer by searching for "Command Prompt" (Windows) or "Terminal" (macOS/Linux).
• Navigate to Your Project Folder: Use the cd command to navigate to your .NET MAUI project folder. For example:
• Install Community Toolkit: Run the following command to install the CommunityToolkit.Maui package:

  dotnet add package Microsoft.Maui.CommunityToolkit

• Restore Packages: After the installation, run the following command to restore the packages:

  dotnet restore

Implementation

• First, we need to open "MauiProgram.cs" and include the following namespace and line to allow the app to use the Chart Library.

  using CommunityToolkit.Maui;

  .UseMauiCommunityToolkit()
  .UseMauiCommunityToolkitMediaElement()

• Open MainPage.xaml file and add the following namespace. (the page will be replaced according to you).

  xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

• Then, remove the default content and add an instance of the Media Element class to the page.

  <toolkit:MediaElement Source="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
  ShouldShowPlaybackControls="True"
  BackgroundColor="AliceBlue"
  x:Name="mediaElement"/>

• We can add other controls for custom video controls like play/pause and volume controls like below.

  <HorizontalStackLayout BindingContext="{x:Reference mediaElement}"
  					      HorizontalOptions="Center"
  					      Spacing="10">
  	
  	<Button Text="Play"
  		HorizontalOptions="CenterAndExpand"
  		Clicked="OnPlayPauseButtonClicked">
  	</Button>
  	<Button Text="Stop"
  		HorizontalOptions="CenterAndExpand"
  		Clicked="OnStopButtonClicked">
  	</Button>
  </HorizontalStackLayout>
  <Slider Maximum="1.0"
  		   Minimum="0.0"
  		   Value="{Binding Volume}"
  		   ValueChanged="Slider_ValueChanged"  
  		   Rotation="270"
  		   WidthRequest="100" />

• Open Code behind and add the following which will be useful to controls media elements using custom controls.

  void OnPlayPauseButtonClicked(object sender, EventArgs args)
  {
  	if (mediaElement.CurrentState == MediaElementState.Stopped ||
  		mediaElement.CurrentState == MediaElementState.Paused)
  	{
  		mediaElement.Play();
  	}
  	else if (mediaElement.CurrentState == MediaElementState.Playing)
  	{
  		mediaElement.Pause();
  	}
  }
  
  void OnStopButtonClicked(object sender, EventArgs args)
  {
  	mediaElement.Stop();
  }
  
  private void Slider_ValueChanged(object sender, ValueChangedEventArgs e)
  {
  	mediaElement.Volume = e.NewValue;
  }

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.

Tweet

In this video, we will see the recap of .NET MAUI articles post on 2023. Supercharge your .NET MAUI projects by referring this articles.

DEV EXPRESS CHARTS IN .NET MAUI

December 04, 2023

Read More

Lottie animations in .NET MAUI

November 19, 2023

Read More

Transforming Labels into Hyperlinks with .NET MAUI

November 12, 2023

Read More

Mastering MVVM: A Deep Dive into .NET MAUI with MVVM Toolkit

October 28, 2023

Read More

Dev Express - Data Grid Control for .NET MAUI (Lifetime - Free plugin)

October 15, 2023

Read More

Data Grid Control for .NET MAUI (Free plugin to Sort, Filter & Show Data)

October 04, 2023

Read More

.NET MAUI - Swipe View

September 17, 2023

Read More

Flyout Page in .NET MAUI

July 21, 2023

Read More

.NET MAUI Barcode Scanner using IRONBARCODE

July 02, 2023

Read More

Dynamic Status Bar in .NET MAUI

June 18, 2023

Read More

Localisation in .NET MAUI

June 12, 2023

Read More

File Picker in .NET MAUI

May 29, 2023

Read More

Toast in .NET MAUI

May 21, 2023

Read More

Avatar View in .NET MAUI Community Toolkit

May 07, 2023

Read More

Signature Pad using .NET MAUI Community Toolkit

April 16, 2023

Read More

.Net MAUI - QR Code Generator

January 05, 2023

Read More

.Net MAUI - Zxing Barcode Scanner

January 10, 2023

Read More

Introduction

Supercharge your .NET MAUI projects with Devexpress Charts! This blog will explain you how to implement the chart in .NET MAUI projects using Dev express, a life time free plugin. This plugin has many customisations and will directly skip into the implementation part.

Quick Links:

• Project Setup
• Install Plugin
• Implementation
• Demo
• Download Code

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
  

Install Plugin:

• Library Requirement: The Dev express's nuget link should be mapped as a package source and we need to install "DevExpress.Maui.Charts" into our project.
• Installation via NuGet: Obtain the Charts library by searching for "DevExpress.Maui.Charts" in the NuGet Package Manager.
• User Interface Guidance: Open the NuGet Package Manager interface to facilitate the installation process.
• Visual Confirmation: The library, once searched, should appear as "DevExpress.Maui.Charts" in the NuGet interface.

Implementation

• First, we need to open "MauiProgram.cs" and include the following namespace and line to allow the app to use the Chart Library.

  using DevExpress.Maui;

  .UseDevExpress()

• Open MainPage.xaml file and add the following namespace. (the page will be replaced according to you).

  xmlns:dxc="clr-namespace:DevExpress.Maui.Charts;assembly=DevExpress.Maui.Charts"

• Then, remove the default content and add an instance of the ChartView class to the page.

  <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               xmlns:dxc="clr-namespace:DevExpress.Maui.Charts;assembly=DevExpress.Maui.Charts"
               x:Class="ScatterChartGetStarted.MainPage">
      <dxc:ChartView/>
  </ContentPage>

• Consider removing the event handlers from the code-behind for the default content. It is advisable to eliminate default styles (such as fonts, colors, and other settings) in the App.xaml file as well.
• In this instance, the chart features line series displaying the annual GDP for three countries. Generate a ViewModel.cs file that includes the following classes:

  public class ViewModel {
      public CountryGdp GdpValueForUSA { get; }
      public CountryGdp GdpValueForChina { get; }
      public CountryGdp GdpValueForJapan { get; }
  
      public ViewModel() {
          GdpValueForUSA = new CountryGdp(
              "USA",
              new GdpValue(new DateTime(2020, 1, 1), 20.93),
              new GdpValue(new DateTime(2019, 1, 1), 21.43),
              new GdpValue(new DateTime(2018, 1, 1), 20.58),
              new GdpValue(new DateTime(2017, 1, 1), 19.391),
              new GdpValue(new DateTime(2016, 1, 1), 18.624),
              new GdpValue(new DateTime(2015, 1, 1), 18.121),
              new GdpValue(new DateTime(2014, 1, 1), 17.428),
              new GdpValue(new DateTime(2013, 1, 1), 16.692),
              new GdpValue(new DateTime(2012, 1, 1), 16.155),
              new GdpValue(new DateTime(2011, 1, 1), 15.518),
              new GdpValue(new DateTime(2010, 1, 1), 14.964)
          );
          GdpValueForChina = new CountryGdp(
              "China",
              new GdpValue(new DateTime(2020, 1, 1), 14.72),
              new GdpValue(new DateTime(2019, 1, 1), 14.34),
              new GdpValue(new DateTime(2018, 1, 1), 13.89),
              new GdpValue(new DateTime(2017, 1, 1), 12.238),
              new GdpValue(new DateTime(2016, 1, 1), 11.191),
              new GdpValue(new DateTime(2015, 1, 1), 11.065),
              new GdpValue(new DateTime(2014, 1, 1), 10.482),
              new GdpValue(new DateTime(2013, 1, 1), 9.607),
              new GdpValue(new DateTime(2012, 1, 1), 8.561),
              new GdpValue(new DateTime(2011, 1, 1), 7.573),
              new GdpValue(new DateTime(2010, 1, 1), 6.101)
          );
          GdpValueForJapan = new CountryGdp(
              "Japan",
              new GdpValue(new DateTime(2020, 1, 1), 4.888),
              new GdpValue(new DateTime(2019, 1, 1), 5.082),
              new GdpValue(new DateTime(2018, 1, 1), 4.955),
              new GdpValue(new DateTime(2017, 1, 1), 4.872),
              new GdpValue(new DateTime(2016, 1, 1), 4.949),
              new GdpValue(new DateTime(2015, 1, 1), 4.395),
              new GdpValue(new DateTime(2014, 1, 1), 4.850),
              new GdpValue(new DateTime(2013, 1, 1), 5.156),
              new GdpValue(new DateTime(2012, 1, 1), 6.203),
              new GdpValue(new DateTime(2011, 1, 1), 6.156),
              new GdpValue(new DateTime(2010, 1, 1), 5.700)
          );
      }
  }
  
  public class CountryGdp {
      public string CountryName { get; }
      public IList<GdpValue> Values { get; }
  
      public CountryGdp(string country, params GdpValue[] values) {
          this.CountryName = country;
          this.Values = new List<GdpValue>(values);
      }
  }
  
  public class GdpValue {
      public DateTime Year { get; }
      public double Value { get; }
  
      public GdpValue(DateTime year, double value) {
          this.Year = year;
          this.Value = value;
      }
  }

• In the MainPage.xaml file, incorporate three LineSeries objects into the ChartView.Series collection. To establish a connection between the series and data, assign each LineSeries object's Data property to a SeriesDataAdapter object. Utilize the adapter's properties to indicate the data source and fields containing arguments and values for each series.
• Additionally, define a local XAML namespace referring to a CLR namespace encompassing the view model. Subsequently, employ the page's BindingContext property to link the view model with the view.

  <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
               xmlns:dxc="clr-namespace:DevExpress.Maui.Charts;assembly=DevExpress.Maui.Charts"
               xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
               ios:Page.UseSafeArea="True"
               xmlns:local="clr-namespace:MauiDevExpress"
               x:Class="MauiDevExpress.MainPage">
      <ContentPage.BindingContext>
          <local:ViewModel/>
      </ContentPage.BindingContext>
      <dxc:ChartView>
          <dxc:ChartView.Series>
              <dxc:LineSeries DisplayName="{Binding GdpValueForUSA.CountryName}">
                  <dxc:LineSeries.Data>
                      <dxc:SeriesDataAdapter DataSource="{Binding GdpValueForUSA.Values}"
                                             ArgumentDataMember="Year">
                          <dxc:ValueDataMember Type="Value" Member="Value"/>
                      </dxc:SeriesDataAdapter>
                  </dxc:LineSeries.Data>
              </dxc:LineSeries>
  
              <dxc:LineSeries DisplayName="{Binding GdpValueForChina.CountryName}">
                  <dxc:LineSeries.Data>
                      <dxc:SeriesDataAdapter DataSource="{Binding GdpValueForChina.Values}"
                                             ArgumentDataMember="Year">
                          <dxc:ValueDataMember Type="Value" Member="Value"/>
                      </dxc:SeriesDataAdapter>
                  </dxc:LineSeries.Data>
              </dxc:LineSeries>
  
              <dxc:LineSeries DisplayName="{Binding GdpValueForJapan.CountryName}">
                  <dxc:LineSeries.Data>
                      <dxc:SeriesDataAdapter DataSource="{Binding GdpValueForJapan.Values}"
                                             ArgumentDataMember="Year">
                          <dxc:ValueDataMember Type="Value" Member="Value"/>
                      </dxc:SeriesDataAdapter>
                  </dxc:LineSeries.Data>
              </dxc:LineSeries>
          </dxc:ChartView.Series>
      </dxc:ChartView>
  </ContentPage>

• Configure the X-axis to display labels for years by assigning a DateTimeAxisX object with the specified settings to the ChartView.AxisX property.

  <dxc:ChartView> <dxc:ChartView.AxisX>
      <dxc:DateTimeAxisX MeasureUnit="Year" GridAlignment="Year"
      GridSpacing="2"/> </dxc:ChartView.AxisX> </dxc:ChartView>

• Configure the title and labels on the Y-axis. Set the ChartView.AxisY property to a NumericAxisY object and specify this object’s Title and Label properties.

  <dxc:ChartView> 
  <!-- The X-axis config is here. -->
      <dxc:ChartView.AxisY>
          <dxc:NumericAxisY>
              <dxc:NumericAxisY.Title>
                  <dxc:AxisTitle Text="Trillions of US$">
                      <dxc:AxisTitle.Style>
                          <dxc:TitleStyle>
                              <dxc:TitleStyle.TextStyle>
                                  <dxc:TextStyle Size="16"/>
                              </dxc:TitleStyle.TextStyle>
                          </dxc:TitleStyle>
                      </dxc:AxisTitle.Style>
                  </dxc:AxisTitle>
              </dxc:NumericAxisY.Title>
              <dxc:NumericAxisY.Label>
                  <dxc:AxisLabel TextFormat="#.#" Position="Inside"/>
              </dxc:NumericAxisY.Label>
          </dxc:NumericAxisY>
      </dxc:ChartView.AxisY>
  </dxc:ChartView>

• Configure the legend position and orientation. Set the ChartView.Legend property to a Legend object, and specify this object’s properties as follows:

  <dxc:ChartView>
      <dxc:ChartView.Legend>
          <dxc:Legend VerticalPosition="TopOutside" 
                      HorizontalPosition="Center" 
                      Orientation="LeftToRight"/>
      </dxc:ChartView.Legend>
  </dxc:ChartView>

• Establish the chart to showcase a series point hint as a crosshair cursor by setting the ChartView.Hint property to a Hint object and assigning a CrosshairHintBehavior object to Hint.Behavior. Subsequently, define the hint's content, data format, and visibility options. Set the LineSeries.HintOptions property to a SeriesCrosshairOptions object with the specified settings.

  <ContentPage.Resources>
      <dxc:SeriesCrosshairOptions x:Key="lineSeriesHintOptions"
                                  PointTextPattern="{}{S}: {V}M"
                                  ShowInLabel="True"
                                  AxisLabelVisible="True"
                                  AxisLineVisible="True"/>
  </ContentPage.Resources>
  <dxc:ChartView>
      <dxc:ChartView.Hint>
          <dxc:Hint>
              <dxc:Hint.Behavior>
                  <dxc:CrosshairHintBehavior GroupHeaderTextPattern="{}{A$YYYY}" 
                                             MaxSeriesCount="3"/>
              </dxc:Hint.Behavior>
          </dxc:Hint>
      </dxc:ChartView.Hint>
  
      <dxc:ChartView.Series>
          <dxc:LineSeries HintOptions="{StaticResource lineSeriesHintOptions}">
              <!--Series Data-->
          </dxc:LineSeries>
          <dxc:LineSeries HintOptions="{StaticResource lineSeriesHintOptions}">
              <!--Series Data-->
          </dxc:LineSeries>
          <dxc:LineSeries HintOptions="{StaticResource lineSeriesHintOptions}">
              <!--Series Data-->
          </dxc:LineSeries>
      </dxc:ChartView.Series>    
  </dxc:ChartView>

• Set the LineSeries.MarkersVisible property to True to display point markers. To change the line series appearance, set the LineSeries.Style property to a LineSeriesStyle object. This object’s Stroke, StrokeThickness, MarkerSize, and MarkerStyle properties allow you to configure the appearance of the series line and point markers.

  <dxc:LineSeries MarkersVisible="True">
      <!--Series Data-->
      <dxc:LineSeries.Style>
          <dxc:LineSeriesStyle Stroke="#7145a7" StrokeThickness="2" MarkerSize="8">
              <dxc:LineSeriesStyle.MarkerStyle>
                  <dxc:MarkerStyle Fill="#7145a7"/>
              </dxc:LineSeriesStyle.MarkerStyle>
          </dxc:LineSeriesStyle>
      </dxc:LineSeries.Style>
  </dxc:LineSeries>

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.

Tweet