Image not showing inXamarin Forms ImageCircle plugin

Question

I am working on a Android App using Xamarin Forms. I have ImageCircle plugin added on my form to display profile image. I want to update it with the photo captured from the phone's camera. So to do this i have these pieces of code.

1. XAML

 <controls:CircleImage x:Name="ImgProfile" BorderColor="DarkSlateGray" BorderThickness="5"  Aspect="AspectFit"  Scale="0.6" HeightRequest="150" WidthRequest="150" />
                            <ImageButton Source="pan.png" BackgroundColor="Transparent" Clicked="ImageButton_Clicked"></ImageButton>

2. C#

async void TakePhoto()
        {
            await CrossMedia.Current.Initialize();
            var file = await CrossMedia.Current.TakePhotoAsync(new Plugin.Media.Abstractions.StoreCameraMediaOptions
            {
                PhotoSize = Plugin.Media.Abstractions.PhotoSize.Small,
                Name = Guid.NewGuid().ToString().Substring(0,8),
                Directory= "profile"
            });

            if(file==null)
            {
                return;
            }

            ImgProfile.Source=  ImageSource.FromStream(() =>
            {
                var stream = file.GetStream();
                return stream;
            });


        }

        private void ImageButton_Clicked(object sender, EventArgs e)
        {
            TakePhoto();

        }

I tried below ways as well, but no success:

1. Setting Source = file.Path

2. Using Byte Array

3. {Binding ImageSource} in xaml and setting imagesource in code behind.

The above code is running fine, I can see byte array/stream as well in watch window.But still, Image is not displaying.

Please Note:

My approach is old school WinForm way not MVVM.

Plugins / Modules version

1. VS 2019 Community 16.5.5

2. Xamarin Android SDK - 10.2.0.100

3. Xamarin.Forms 4.6.0.800

4. Xamarin.Plugin.Media 5.0.1
5. Xamarin.Plugins.Forms.ImageCircle 3.0.0.5

Thanks in Advance

Answer 1

I use your code to test, and can take picture and display in CircleImage.

 <StackLayout>
    <!--  Place new controls here  -->
    <controls:CircleImage
        x:Name="ImgProfile"
        Aspect="AspectFit"
        BorderColor="DarkSlateGray"
        BorderThickness="5"
        HeightRequest="150"
        Scale="0.6"
        WidthRequest="150" />
    <ImageButton
        BackgroundColor="Transparent"
        Clicked="ImageButton_Clicked"
        Source="plu3.png" />
</StackLayout>

Don't forget to request camera permission.

private async void ImageButton_Clicked(object sender, EventArgs e)
    {
        var status = await CrossPermissions.Current.CheckPermissionStatusAsync(Permission.Camera);
        if (status != PermissionStatus.Granted)
        {
            if (await CrossPermissions.Current.ShouldShowRequestPermissionRationaleAsync(Permission.Camera))
            {
                await DisplayAlert("Need camera", "Gunna need that camera", "OK");
            }

            var results = await CrossPermissions.Current.RequestPermissionsAsync(Permission.Camera);
            status = results[Permission.Camera];
        }

        if (status == PermissionStatus.Granted)
        {
            Console.WriteLine("camera access");

            var file = await CrossMedia.Current.TakePhotoAsync(new Plugin.Media.Abstractions.StoreCameraMediaOptions
            {
                PhotoSize = Plugin.Media.Abstractions.PhotoSize.Medium,
                Directory = "Sample",
                Name = "test.jpg"
            });

            if (file == null)
                return;

            await DisplayAlert("File Location", file.Path, "OK");
            ImgProfile.Source = ImageSource.FromStream(() =>
            {
                var stream = file.GetStream();
                file.Dispose();
                return stream;
            });
        }
        else if (status != PermissionStatus.Unknown)
        {
            await DisplayAlert("camera Denied", "Can not continue, try again.", "OK");
        }


    }

The sample on github that you can take a look:

https://github.com/CherryBu/PhotoApp