[BUG] CameraView margins

[nk-alex]

Is there an existing issue for this?

• [X] I have searched the existing issues

Did you read the "Reporting a bug" section on Contributing file?

• [X] I have read the "Reporting a bug" section on Contributing file: https://github.com/CommunityToolkit/Maui/blob/main/CONTRIBUTING.md#reporting-a-bug

Current Behavior

I'm using the CameraView like this:

<Grid x:Name="PreviewGrid" RowSpacing="0">
	<Grid.RowDefinitions>
		<RowDefinition Height="{OnPlatform Android=50, iOS=100}"/>
		<RowDefinition Height="*"/>
		<RowDefinition Height="220"/>
	</Grid.RowDefinitions>

	<toolkit:CameraView
		 BackgroundColor="Black"
		 Grid.Row="0"
		 Grid.RowSpan="2"
		 x:Name="cameraView"
		 CameraFlashMode="Off"
		 SelectedCamera="{Binding SelectedCamera}"
		 ZoomFactor="{Binding SelectedZoom}"
		 HorizontalOptions="FillAndExpand"
		 MediaCaptured="cameraView_MediaCaptured"
		 VerticalOptions="FillAndExpand" />
</Grid>

This is producing this output:

Notice the red margins. I'm trying to place my CameraView on top of my page. Avoiding any type of margins. This is the aspect of the same code on Xamarin.Forms (this is what I'm looking for)

Setting VerticalOptions="StartAndExpand" produces this output:

Expected Behavior

Get the same aspect as Xamarin.

Steps To Reproduce

Just create a new page and put the grid above in it.

Link to public reproduction project repository

https://github.com/nk-alex/CameraView

Environment

- .NET MAUI CommunityToolkit:9.0.2
- .NET MAUI CommunityToolkit Camera:1.0.3
- OS: Windows 10 Build 10.0.19041.0
- .NET MAUI:8.0.71

Anything else?

Seems this is not happening when using shell. But I'm not using shell on my application. Here is a shell image:

[tschbc]

My guess is that placing the CameraView across two rows (one fixed, one star) is doing this. Try placing the camera view in its own row, ideally the star row.

If you want to float views over the CameraView, try wrapping it with an AbsoluteLayout. I haven't had the greatest luck using Grids to float due to MAUI bugs, but AbsoluteLayouts have... absolutely worked for me.

[nk-alex]

@tschbc thanks for the response. I tried your suggestion, even completely removing the grid and the result it's the same:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             Title="{Binding Title}"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="SampleCameraView.Views.MainPage">

  <toolkit:CameraView
		   BackgroundColor="Red"
		   Grid.Row="0"
		   HorizontalOptions="FillAndExpand"
		   VerticalOptions="FillAndExpand" />

</ContentPage>

Even when trying VerticalOptions="StartAndExpand" there are some lateral margins showing:

[bijington]

To start with I would recommend removing use of any xxxAndExpand because those layout options are deprecated in .NET MAUI https://learn.microsoft.com/dotnet/api/microsoft.maui.controls.layoutoptions.startandexpand?view=net-maui-8.0&viewFallbackFrom=net-maui-7.0

[tschbc]

@nk-alex In that case, try wrapping the CameraView in a ContentView. Sounds weird, but doing this "fixed" (as a workaround) a CollectionView layout issue before. In my project I'm using a CameraView inside of a ContentView (also with a grid and other views) and everything layouts correctly for me—on iOS and Windows 10.

In your case, it could be enough to:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             Title="{Binding Title}"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="SampleCameraView.Views.MainPage">

  <ContentView>
    <toolkit:CameraView
		     BackgroundColor="Red"
		     Grid.Row="0"
		     HorizontalOptions="FillAndExpand"
		     VerticalOptions="FillAndExpand" />
  </ContentView>
</ContentPage>

[nk-alex]

Hi, thanks for the suggestions, I tried both but unfortunately margin still showing for me:

<Grid x:Name="PreviewGrid" RowSpacing="0">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="220"/>
    </Grid.RowDefinitions>

    <ContentView Grid.Row="0">
        <toolkit:CameraView
		 x:Name="cameraView"
		 CameraFlashMode="Off"
		 SelectedCamera="{Binding SelectedCamera}"
		 ZoomFactor="{Binding SelectedZoom}"
		 MediaCaptured="cameraView_MediaCaptured"/>
    </ContentView>
</Grid>

Looks like the preview is always centred in the given space instead of taking all the available space, so margins are always showing. Strange thing in Shell app is showing as expected

[tschbc]

@nk-alex My next thought is to try not placing the CameraView in any grid.

EDIT: I wrote a lot before realizing I hadn't fully thought this through.

I think margins are to be expected in certain cases, since we wouldn't want to crop the CameraView to make it fit—otherwise you would be missing visual info in the prevew.

Looking back, this image you sent looks correct to me:

But I agree that the image immediately after should fill vertically until it reaches its horizontal limit instead of the margin it gives:

You may need to play around with layouts other than Grid to see what you can get. I recommend trying AbsoluteLayout.

[nk-alex]

Hi, thanks for the suggestions, I tried both but unfortunately margin still showing for me:

<Grid x:Name="PreviewGrid" RowSpacing="0">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="220"/>
    </Grid.RowDefinitions>

    <ContentView Grid.Row="0">
        <toolkit:CameraView
		 x:Name="cameraView"
		 CameraFlashMode="Off"
		 SelectedCamera="{Binding SelectedCamera}"
		 ZoomFactor="{Binding SelectedZoom}"
		 MediaCaptured="cameraView_MediaCaptured"/>
    </ContentView>
</Grid>

Looks like the preview is always centred in the given space instead of taking all the available space, so margins are always showing. Strange thing in Shell app is showing as expected

Just as an update. I just tried the same code on iOS real device as well. The result is the same as in Android with shell application (no margins). Seems like the margins are only showing in android without shell.

[kimhongka]

Im also getting the same issue. It only occurs on Android. The same codes work for ios. I am not using shell. I only added the cameraview, no grid or anything, just only cameraview, I can see top and bottom empty space. I think the cameraview itself stratched to the full screensize, but the preview has some sort of aspect rasio and does not fully fill the cameraview. This is blocker to use this control. I have tried the MAUI bulit in cameraview, it requires hard coded fixed hightrequest and widthrequest. I calculated the screensize and it fill the full screen, but I found the resolution of the MAUI cameraview is really bad for the preview, it was not useable, so I want to use toolkit cameraview, yet I am having this issue.. guess this issue is never going to be fixed, the same as other bugs in MAUI.

[bijington]

@kimhongka we accept PRs if you know the fix?

[Raifex]

Just wanted to share our solution in case it helps others encountering this issue. While you may have moved on from this, we resolved the camera preview sizing on Android by implementing a custom handler:

protected override void ConnectHandler(PreviewView platformView) { base.ConnectHandler(platformView); platformView.ScaleType = PreviewView.ScaleType.FillCenter; }

In the code its set to FitCenter, the FillCenter will fillup the remaining space.

[nk-alex]

Thanks for sharing your solution @Raifex.

I can confirm it works for me (.net9.0, CommunityToolkit.Maui.Camera 2.0.3, Microsoft.Maui.Controls 9.0.60)

For those like me who rather using Maui handlers, @Raifex solution could be translated as:

#if ANDROID
        CameraViewHandler.ViewMapper.AppendToMapping("CameraViewHandler", (handler, view) =>
        {
            if (handler.PlatformView is PreviewView previewView)
            {
                previewView.SetScaleType(PreviewView.ScaleType.FillCenter);
            }
        });
#endif

Closing this one!

[IljaKan]

Solved my issue! The code above is working!