Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

Image not showing inXamarin Forms ImageCircle plugin

amitranjanamitranjan Member ✭✭

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;
            });
      /* tried this as well

var byteArray = File.ReadAllBytes(file.Path);

        ImgProfile.Source=  ImageSource.FromStream(()=> new MemoryStream( byteArray));

*/

        }

        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

Best Answer

  • jezhjezh Member, Xamarin Team Xamurai
    edited May 20 Accepted Answer

    You can try the following code:

     ImgProfile.Source = FileImageSource.FromFile(file.Path);
    

    I used the following code to test, it works properly.

    xaml

          <controls:CircleImage  Aspect="AspectFill" x:Name="ImgProfile"   >
                    <controls:CircleImage.WidthRequest>
                        <OnPlatform x:TypeArguments="x:Double">
                            <On Platform="Android, iOS">55</On>
                            <On Platform="WinPhone">75</On>
                        </OnPlatform>
                    </controls:CircleImage.WidthRequest>
                    <controls:CircleImage.HeightRequest>
                        <OnPlatform x:TypeArguments="x:Double">
                            <On Platform="Android, iOS">55</On>
                            <On Platform="WinPhone">75</On>
                        </OnPlatform>
                    </controls:CircleImage.HeightRequest>
                </controls:CircleImage>
    

    xaml.cs

       var file = await CrossMedia.Current.TakePhotoAsync(new Plugin.Media.Abstractions.StoreCameraMediaOptions
            {
                Directory = "Test",
                SaveToAlbum = true,
                CompressionQuality = 75,
                CustomPhotoSize = 50,
                PhotoSize = PhotoSize.MaxWidthHeight,
                MaxWidthHeight = 2000,
                DefaultCamera = CameraDevice.Front
            });
    
            if (file == null)
              return;
    
             DisplayAlert("File Location", file.Path, "OK");
    
              var path = file.Path;
              ImgProfile.Source = FileImageSource.FromFile(file.Path);
    

Answers

  • jezhjezh Member, Xamarin Team Xamurai
    edited May 20 Accepted Answer

    You can try the following code:

     ImgProfile.Source = FileImageSource.FromFile(file.Path);
    

    I used the following code to test, it works properly.

    xaml

          <controls:CircleImage  Aspect="AspectFill" x:Name="ImgProfile"   >
                    <controls:CircleImage.WidthRequest>
                        <OnPlatform x:TypeArguments="x:Double">
                            <On Platform="Android, iOS">55</On>
                            <On Platform="WinPhone">75</On>
                        </OnPlatform>
                    </controls:CircleImage.WidthRequest>
                    <controls:CircleImage.HeightRequest>
                        <OnPlatform x:TypeArguments="x:Double">
                            <On Platform="Android, iOS">55</On>
                            <On Platform="WinPhone">75</On>
                        </OnPlatform>
                    </controls:CircleImage.HeightRequest>
                </controls:CircleImage>
    

    xaml.cs

       var file = await CrossMedia.Current.TakePhotoAsync(new Plugin.Media.Abstractions.StoreCameraMediaOptions
            {
                Directory = "Test",
                SaveToAlbum = true,
                CompressionQuality = 75,
                CustomPhotoSize = 50,
                PhotoSize = PhotoSize.MaxWidthHeight,
                MaxWidthHeight = 2000,
                DefaultCamera = CameraDevice.Front
            });
    
            if (file == null)
              return;
    
             DisplayAlert("File Location", file.Path, "OK");
    
              var path = file.Path;
              ImgProfile.Source = FileImageSource.FromFile(file.Path);
    
Sign In or Register to comment.