.NET MAUI General example

Add BarkoderView #

Add Namespace Declaration #

Start with the app, the package and the BarkoderViewHandler in MauiProgram.cs, as on the Installation page. In your XAML file where you want to use the plugin, add a namespace declaration for the plugin assembly. This allows you to reference the controls provided by the plugin in your XAML markup. For example:

XML

xmlns:barkoder="clr-namespace:Plugin.Maui.Barkoder.Controls;assembly=Plugin.Maui.Barkoder"

Once you've added the namespace declaration, you can now use the controls provided by the plugin in your XAML markup. Replace "KEY" with your license key. For example, to add a BarkoderView control, you can use the following markup:

XML

<barkoder:BarkoderView
    x:Name="BKDView"
    barkoder:LicenseKey="KEY"
    HeightRequest="300"/>

Creating Barkoder Configuration #

The SetBarkoderSettings method is responsible for setting up the configuration required to initiate barcode scanning

private void SetBarkoderSettings()
{
    // These are optional settings, otherwise default values will be used
    BKDView.SetImageResultEnabled(true);
    BKDView.SetLocationInPreviewEnabled(true);
    BKDView.SetRegionOfInterestVisible(true);
    BKDView.SetCloseSessionOnResultEnabled(true);

    BKDView.SetRegionOfInterest(5, 5, 90, 90);
}

Enabling Symbologies #

Here’s a detailed and refined explanation of how you can enable individual symbologies for barcode scanning using both direct configuration and JSON configuration in C#.

Enabling Symbologies Directly #

You can enable individual symbologies directly with SetBarcodeTypeEnabled, one call for each type. Here’s a method that demonstrates how to do this:

private void SetActiveBarcodeTypes()
{
    BKDView.SetBarcodeTypeEnabled(Plugin.Maui.Barkoder.Enums.BarcodeType.Ean13, true);
    BKDView.SetBarcodeTypeEnabled(Plugin.Maui.Barkoder.Enums.BarcodeType.UpcA, true);
    BKDView.SetBarcodeTypeEnabled(Plugin.Maui.Barkoder.Enums.BarcodeType.QR, true);
}

Enabling Symbologies via JSON Configuration #

Alternatively, you can enable symbologies using a JSON configuration. This approach allows you to define the symbology settings in a more structured and flexible manner. Here’s how you can do it:

private void SetActiveBarcodeTypes()
{
BarkoderConfig barkoderConfig = new BarkoderConfig(
            decoder: new DekoderConfig(
                qr: new DatamatrixBarcodeConfig(true),
                ean13: new BarcodeConfig(true),
                code128: new BarcodeConfigWithLength(true, 0, 10),
                dotcode: new BarcodeConfig(true)
                ));

BKDView.ConfigureBarkoder(barkoderConfig);
}

Setting barKoder settings #

Next define a function SetBarkoderSettings where we will update our settings for the barcode scanner view (bkdView).

In our case we will enable image results and include barcode location within the image, also make the region of interest visible and enable pinch-to-zoom functionality.

Finally, configure the ROI to cover the central 90% of the scanner view.

These configurations enhance the user experience by providing more detailed scan results, interactive zooming, and visual feedback about the scan area.

private void SetBarkoderSettings()
{
    // These are optional settings, otherwise default values will be used
    BKDView.SetImageResultEnabled(true);
    BKDView.SetLocationInPreviewEnabled(true);
    BKDView.SetRegionOfInterestVisible(true);
    BKDView.SetCloseSessionOnResultEnabled(true);

    BKDView.SetRegionOfInterest(5, 5, 90, 90);
}

Starting Scan #

The StartScanning method initiates the scanning process. In the complete solution below it is the Start Scanning button's Clicked handler.

private void OnStartScanningBtnClicked(object sender, EventArgs e)
{
    BKDView.StartScanning(this);
}

Ready to Scan Event #

To begin scanning, ensure that you have implemented the IBarkoderDelegate interface and then call the StartScanning method from BKDView. Implementing IBarkoderDelegate lets your page receive scanning results. The DidFinishScanning method is called when scanning is complete, providing the results and the captured image.

public partial class MainPage : ContentPage, IBarkoderDelegate
{
    // Your existing methods and properties...

    // Method to start the scanning process
    private void StartScanning()
    {
        // Start scanning using the BarkoderView control and pass 'this' as the delegate
        BKDView.StartScanning(this);
    }

    // Implementing the DidFinishScanning method from IBarkoderDelegate
    public void DidFinishScanning(BarcodeResult[] result, ImageSource originalImageSource)
    {
        // Handle the scanned result here
        foreach (var barcode in result)
        {
            // Do something with each barcode result, for example:
            Console.WriteLine($"Scanned barcode: {barcode.TextualData}");
        }

         // Do something with originalImageSource, for example
         OriginalImage.Source = originalImageSource;
    }
}

Complete solution #

In the end, let's merge all of these functions and implement them within our main xaml file.

This code would go in your xaml file, and of course it will be different for your project, but generally it's a good starting point to have.

MainPage.xaml #

XML

<?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:barkoder="clr-namespace:Plugin.Maui.Barkoder.Controls;assembly=Plugin.Maui.Barkoder"
x:Class="BarkoderSample.MainPage">

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

        <Label
            x:Name="TitleLabel"
            HorizontalOptions="Center"
            VerticalOptions="CenterAndExpand" />

        <barkoder:BarkoderView
            x:Name="BKDView"
            barkoder:LicenseKey="KEY"
            HeightRequest="300"/>

        <Button
            x:Name="StartScanningBtn"
            Text="Start Scanning"
            Clicked="OnStartScanningBtnClicked"
            HorizontalOptions="Fill" />

        <Label
            x:Name="TextualDataLbl"
            HorizontalOptions="Fill" />

        <Image
            x:Name="OriginalImage" 
            HeightRequest="300" />

    </VerticalStackLayout>
</ScrollView>
</ContentPage>

MainPage.xaml.cs #

namespace BarkoderSample;

using Plugin.Maui.Barkoder.Handlers;
using Plugin.Maui.Barkoder.Interfaces;
using Barkoder;
using System.Threading.Tasks;

public partial class MainPage : ContentPage, IBarkoderDelegate
{

public MainPage()
{
    InitializeComponent();

    _ = ExecuteAfterDelayAsync();
}

private async Task ExecuteAfterDelayAsync()
{
    await Task.Delay(TimeSpan.FromSeconds(0.5));

    SetUI();
    SetBarkoderSettings();
    SetActiveBarcodeTypes();
}

private void SetUI()
{
    Title = $"Barkoder Sample (v{BKDView.Version})";
}

private void SetBarkoderSettings()
{
    // These are optional settings, otherwise default values will be used
    BKDView.SetImageResultEnabled(true);
    BKDView.SetLocationInPreviewEnabled(true);
    BKDView.SetRegionOfInterestVisible(true);
    BKDView.SetCloseSessionOnResultEnabled(true);

    BKDView.SetRegionOfInterest(5, 5, 90, 90);
}

private void SetActiveBarcodeTypes()
{
    BKDView.SetBarcodeTypeEnabled(Plugin.Maui.Barkoder.Enums.BarcodeType.Ean13, true);
    BKDView.SetBarcodeTypeEnabled(Plugin.Maui.Barkoder.Enums.BarcodeType.UpcA, true);
    BKDView.SetBarcodeTypeEnabled(Plugin.Maui.Barkoder.Enums.BarcodeType.QR, true);
}

private void OnStartScanningBtnClicked(object sender, EventArgs e)
{
    BKDView.StartScanning(this);
}

public void DidFinishScanning(BarcodeResult[] result, ImageSource originalImageSource)
{
    // Handle the scanned result here
    foreach (var barcode in result)
    {
        // Do something with each barcode result, for example:
        Console.WriteLine($"Scanned barcode: {barcode.TextualData}");
    }

    // Do something with originalImageSource, for example
    OriginalImage.Source = originalImageSource;
}

}

Batch MultiScan

On this page