[Possible improvement] Use the component in a Xamarin ContentView on Android

[rfernandez]

I have an Android application with:

• Xamarin.Fomrs 5.0.0.1874
• Xamarin.CommunityToolkit 1.0.1
• Xamarin.Essentials 1.6.1-preview1
• Zxing.Net.Mobile.Forms 3.0.0-beta5

I am using the new TabView component. This component allows you to associate a view to each button. So I need to be able to use the Zxing component inside a ContentView.

The latest version of the Zxing component does not allow it to be used within a ContentView. It only works if you include it within a ContentPage. I have found a workaround by modifying the Android renderer ZXingScannerViewRenderer:

...

protected override async void OnElementChanged(ElementChangedEventArgs<ZXingScannerView> e)
{
    base.OnElementChanged(e);

    formsView = Element;

    if (zxingSurface == null)
    {

        // Process requests for autofocus
        ...

        var currentContext = Android.App.Application.Context;

        //zxingSurface = new ZXingSurfaceView(Context as Activity, formsView.Options);

        zxingSurface = new ZXingSurfaceView(currentContext, formsView.Options);

        ...
    }
}

...

To force this new renderer to use, I have copied the ZXingScannerView class into my common project with my namespace. In this way, I can already use the scanner from a view in XAML:

<?xml version="1.0" encoding="UTF-8" ?>
<ContentView
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:custom="clr-namespace:Certix.Mobile.Custom"
    xmlns:scanner="clr-namespace:ZXing.Net.Mobile.Forms;assembly=ZXing.Net.Mobile.Forms"
    x:Class="Certix.Mobile.Views.Authority.VerifyCertificateViewPage">
    <ContentView.Content>
        <StackLayout Padding="17,70,17,0">

            <Grid HorizontalOptions="Center">
                <Grid.RowDefinitions>
                    <RowDefinition Height="208" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="208" />
                </Grid.ColumnDefinitions>

                <custom:ZXingScannerView
                    HorizontalOptions="Center"
                    HeightRequest="208"
                    WidthRequest="208"
                    IsScanning="{Binding IsScanning}"
                    IsAnalyzing="{Binding IsAnalyzing}"
                    Result="{Binding Result, Mode=TwoWay}"
                    ScanResultCommand="{Binding QRScanResultCommand}"/>

                <scanner:ZXingDefaultOverlay
                    Visual="Material"
                    x:Name="scanOverlay"
                    TopText=""
                    BottomText=""
                    ShowFlashButton="false"
                    Opacity="0.9" />
            </Grid>

...

[kobynz]

Thanks for sharing your work around. It worked for me, allowing the scanner view to work inside a XCT TabView.

This issue really needs more visibility.

[AxelTechnology]

May you post full code , please? Solution does not work.

This is my Custom ZXing `[assembly: ExportRenderer(typeof(VSR.Controls.MyZXingScannerView), typeof(VSR.Droid.ZXingScannerViewRenderer))] namespace VSR.Droid { internal class ZXingScannerViewRenderer : ZXing.Net.Mobile.Forms.Android.ZXingScannerViewRenderer { public ZXingScannerViewRenderer(Context context) : base(context) { }

    protected override void OnElementChanged(ElementChangedEventArgs<ZXing.Net.Mobile.Forms.ZXingScannerView> e)
    {
        base.OnElementChanged(e);

        formsView = Element;

        //if (zxingSurface == null)
        {
            var currentContext = Android.App.Application.Context;

            zxingSurface = new ZXingSurfaceView(currentContext, formsView.Options);

        }
    }
}

}`

This is my contentView with Custom ZXingView `<?xml version="1.0" encoding="utf-8" ?> <ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:ZXing="clr-namespace:ZXing.Net.Mobile.Forms;assembly=ZXing.Net.Mobile.Forms" xmlns:dxe="http://schemas.devexpress.com/xamarin/2014/forms/editors" xmlns:controls="clr-namespace:VSR.Controls" MinimumHeightRequest="500" x:Class="VSR.ScanPage">

` In my main page, ` ` where DXPopup is DevExpress popup view. When i show the ScanPage, and press undo i see a small image iunder my popu but is not on front Any ideas?