.NET MAUI Barcodes using Fonts

.NET MAUI - .NET Multi-platform App UI

.NET MAUI is a cross-platform framework for creating native mobile and desktop apps that can run on Android, iOS, macOS, and Windows from a single shared codebase of C# and XAML. The single codebase reduces effort for maintaining apps on different platforms and enables organizations to save costs on development. At the same time, it enables developers with existing .NET codes and libraries to expand beyond the Windows platform into mobile platforms with the same skills set.

.NET MAUI Barcodes using Fonts

ConnectCode Barcode Software and Fonts enables creation of standards-compliant barcodes on .NET MAUI using fonts. Barcodes created using fonts can be deployed easily to all platforms supported by .NET MAUI. It also offers that advantage of creating barcodes with Native MAUI components that support fonts such as Label, TableView (ViewCell), Entry, Editor, Cells, and others without requiring a Microsoft.Maui.Graphics or Microsoft.Maui.Graphics.Skia package. Besides providing barcode fonts for generating barcodes in .NET MAUI, ConnectCode Barcode Software and Fonts provides a .NET DLL to ease the barcode creation process of generating start/stop, check characters, and other control characters for compliance with the GS1/ISO specifications.

How to create barcodes using fonts on .NET MAUI?

In this tutorial, we will use a .NET DLL and True Type barcode fonts to create a Code 128 and EAN13 (Extended Style) barcode in a .NET MAUI App. Other types of barcodes such as I2of5, ITF14, UPCA, Code 39, GS1 Databar 14, and GS1 128 can be easily created by using a different Application Programming Interface (API) function in the DLL and other barcode fonts in the package.

Prerequisites

1. Launch Visual Studio and create a new ".NET MAUI App" project. In "Configure your new project", leave everything as default, and click on the "Create" button. This will create a single project system that uses multi-targeting to target Android, iOS, macOS, and Windows.

2. Next, we are going to add Code 128 and EAN13 barcode fonts into the project. If you are using our .exe installer, the True Type barcode fonts can be found in the "C:\Program Files (x86)\ConnectCode" (or "ConnectCodeTrial") folder. If you are using the msix installer with the Windows 11 Barcode Fonts Encoder, you can go to the "Setup Barcode Fonts" section in the Encoder to export the True Type fonts.

In "Solution Explorer", right-click on "Resources -> Fonts", select "Add -> Existing Item", and select the "ConnectCode128_S3.ttf" and "ConnectCodeUPCEAN_HRBS3.ttf" (Extended EAN 13) fonts. Click on the "Add" button when you are done.

Make sure the "Build Action" property of both fonts is set to "Maui Font". This will ensure the fonts can be used in Android, iOS, Mac, or Windows.

3. After adding the fonts, we can register them by invoking the "ConfigureFonts" method in "MauiProgram.cs". In the snippet below, we register a Code 128 and a EAN 13 barcode font using the "AddFont" function. The second parameter in the function is an alias by which the font can be referenced when using it.


public static MauiApp CreateMauiApp()
{
	var builder = MauiApp.CreateBuilder();
	builder
	.UseMauiApp()
	.ConfigureFonts(fonts =>
	{
	  fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
	  fonts.AddFont("ConnectCode128_S3.ttf", "CCode128_S3");
	  fonts.AddFont("ConnectCodeUPCEAN_HRBS3.ttf", "CCodeUPCEAN_HRBS3");
	});

	return builder.Build();
}

4. In the "Solutions Explorer", click on "MainPage.xaml", and replace the "ScrollView" element (and its child elements) with the following:


  <StackLayout Orientation="Vertical">
    <Label 
     	x:Name="Code128Barcode"
        Text=""
        FontFamily="CCode128_S3"
        TextColor="Black"
        FontSize="24"
        HorizontalOptions="Center" />
    <Label 
        x:Name="Code128BarcodeText"
        Text="12345678"
        TextColor="Black"
        FontSize="16"
        HorizontalOptions="Center" />
   </StackLayout>

The "StackLayout" element contains two "Label" elements, one for displaying a Code 128 barcode, and the second one for displaying the text commonly found at the bottom of a barcode. In the first Label, we apply the "CCode128_S3" (alias for ConnectCode128_S3.ttf font) font family to display the barcode. The "Text" property of the "Label" element, which is empty, will be set in the programming codes.

5. In the "Solutions Explorer", click on "MainPage.xaml.cs", and add the following to the top of the file:


using Net.ConnectCode.Barcode;

Change the "MainPage" constructor to the following:


public MainPage()
{
	InitializeComponent();

	BarcodeFonts bcf = new BarcodeFonts();
	bcf.Data = "12345678";
	bcf.BarcodeType = BarcodeFonts.BarcodeEnum.Code128Auto;
	bcf.encode();
	Code128Barcode.Text = bcf.EncodedData;
	Code128BarcodeText.Text = bcf.HumanText;
}

The code above uses a .NET DLL (barcode encoding library) to generate a Code 128 (Auto) barcode with the result placed in the "Code128Barcode" element. To generate a barcode using fonts requires encoding an input data and then applying the result with a barcode font (see the previous step). The Human Readable Text ("bcf.HumanText") is set up in the "Code128BarcodeText" element.

Make sure to remove the "OnCounterClicked" function, as this is no longer required, to make sure your code compiles.

6. Run the .NET MAUI project in Visual Studio and you should see the following:

We ran the project on the local Windows Machine. The same setup should work on Android, iOS, or Mac.

7. Next, in "MainPage.xaml", replace the StackLayout with the following:


<TableView Intent="Settings">
    <TableRoot>
        <TableSection Title="Barcodes">
            <ViewCell>
                <StackLayout Orientation="Vertical">
                    <Label 
                        x:Name="Code128Barcode"
                        Text="12345678"
                        FontFamily="CCode128_S3"
                        TextColor="Black"
                        FontSize="24"
                        HorizontalOptions="Center" />
                    <Label 
                        x:Name="Code128BarcodeText"
                        Text="12345678"
                        TextColor="Black"
                        FontSize="16"
                        HorizontalOptions="Center" />
                </StackLayout>
            </ViewCell>
        <ViewCell>
            <StackLayout Orientation="Vertical">
                <Label 
                        x:Name="EAN13Barcode"
                        Text="12345678"
                        FontFamily="CCodeUPCEAN_HRBS3"
                        TextColor="Black"
                        FontSize="24"
                        HorizontalOptions="Center" />
            </StackLayout>
        </ViewCell>

    </TableSection>
    </TableRoot>
</TableView>

In the above, barcodes are generated using a "Label" element in a "TableView". It is interesting to note that we have added an Extended EAN13 barcode by using "CCodeUPCEAN_HRBS3" (alias for ConnectCodeUPCEAN_HRBS3.ttf" font). Unlike the Code 128 barcode font used previously, this font embeds a Human Readable Text of a barcode as part of the font. It is also possible to generate a Standard Style EAN 13 barcode in the same way as the Code 128 barcode by using a "ConnectCodeUPCEAN_S3.ttf" font.

More information on the EAN 13 barcode fonts is available at https://www.barcoderesource.com/upcean_barcodefont.html

8.Change the "MainPage" function in "MainPage.xaml.cs" to the following:


public MainPage()
{
	InitializeComponent();
	BarcodeFonts bcf = new BarcodeFonts();
	bcf.Data = "12345678";
	bcf.BarcodeType = BarcodeFonts.BarcodeEnum.Code128Auto;
	bcf.encode();
	Code128Barcode.Text = bcf.EncodedData;
	Code128BarcodeText.Text = bcf.HumanText;
			
	bcf.Data = "12345678";
	bcf.BarcodeType = BarcodeFonts.BarcodeEnum.EAN13;
	bcf.Extended = BarcodeFonts.YesNoEnum.Yes;
	bcf.encode();
	EAN13Barcode.Text = bcf.EncodedData;
	//Set the following if using Standard Style
	//EAN13BarcodeText.Text = bcf.HumanText;
}

A Standard Style EAN 13 Barcode can be generated by setting "bcf.Extended" to "No" and using the "ConnectCodeUPCEAN_S3.ttf" font.

8. Run the application again and you should see the following barcodes generated using fonts in NET MAUI: