3

I am trying to update the image by drawing circles every time mouse pointer is moved. The pixelBuffer is stored in map object and updated with CircleFilledWithGradientMethod(). I load the pixel buffer in to WriteableBitmap Bitmap and then try to display it by setting image source of an image element in my XAML UI to Bitmap. What happens, is that when I first move my mouse, I see the very first 2 circles drawn but then as I move the mouse, the image does not get updated. Why could that be? Is there a method I should call on Image to force it to redraw? The reason I use stream.WriteAsync two times, when I could have just used it one, is just to show that it is working properly.

  private async void TextArea_PointerMoved(object sender, PointerRoutedEventArgs e)
            {
                Pixel pixel1 = new Pixel(255, 0, 0);
                Pixel pixel2 = new Pixel(255, 255, 255);

                map.CircleFilledWithGradient((int) pointer.Position.X, (int)pointer.Position.Y, 100, pixel1, pixel2);

                using (Stream stream = Bitmap.PixelBuffer.AsStream())
                {
                    stream.WriteAsync(map.pixelData, 0, map.pixelData.Length);
                }
                map.CircleFilledWithGradient((int)pointer.Position.X+100, (int)pointer.Position.Y, 100, pixel1, pixel2);

                using (Stream stream = Bitmap.PixelBuffer.AsStream())
                {
                    stream.WriteAsync(map.pixelData, 0, map.pixelData.Length);
                }
                this.Image.Source = Bitmap;
            }

What I think is happening, is that as soon as I draw the image on the screen, it caches it, and then keeps using the old image. Or is it that the standard Image element does not support redrawing?

Update: My Bitmap was a private class variable. If I do 

WriteableBitmap Bitmap = new WriteableBitmap((int)this.ActualWidth, (int)this.Grid.RowDefinitions[1].ActualHeight);

It all starts to work, but isn't that memory inefficient? Aren't I allocating memory for each new WriteableBitmap each time I move my mouse. And as I have found out, the issue is definitely with with Image component. Why wouldn't it update when I just make changes to it's source, but updates when I change its source to a different object. `

Uwe Keim
  • 39,551
  • 56
  • 175
  • 291
Ilya Lapan
  • 1,103
  • 2
  • 12
  • 31

1 Answers1

1

Is there a method I should call on Image to force it to redraw?

Close. There's a method on WriteableBitmap.

Call WriteableBitmap.Invalidate after you update it to request the refresh.

Assuming the Bitmap was already set as Image.Source, replace the line:

 this.Image.Source = Bitmap;

With:

 Bitmap.Invalidate();

Why wouldn't it update when I just make changes to its source, but updates when I change its source to a different object.

Setting the Image.Source to the same thing it's already set to is a noop. Most complex Properties ignore "changes" which don't change the existing value. Creating a new WriteableBitmap each time works (very inefficiently) because it's different.

Rob Caplan - MSFT
  • 21,714
  • 3
  • 32
  • 54