How to determine image rendering finished after a source set?


  • Hello,

    is there any direct or indirect way to find out when the rendering of an image is finished after a new source set of that image?

    What I tried so far without success:

    1) SizeChanged event
    2) Reading RenderSize property

    In my example I have two images of identical size defined in XAML. I use a storyboard to animate imageA to the position of empty imageB. When the storyboard completed (A above B) I copy the image source of A to B. Clear image source of A and stop the storyboard.
    Unfortunately, rendering of imageB isn't always finished before clear of imageA and that causes a flicker of the picture. To avoid the flicker, I need to determine the end of imageB rendering, but nothing worked so far.

    Many thanks for your help!   

    void MyClass::Storyboard_AtoB_Completed(Platform::Object^ sender, Platform::Object^ e)
         xamlImageB->Source = xamlImageA->Source;
         xamlImageA->Source = ref new BitmapImage();    

    Monday, April 30, 2012 10:10 AM

All replies

  • I think you don't need to set the Image source again and again. I suggest that you can set the source once, update the source content and call Invalidate when it's finished. Just as following:

                bitmap = new WriteableBitmap(100, 100);
                pixels = new byte[4 * 100*100];
                pixelStream = bitmap.PixelBuffer.AsStream();

                image.Source = bitmap;

                //update the data of pixles

                pixelStream.Seek(0, SeekOrigin.Begin);
                pixelStream.Write(pixels, 0, pixels.Length);

    Best Regards,

    Han Xia

    Tuesday, May 1, 2012 3:06 AM
  • Thank you for answering Han Xia,

    but I really need to know how it is possible to determine that an image render process is finished. Beside the above example of an Image source set it is also an open question to me, how I do find out when the last rendering of an Image animation is completed? I think the animation Completed event doesn't guarantee that the last rendering of the animated Image finished. And I need this information in my code behind.

    Best regards.

    Tuesday, May 1, 2012 9:30 AM
  • I think Image.ImageOpened is going to be the best info you will get. Image loading is inherently asynchronous, you may need to set some kind of sentinel in your app code to make sure that the object animation and the Opened event you are handling are really referring to the same image.
    Wednesday, September 19, 2012 1:04 AM
  • Or another idea is just to rethink your whole design, instead of animating the images changing as hard transitions, animate them cross fading into each other with Opacity and the same Grid or Canvas layout positions. That's obviously going to change the aesthetics, but honestly that's the way I'd do it, it's going to be easier on the eye for a variety of reasons even beyond avoiding flicker.
    Wednesday, September 19, 2012 1:09 AM