General Example
Add BarkoderView #
Add Namespace Declaration #
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:
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 "YOUR_LICENSE_KEY" with your actual license key provided by the plugin. For example, to add a BarkoderView control, you can use the following markup:
<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 Swift.
Enabling Symbologies Directly #
You can enable individual symbologies directly by setting the enabled property of each symbology in the decoderConfig object. 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 BarcodeConfig(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. If there is an error during the start process, the error message is printed for debugging.
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 BKDViewplementing the IBarkoderDelegate allows your view controller to receive scanning results. The DidFinishScanning method is called when scanning is complete, providing the results and the captured image.
public class YourPage : 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 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
}
}