Skip to main content

Classic UI

Our Classic UI components allow you to build custom screens which are flexible and fully customizable. It is a set of easy to integrate components (Views, Buttons, Handlers, Controllers, etc.) which can be embedded and extended in your custom screens.

For more details please see the documentation of our native Barcode Scanner SDKs for iOS and Android as well as our example apps.

For a fully functional example, please see our example app scanbot-barcode-sdk-maui-example on GitHub.


BarcodeScannerView

BarcodeScannerView extends BaseBarcodeScannerView with additional functionality specific to barcode scanning scenarios.

Properties and Event Handlers

BarcodeScanAndCountView

BarcodeScanAndCountView extends the BaseBarcodeScannerView to facilitate scenarios requiring both barcode scanning and counting.

Properties and Event Handlers

Integration prerequisites

Required: Permission validation

Classic components do not automatically validate camera access permissions. It's up to developers to request and secure these permissions within their applications. Before integrating camera functionalities, ensure that your app has obtained the necessary permissions to provide users with a seamless experience.

For MAUI applications, please see our example on how to request camera permissions to ensure smooth operation:

ScanbotBarcodeSDKExample/BarcodeSDK.MAUI.Example/Common/Validation.cs
loading...

For a fully functional example, please see our example app scanbot-barcode-sdk-maui-example on GitHub.

Classic UI component: Barcode Scanner

You can utilize the BarcodeScannerView class from xmlns:classicComponent="clr-namespace:ScanbotSDK.MAUI.ClassicComponent;assembly=BarcodeSDK.MAUI" to integrate barcode scanning functionality into your application seamlessly. This component encapsulates the barcode scanning feature within a single UI component.

caution
  • To ensure a smooth user experience, please encapsulate the BarcodeScannerView within the ScanbotClassicUIContainer. This approach helps to manage the camera preview and view hierarchy more effectively.

  • A ScanbotClassicUIContainer must specify HeightRequest, when contained in StackLayout, VerticalStackLayout and HorizontalStackLayout. If you fail to specify the HeightRequest, the ScanbotClassicUIContainer will not render.

  • We recommend using the Border layout over the Frame layout, as suggested by Microsoft. The Border layout is the preferred option for the MAUI applications. It provides improved flexibility and performance. Please refer to the Microsoft documentation here.

ScanbotBarcodeSDKExample/BarcodeSDK.MAUI.Example/Pages/BarcodeClassicComponentPage.xaml
loading...

In the BarcodeClassicComponentPage class, the cameraView component is configured for barcode scanning. The SetupViews() method initializes event handlers to process barcode scan results and configures the visual overlay for barcode detection.

ScanbotBarcodeSDKExample/BarcodeSDK.MAUI.Example/Pages/BarcodeClassicComponentPage.xaml.cs
loading...

For a fully functional example, please see our example app scanbot-barcode-sdk-maui-example on GitHub.

Classic UI component: Scan & Count

Use the class BarcodeScanAndCountView from xmlns:classicComponent="clr-namespace:ScanbotSDK.MAUI.ClassicComponent;assembly=BarcodeSDK.MAUI" which incapsulates the Barcode Scanning ScanAndCount feature in one UI component. When using the BarcodeScanAndCountView component, it is not required to work directly with the Camera view or to set up a finder view separately.

caution
  • To ensure a smooth user experience, please encapsulate the BarcodeScanAndCountView within the ScanbotClassicUIContainer. This approach helps to manage the camera preview and view hierarchy more effectively.

  • A ScanbotClassicUIContainer must specify HeightRequest, when contained in StackLayout, VerticalStackLayout and HorizontalStackLayout. If you fail to specify the HeightRequest, the ScanbotClassicUIContainer will not render.

  • We recommend using the Border layout over the Frame layout, as suggested by Microsoft. The Border layout is the preferred option for the MAUI applications. It provides improved flexibility and performance. Please refer to the Microsoft documentation here.

To start using the barcode feature, add the following view into your xaml:

ScanbotBarcodeSDKExample/BarcodeSDK.MAUI.Example/Pages/BarcodeScanAndCountClassicComponentPage.xaml
loading...

The cameraView component in BarcodeScanAndCountClassicComponentPage handles barcode scanning and counting smoothly. It manages scan results, visual settings, and detection control. When the page appears, scanning starts, and it stops when the page disappears. Also, it handles button states for user interaction.

ScanbotBarcodeSDKExample/BarcodeSDK.MAUI.Example/Pages/BarcodeScanAndCountClassicComponentPage.xaml.cs
loading...

To enhance the configuration of Overlay with manual barcode SelectionOverlay, you can modify the above code by adding additional parameters and settings according to your needs.

ScanbotBarcodeSDKExample/BarcodeSDK.MAUI.Example/Pages/BarcodeArOverlayClassicComponentPage.xaml.cs
loading...

For a fully functional example, please see our example app scanbot-barcode-sdk-maui-example on GitHub.

Want to scan longer than one minute?

Generate a free trial license to test the Scanbot SDK thoroughly.

Get your free Trial License

What do you think of this documentation?