DEV Community

Xiao Ling
Xiao Ling

Posted on • Originally published at dynamsoft.com

How to Build a VIN Scanner App for Android and iOS with .NET MAUI

#dotnet #dotnetmaui #csharp #vin

A Vehicle Identification Number (VIN) scanner application is a useful tool for car owners and car manufacturers, enabling quick retrieval of a vehicle’s unique identifier. In this tutorial, we’ll walk through creating a cross-platform VIN scanner using .NET MAUI and Dynamsoft Capture Vision, covering setup, UI implementation, and VIN recognition logic for Android and iOS.

Demo: VIN Scanner App for Android

Prerequisites

Before starting, ensure you have these tools and resources:

  • Visual Studio 2022 or Visual Studio Code (with C# support)
  • .NET SDK

  • MAUI Workloads configured via CLI:

    dotnet workload install maui

  • A free trial license key for Dynamsoft Capture Vision.

Step 1: Set Up the .NET MAUI Project

1.1 Create a New MAUI Project

Generate a cross-platform MAUI project using the command line:

dotnet new maui -n VINScanner
Enter fullscreen mode Exit fullscreen mode

1.2 Add Platform-Specific Dependencies

Open the project file (VINScanner.csproj) and include these NuGet packages with Android/iOS-only conditions:

<PackageReference Include="Dynamsoft.CaptureVisionBundle.Maui" Version="2.6.1001" Condition="'$(TargetFramework)' == 'net9.0-android' OR '$(TargetFramework)' == 'net9.0-ios'" /> <PackageReference Include="Dynamsoft.VIN.Maui" Version="3.4.201" Condition="'$(TargetFramework)' == 'net9.0-android' OR '$(TargetFramework)' == 'net9.0-ios'" />
Enter fullscreen mode Exit fullscreen mode

1.3 Configure Target Frameworks

To avoid Windows/macOS compatibility issues, restrict the project to mobile targets in VINScanner.csproj:

<TargetFrameworks>net9.0-android;net9.0-ios;</TargetFrameworks>
Enter fullscreen mode Exit fullscreen mode

1.4 Register Camera View Handler

In MauiProgram.cs, register the CameraView handler for cross-platform camera integration:

using Microsoft.Extensions.Logging; using Dynamsoft.CameraEnhancer.Maui; using Dynamsoft.CameraEnhancer.Maui.Handlers; namespace VINScanner; public static class MauiProgram { public static MauiApp CreateMauiApp() { var builder = MauiApp.CreateBuilder(); builder .UseMauiApp<App>() .ConfigureFonts(fonts => { fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold"); }) .ConfigureMauiHandlers(handlers => { handlers.AddHandler(typeof(CameraView), typeof(CameraViewHandler)); }); #if DEBUG  builder.Logging.AddDebug(); #endif  return builder.Build(); } }
Enter fullscreen mode Exit fullscreen mode

Step 2: Design the App Architecture

The app features three core pages:

  • MainPage.xaml: Entry point with a scan initiation button.
  • CameraPage.xaml: Live camera feed with a VIN scanning region overlay.
  • ResultPage.xaml: Displays parsed VIN details in a structured format.

2.1 Implement the Main Page (Entry Point)

UI Layout (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" x:Class="VINScanner.MainPage"> <StackLayout VerticalOptions="Center" HorizontalOptions="Center"> <Button x:Name="CameraBtn" Text="Start Scanning" SemanticProperties.Hint="Open Camera" Clicked="OnCameraClicked" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/> <Label x:Name="errorMessage" TextColor="Red" VerticalOptions="Center" HorizontalOptions="Center" FontSize="Medium" Margin="0,20,0,0"/> </StackLayout> </ContentPage>
Enter fullscreen mode Exit fullscreen mode

License Initialization (MainPage.xaml.cs) 

using Dynamsoft.License.Maui; namespace VINScanner; public partial class MainPage : ContentPage, ILicenseVerificationListener { public MainPage() { InitializeComponent(); LicenseManager.InitLicense("LICENSE-KEY", this); } private async void OnCameraClicked(object sender, EventArgs e) { await Navigation.PushAsync(new CameraPage()); } public void OnLicenseVerified(bool isSuccess, string message) { if (!isSuccess) { MainThread.BeginInvokeOnMainThread(() => { errorMessage.Text = "License initialization failed: " + message; }); } } }
Enter fullscreen mode Exit fullscreen mode

2.2 Build the Camera Page (Live Scanning)

Camera Feed & Capture Button (CameraPage.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:controls="clr-namespace:Dynamsoft.CameraEnhancer.Maui;assembly=Dynamsoft.CameraEnhancer.Maui" x:Class="VINScanner.CameraPage" Title="VINScanner"> <AbsoluteLayout> <controls:CameraView x:Name="camera" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All"/> <Button Text="Capture" AbsoluteLayout.LayoutBounds="0.5, 0.8, 0.8, 0.1" AbsoluteLayout.LayoutFlags="All" HorizontalOptions="Center" VerticalOptions="End" Clicked="OnCaptureClicked"/> </AbsoluteLayout> </ContentPage>
Enter fullscreen mode Exit fullscreen mode

Scanning Logic & Result Handling (CameraPage.xaml.cs) 

using Dynamsoft.Core.Maui; using Dynamsoft.CaptureVisionRouter.Maui; using Dynamsoft.CameraEnhancer.Maui; using Dynamsoft.CodeParser.Maui; namespace VINScanner; public partial class CameraPage : ContentPage, ICapturedResultReceiver, ICompletionListener { public CameraEnhancer enhancer = new CameraEnhancer(); CaptureVisionRouter router = new CaptureVisionRouter(); bool isCaptured = false; public CameraPage() { InitializeComponent(); router.SetInput(enhancer); router.AddResultReceiver(this); } protected override void OnHandlerChanged() { base.OnHandlerChanged(); if (this.Handler != null) { enhancer.SetCameraView(camera); var region = new DMRect(0.1f, 0.4f, 0.9f, 0.6f, true); enhancer.SetScanRegion(region); } } protected override async void OnAppearing() { isCaptured = false; base.OnAppearing(); await Permissions.RequestAsync<Permissions.Camera>(); enhancer.Open(); router.StartCapturing("ReadVIN", this); } protected override void OnDisappearing() { base.OnDisappearing(); enhancer.Close(); router.StopCapturing(); } public void OnParsedResultsReceived(ParsedResult result) { if (result?.Items?.Count > 0) { ParsedResultItem parsedResultItem = result.Items[0]; if (result.Items.Count > 1) { foreach (var item in result.Items) { if (item.TaskName == "parse-vin-barcode") { parsedResultItem = item; break; } } } var dictionary = ConvertToVINDictionary(parsedResultItem); if (dictionary != null && isCaptured) { router.StopCapturing(); enhancer.ClearBuffer(); MainThread.BeginInvokeOnMainThread(async () => { await Navigation.PushAsync(new ResultPage(dictionary)); }); } } } private void OnCaptureClicked(object sender, EventArgs e) { isCaptured = true; } public Dictionary<string, string>? ConvertToVINDictionary(ParsedResultItem item) { if (item.ParsedFields.TryGetValue("vinString", out ParsedField? value) && value != null) { Dictionary<string, string> dic = []; string[] infoLists = ["vinString", "WMI", "region", "VDS", "checkDigit", "modelYear", "plantCode", "serialNumber"]; foreach (var info in infoLists) { if (item.ParsedFields.TryGetValue(info, out ParsedField? field) && field != null) { if (item.ParsedFields[info].ValidationStatus == EnumValidationStatus.VS_FAILED) { return null; } else { dic.Add(CapitalizeFirstLetter(info), item.ParsedFields[info].Value); } } } return dic; } else { return null; } } public static string CapitalizeFirstLetter(string input) { if (string.IsNullOrWhiteSpace(input)) return input; return char.ToUpper(input[0]) + input.Substring(1); } public void OnFailure(int errorCode, string errorMessage) { MainThread.BeginInvokeOnMainThread(() => { DisplayAlert("Error", errorMessage, "OK"); }); } }
Enter fullscreen mode Exit fullscreen mode

Scan VIN in a .NET MAUI app

2.3 Display VIN Results with Structured Data

Data Presentation UI (ResultPage.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" x:Class="VINScanner.ResultPage" Title="VIN Result"> <ContentPage.Content> <CollectionView ItemsSource="{Binding TableItems}"> <CollectionView.ItemTemplate> <DataTemplate> <VerticalStackLayout Padding="10"> <Label Text="{Binding Key}" FontAttributes="Bold" TextColor="Black" FontSize="16"/> <BoxView HeightRequest="1" BackgroundColor="LightGray" Margin="0,5"/> <Label Text="{Binding Value}" FontAttributes="None" TextColor="Gray" FontSize="14"/> <BoxView HeightRequest="1" BackgroundColor="LightGray" Margin="0,5"/> </VerticalStackLayout> </DataTemplate> </CollectionView.ItemTemplate> </CollectionView> </ContentPage.Content> </ContentPage>
Enter fullscreen mode Exit fullscreen mode

Data Binding Logic (ResultPage.xaml.cs) 

using System.Collections.ObjectModel; namespace VINScanner; public partial class ResultPage : ContentPage { public ObservableCollection<TableItem> TableItems { get; set; } public ResultPage(Dictionary<String, String> dictionary) { InitializeComponent(); TableItems = []; foreach (var item in dictionary) { TableItems.Add(new TableItem { Key = item.Key, Value = item.Value }); } BindingContext = this; } } public class TableItem { public string Key { get; set; } public string Value { get; set; } }
Enter fullscreen mode Exit fullscreen mode

Parse the VIN result

Source Code

https://github.com/yushulx/maui-barcode-mrz-document-scanner/tree/main/examples/VINScanner

Top comments (0)