How to stop flicker when change Image.Source to use a new image with the same size as the old one? RRS feed

  • Question

  • User89714 posted

    Within my app, I have an Image that I associate a GestureRecognizer with. When tapped, I change the Source of the Image to address a different image (in effect, I am toggling between two images each time the Image is tapped). The two images (read from .png files) have the same dimensions.

    So, the question is - why, on Windows, does toggling the Image.Source result in flicker, of the control to the right of the Image? It is as if toggling Image.Source has a hidden intermediate step, appearing to remove the old Image.Source, redraw without it, then set the new Image Source and redraw again. That intermediate redraw is unexpected. I assume this is a bug, but before I log it, has anybody found a workaround for this (other than using absolute layout to position the controls to the right of the image)?

    Many thanks,

    John H.

    Tuesday, December 22, 2015 5:05 PM

All replies

  • User76916 posted

    @JohnHardman - I don't notice any flicker in Android or WP 8.1SL on image toggling via a GestureRecognizer. But I am going to assume you are using WinRT? Plus my images are really small (up/down arrow) so not sure if a larger image makes the problem visible.

    I would say file another bug. I am following a few of your bugs now, submitted a few of my own last week as well. I am thinking there should be a feed so I can just follow you on Bugzilla :)

    Wednesday, December 23, 2015 3:21 AM
  • User89714 posted

    @AdamP - My images are typically 44x44, so pretty small. It does just seem to be Windows desktop and WinPhone 8.1 (WinPhone tested in simulator as hitting a known issue about deploying to physical device right now - haven't tried the workaround yet). I don't see the same on Android or iOS.

    I've raised it as a bug at https://bugzilla.xamarin.com/show_bug.cgi?id=37237

    Yeah, it sounds bad but I've also thought a feed from Bugzilla would be handy :-)

    Wednesday, December 23, 2015 10:08 AM
  • User56819 posted

    Set the default height and width on your Image control. This will eliminate the flicker. I used this approach to build my own custom CheckBox control. HeightRequest="16" WidthRequest="16" where my image sizes were 16x16.

    Friday, October 7, 2016 6:20 AM
  • User266478 posted


    Wouldn't this solution force me to account, in code, for the various screen sizes and, consequently, for the various image sizes? I have tried with the FadeIn-FadeOut method and I keep on getting blinks. Apparently I have to go with putting an image above another. Do any of you guys know if the Xamarin Dev team is looking for a way to solve this? Do any of you guys know of another solution for this problem? Appreciate it.

    Wednesday, January 25, 2017 9:16 PM
  • User2773 posted


    It's because this: - https://github.com/xamarin/Xamarin.Forms/blob/74cb5c4a97dcb123eb471f6b1dffa1267d0305aa/Xamarin.Forms.Platform.Android/Renderers/ImageRenderer.cs#L85 - https://github.com/xamarin/Xamarin.Forms/blob/74cb5c4a97dcb123eb471f6b1dffa1267d0305aa/Xamarin.Forms.Platform.iOS/Renderers/ImageRenderer.cs#L104

    You can use CachedImage which doesn't set image view to null before loading it.

    Thursday, January 26, 2017 4:31 PM
  • User323063 posted

    @DanielL can't we just get rid of them? Isn't this considered as a bug?

    Tuesday, April 24, 2018 4:16 AM