Xamarin.CommunityToolkit.MauiCompat CameraView produces Android No view found for fragment CameraFragment error - xamarin.android

Question

Thanks in advance!! I'm quite new to XAML so be kind :)
My requirement is to add a CameraView to a .net Maui app which runs on Android and iOS.
I understand that there is no CameraView in the Maui.Community.Toolkit but I was under the impression, which may be wrong, that I could run the Xamarin.Community.Tookit.MauiCompat packages which I'm trying to do in the code below.
using Microsoft.AspNetCore.Components.WebView.Maui;
using Xamarin.CommunityToolkit.MauiCompat;
using Microsoft.Maui.Controls.Compatibility.Hosting;
etc...
namespace Mobile;
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
});
builder.Services.AddScoped(sp => new HttpClient
{
Timeout = TimeSpan.FromMinutes(10)
});
builder.Services.AddSingleton<MainPage>();
builder.Services.AddBlazorWebViewDeveloperTools();
builder.Services.AddMauiBlazorWebView();
builder.Services.AddScoped<IAuthenticationService, AuthenticationService>();
builder.Services.AddScoped<AuthenticationStateProvider, AuthStateProvider>();
builder.Services.AddAuthorizationCore();
builder.UseMauiCompatibility();
builder.ConfigureMauiHandlers(handlers =>
{
// Register ALL handlers in the Xamarin Community Toolkit assembly
handlers.AddCompatibilityRenderers(typeof(Xamarin.CommunityToolkit.UI.Views.CameraViewRenderer).Assembly);
// Register just one handler for the control you need
handlers.AddCompatibilityRenderer(typeof(Xamarin.CommunityToolkit.UI.Views.CameraView), typeof(Xamarin.CommunityToolkit.UI.Views.CameraViewRenderer));
});
return builder.Build();
}
}
MainPage.xaml (Which I simply pasted from https://github.com/xamarin/XamarinCommunityToolkit/blob/main/samples/XCT.Sample/Pages/Views/CameraViewPage.xaml.cs)
<?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:b="clr-namespace:Microsoft.AspNetCore.Components.WebView.Maui;assembly=Microsoft.AspNetCore.Components.WebView.Maui"
xmlns:local="clr-namespace:Mobile"
xmlns:data="clr-namespace:Mobile.Data"
xmlns:zxing="clr-namespace:ZXing.Net.Maui.Controls;assembly=ZXing.Net.MAUI"
xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
x:Class="Mobile.MainPage"
BackgroundColor="{DynamicResource PageBackgroundColor}">
<ContentPage.Resources>
<data:ShowQrReaderConverter x:Key="ShowQrReaderConverter"/>
<data:ShowFrCapturingConverter x:Key="ShowFrCapturingConverter"/>
</ContentPage.Resources>
<AbsoluteLayout>
<b:BlazorWebView HostPage="wwwroot/index.html"
AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
AbsoluteLayout.LayoutFlags="All">
<b:BlazorWebView.RootComponents>
<b:RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
</b:BlazorWebView.RootComponents>
</b:BlazorWebView>
<!-- QR Reader -->
Removed for brevity...
<!-- FR Camera View -->
<AbsoluteLayout
x:Name="absLayout2"
Margin="0,334"
BackgroundColor="Beige"
HeightRequest="{Binding availableQrReaderHeight}"
WidthRequest="{Binding availableQrReaderWidth}"
>
<AbsoluteLayout.TranslationX>
<MultiBinding Converter="{StaticResource ShowFrCapturingConverter}">
<Binding Path="CardToggle" />
<Binding Path="cameraViewerCapturing" />
<Binding Path="AppState.ShootMode" />
</MultiBinding>
</AbsoluteLayout.TranslationX>
<Grid RowDefinitions="300, Auto, *">
<Grid ColumnDefinitions="*, *" Grid.Row="0">
<xct:CameraView
Grid.Column="0"
x:Name="cameraView"
CaptureMode="Photo"
FlashMode="Off"
HorizontalOptions="FillAndExpand"
MediaCaptured="CameraView_MediaCaptured"
OnAvailable="CameraView_OnAvailable"
VerticalOptions="FillAndExpand" />
<Label
Grid.Column="0"
Text="Camera"
HorizontalTextAlignment="Center"
HorizontalOptions="FillAndExpand"
VerticalOptions="End" />
<Image
Grid.Column="1"
x:Name="previewPicture"
Aspect="AspectFit"
BackgroundColor="LightGray" />
<xct:MediaElement
Grid.Column="1"
x:Name="previewVideo"
Aspect="AspectFit"
BackgroundColor="LightGray"
IsVisible="false"/>
<Label
Grid.Column="1"
Text="Result"
HorizontalTextAlignment="Center"
HorizontalOptions="FillAndExpand"
VerticalOptions="End" />
</Grid>
<StackLayout Grid.Row="1" Orientation="Horizontal">
<Label x:Name="zoomLabel" />
<Slider
x:Name="zoomSlider"
Margin="5,0"
IsEnabled="False"
Maximum="10"
Minimum="1"
HorizontalOptions="FillAndExpand"
ValueChanged="ZoomSlider_ValueChanged"
Value="1" />
</StackLayout>
<StackLayout Grid.Row="2">
<Grid ColumnDefinitions="*, *" RowDefinitions="*,*">
<StackLayout
Grid.Row="0"
Grid.Column="0"
Margin="5"
Orientation="Horizontal">
<Switch
Margin="0,0,5,0"
IsToggled="False"
Toggled="VideoSwitch_Toggled" />
<Label Text="Video" />
</StackLayout>
<StackLayout
Grid.Row="1"
Grid.Column="0"
Margin="5"
Orientation="Horizontal">
<Switch
Margin="0,0,5,0"
IsToggled="False"
Toggled="FrontCameraSwitch_Toggled" />
<Label Text="Front camera" />
</StackLayout>
<StackLayout
Grid.Row="0"
Grid.Column="1"
Margin="5"
Orientation="Horizontal">
<Switch
Margin="0,0,5,0"
IsToggled="False"
Toggled="FlashSwitch_Toggled" />
<Label Text="Flash" />
</StackLayout>
</Grid>
<Button
x:Name="doCameraThings"
Clicked="DoCameraThings_Clicked"
IsEnabled="False"
Text="Snap picture" />
</StackLayout>
</Grid>
</AbsoluteLayout>
</AbsoluteLayout>
MainPage.xaml.cs
...
using Xamarin.CommunityToolkit.UI.Views;
namespace Mobile;
public partial class MainPage : ContentPage
{
LocalDb _db;
AppStateService _AppStateService;
CommonMethods _CommonMethods;
public MainPage(AppStateService AppStateService, LocalDb db, CommonMethods CommonMethods)
{
InitializeComponent();
this.BindingContext = AppStateService;
_AppStateService = AppStateService;
_db = db;
_CommonMethods = CommonMethods;
zoomLabel.Text = string.Format("Zoom: {0}", zoomSlider.Value);
}
//Begin CameraView methods
void ZoomSlider_ValueChanged(object? sender, ValueChangedEventArgs e)
{
cameraView.Zoom = (float)zoomSlider.Value;
zoomLabel.Text = string.Format("Zoom: {0}", Math.Round(zoomSlider.Value));
}
void VideoSwitch_Toggled(object? sender, ToggledEventArgs e)
{
var captureVideo = e.Value;
if (captureVideo)
cameraView.CaptureMode = CameraCaptureMode.Video;
else
cameraView.CaptureMode = CameraCaptureMode.Photo;
previewPicture.IsVisible = !captureVideo;
doCameraThings.Text = e.Value ? "Start Recording"
: "Snap Picture";
}
// You can also set it to Default and External
void FrontCameraSwitch_Toggled(object? sender, ToggledEventArgs e)
=> cameraView.CameraOptions = e.Value ? CameraOptions.Front : CameraOptions.Back;
// You can also set it to Torch (always on) and Auto
void FlashSwitch_Toggled(object? sender, ToggledEventArgs e)
=> cameraView.FlashMode = e.Value ? CameraFlashMode.On : CameraFlashMode.Off;
void DoCameraThings_Clicked(object? sender, EventArgs e)
{
cameraView.Shutter();
doCameraThings.Text = cameraView.CaptureMode == CameraCaptureMode.Video
? "Stop Recording"
: "Snap Picture";
}
void CameraView_OnAvailable(object? sender, bool e)
{
if (e)
{
zoomSlider.Value = cameraView.Zoom;
var max = cameraView.MaxZoom;
if (max > zoomSlider.Minimum && max > zoomSlider.Value)
zoomSlider.Maximum = max;
else
zoomSlider.Maximum = zoomSlider.Minimum + 1; // if max == min throws exception
}
doCameraThings.IsEnabled = e;
zoomSlider.IsEnabled = e;
}
void CameraView_MediaCaptured(object? sender, MediaCapturedEventArgs e)
{
switch (cameraView.CaptureMode)
{
default:
case CameraCaptureMode.Default:
case CameraCaptureMode.Photo:
previewVideo.IsVisible = false;
previewPicture.IsVisible = true;
previewPicture.Rotation = e.Rotation;
previewPicture.Source = e.Image;
doCameraThings.Text = "Snap Picture";
break;
case CameraCaptureMode.Video:
previewPicture.IsVisible = false;
previewVideo.IsVisible = true;
previewVideo.Source = e.Video;
doCameraThings.Text = "Start Recording";
break;
}
}
}
This produces the error:
No view found for id 0x1 (unknown) for fragment CameraFragment{f98267d} (57bc3319-7a90-475b-a4d0-458320859acb id=0x1 tag=camera)