Skip to content

Image is flickering after ImageSource change #23172

Open

Description

Description

Hello,
I've got a problem with MAUI on Android. I wrote an application to process digital data from an external USB device. I'm creating an ImageSource from a bytes array and binding it to an Image in XAML. New ImageSources are being created very quickly (c.a. 13 per second). Unfortunately, the image is still flickering. At Windows, problems don't occur - the image is displaying almost statically.

My MAUI version:
image

Problem on Android:
https://github.com/dotnet/maui/assets/24682622/0821abd8-17c3-4663-a4cc-6379a8c5c29e

Correctly working on Windows:
Animation

My code:
Page.xaml

<ContentPage.BindingContext>
    <viewModel:UsbTestViewModel />
</ContentPage.BindingContext>

<ScrollView>
    <VerticalStackLayout
        Padding="30,0"
        Spacing="25">
        <Border StrokeThickness="1" Stroke="Blue" HeightRequest="258" WidthRequest="258">
            <Image Source="{Binding ImageSource}" HeightRequest="256" WidthRequest="256" />
        </Border>
    </VerticalStackLayout>
</ScrollView>

UsbTestViewModel.cs

public ImageSource? ImageSource
{
    get => _imageSource;
    set
    {
        _imageSource = value;
        OnPropertyChanged(nameof(ImageSource));
    }
}

//...

// Timer 13 Hz
 private void ImageRenderTimerTick(object? sender, EventArgs e)
 {
     if (RenderTaskManager.RenderedImageSource != null)
     {
         ImageSource = RenderTaskManager.RenderedImageSource;
     }
 }

RenderTaskManager.cs

using SkiaSharp;
//...

 public static ImageSource CreateImageSourceFromByteArray(byte[] bytes)
  {
      var bitmap = new SKBitmap(width, height, SKColorType.Rgba8888, SKAlphaType.Opaque);
 
      ConvertBytesToPixelArray(bytes);
 
      unsafe
      {
          fixed (byte* p = _pixels)
          {
              bitmap.SetPixels((IntPtr)p);
          }
      }
 
      SKData encoded = bitmap.Encode(SKEncodedImageFormat.Png, 100);
      Stream stream = encoded.AsStream();
      return ImageSource.FromStream(() => stream);
  }

Steps to Reproduce

  1. Create IDispatcherTimer with TimeSpan 77 milliseconds.
var myTimer = Application.Current?.Dispatcher.CreateTimer();
myTimer.Interval = TimeSpan.FromMilliseconds(77);
timer.Tick += ImageRenderTimerTick;
  1. Create ImageRenderTimerTick method where you will be creating ImageSource. You can create image from JPG file - problem still occur.

Link to public reproduction project repository

No response

Version with bug

Unknown/Other

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

Minium target Android 5.0 (API lvl 21)

Did you find any workaround?

No response

Relevant log output

No response

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    area-imageImage loading, sources, cachingplatform/android 🤖s/triagedIssue has been revieweds/verifiedVerified / Reproducible Issue ready for Engineering Triaget/bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions