2

I want to have ZXing.Net.Mobile barcodes scanner with a custom overlay and some UI components implemented in Xamarin.Forms in one View. Is it possible at all?

I assumed that this is possible and implemented this: 1. Android.Support.V4.App.FragmentActivity with a custom overlay for ZXing scanner. 2. Android Activity with a custom overlay for ZXing scanner. 3. Android PageRenderer with a custom overlay for ZXing scanner.

I was able to run all these variants, but I was not able to mix them with Xamarin.Forms UI.

Example: Here is my ZXingScannerRendererPage.xaml in the shared project. I want to have "TEST BUTTON" button above Zxing Scanner view.

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage x:Name="RootPage"
    BackgroundColor="{StaticResource BackgroundColor}"
    xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:views="clr-namespace:DataCollector" x:Class="DataCollector.ZXingScannerRendererPage">
    <ContentPage.Content>
        <StackLayout>
            <Button Text="TEST BUTTON" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

But when I run the application with PageRenderer I can see for a second my layout with "TEST BUTTON" and then view jumps to ZXing scanner. When I "press back" button, I can see my XAML layout with "TEST BUTTON". I think ZXing opens a new activity or something.

So, what I need is: 1. Embed ZXing.Net.Mobile barcodes scanner with custom overlay into my Xamarin.Forms ContentPage along with other Xamarin.Forms UI. or 2. Embed Xamarin.Forms UI above view with ZXing.Net.Mobile barcodes scanner with a custom overlay.

How to accomplish this? Is it possible to embed PageRenderer/Fragment/View into Xamarin.Forms XAML?

Thanks!

Tony V.
  • 350
  • 1
  • 4
  • 21

2 Answers2

4

How to accomplish this? Is it possible to embed PageRenderer/Fragment/View into Xamarin.Forms XAML?

You could embed the scanner view in between to other redundant BoxViews.

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                    x:Class="ZXingSample.PartialScreenScanning"
                    xmlns:zxing="clr-namespace:ZXing.Net.Mobile.Forms;assembly=ZXing.Net.Mobile.Forms"
                    Title="Partial screen">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <BoxView Grid.Row="0" BackgroundColor="Chocolate"/>
    <zxing:ZXingScannerView Grid.Row="1" x:Name="_scanView" OnScanResult="Handle_OnScanResult" IsScanning="true"
                            WidthRequest="200" HeightRequest="200" />
    <BoxView Grid.Row="2" BackgroundColor="Blue" />
</Grid>

enter image description here

You could download the source file from the GitHub. https://github.com/jfversluis/ZXingSample

This blog would be helpful as well. https://blog.verslu.is/xamarin/xamarin-forms-xamarin/scanning-generating-barcodes-zxing/

Wendy Zang - MSFT
  • 10,509
  • 1
  • 7
  • 17
1

I think there is an identical thread in XF forum. You may find some hints from my reply on it https://forums.xamarin.com/discussion/176704/how-to-embed-zxing-scanner-in-pagerenderer-fragment-view-into-xamarin-forms-contentpage#latest

Jimmy Pun
  • 11
  • 3