question

OlafBeckman-4182 avatar image
0 Votes"
OlafBeckman-4182 asked OlafBeckman-4182 answered

Image disappears when changing ImageSource

I'm porting my world famous "Cat Litter Reminder" app to iOS using Xamarin Forms (the previous version was written using Xamarin.Android).

When I change the Image on the page by setting the Image.Source property, the Image on the XAML ContentPage momentarily disappears, a layout occurs, and than the Image appears again. This is very annoying.

How can I avoid this redrawing?

dotnet-xamarin
· 7
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi @OlafBeckman-4182 ,do you mean the picture disappeared when you changed the Image 's Source, right? If I understand correctly, this phenomenon is due to the XAML Hot Reload for Xamarin.Forms. For more about XAML Hot Reload, you can check: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/xaml/hot-reload

0 Votes 0 ·

Hi Jessie, but Hot Reload is something that only pertains to design time in Visual Studio right? Not run time on my phone.

0 Votes 0 ·

Sorry, I don't understand what you mean. How did you change the ImageSource when the app is in the runtime? Can you elaborate on that?

0 Votes 0 ·
 public void SetImage(string image)
 {
     CatLitterTrayImage.Source = Utilities.GetImageFromResource(image);
 }

I call this when I click on a button during the running of the app.

BTW I'm planning to solve my problem by using SkiaSharp, which gives me some more control over the loading of the bitmaps.


0 Votes 0 ·

Waitting for your good news. Please feel free to contact us if you have any problem.

0 Votes 0 ·

Hi Jessie, I solved it completely using SkiaSharp. Works perfectly now.

0 Votes 0 ·
Show more comments

1 Answer

OlafBeckman-4182 avatar image
0 Votes"
OlafBeckman-4182 answered

I solved this by switching from the Xamarin.Forms Image to SkiaSharp which gives me more control over the bitmaps being displayed.

I first installed the SkiaSharp.Views.Forms Nuget package in my Xamarin.Forms project.

I then removed the <Image> control from the MainPage.xaml and replaced it with a <skia:SKCanvasView>.

 <skia:SKCanvasView x:Name="CatLitterTrayImage"
                    HorizontalOptions="Fill"
                    VerticalOptions="FillAndExpand"
                    PaintSurface="OnCanvasViewPaintSurface" />

In the MainPage.xaml.cs I added a handler for the OnCanvasViewPaintSurface:

 void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
 {
     SKImageInfo info = args.Info;
     SKSurface surface = args.Surface;
     SKCanvas canvas = surface.Canvas;

     canvas.Clear();
     canvas.DrawBitmap(_currentBitmap, info.Rect, BitmapStretch.AspectFit);
 }

and a class member:

 private SKBitmap _currentBitmap = BitmapExtensions.LoadBitmapResource(typeof(MainPage), Constants.CatLitterBoxImage);

and a method which I call to set the Bitmap displayed:

 public void SetImage(string image)
 {
     _currentBitmap = BitmapExtensions.LoadBitmapResource(typeof(MainPage), image);
     CatLitterTrayImage.InvalidateSurface();
 }

The BitmapExtensions can be found here.


5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.