MVVM ExecutePaintSurfaceCommand fires before image loaded.

[jazzzsoftware]

Hi,

I am using SkiaSharp with Xamarin Forms and Prism. Please see here for my previous post with more detail on the setup.

I am using Xam.Plugin.Media to pick a photo from the gallery or take a new one.

I noticed that after selecting/taking a photo that no image was displayed. If I selected another photo the previous was displayed. The shown image in the app was out of sync with the selected one.

I debugged this problem and found that ExecutePaintSurfaceCommand was fired before my image was loaded from the gallery.

I fixed this by making the SKCanvasView a parameter into the ExecutePaintSurfaceCommand, making SKCanvasView a field and then calling _canvasView.InvalidateSurface(); after my image was loaded.

This has a bad smell about it. Is there a better way?

XAML:

                    <skiaSharp:SKCanvasView
                        x:Name="CanvasView"
                        EnableTouchEvents="True">

                        <skiaSharp:SKCanvasView.Behaviors>

                            <prism:EventToCommandBehavior EventName="PaintSurface"
                                                          Command="{Binding PaintSurfaceCommand}"
                                                          EventArgsConverter="{StaticResource PaintSurfaceEventArgsConverter}"
                                                          EventArgsConverterParameter="{x:Reference CanvasView}" />

                        </skiaSharp:SKCanvasView.Behaviors>

                    </skiaSharp:SKCanvasView>

ViewModel:

#region Command BrowsePicturesCommand

        private DelegateCommand _browsePicturesCommand;

        public DelegateCommand BrowsePicturesCommand =>
            _browsePicturesCommand ??= new DelegateCommand(ExecuteBrowsePicturesCommand);

        private async void ExecuteBrowsePicturesCommand()
        {
            if (!CrossMedia.Current.IsPickPhotoSupported)
            {
                DialogService.ShowDialog(nameof(AcceptDialog), new DialogParameters
                {
                    {
                        "Title", "Image Browse Permissions"
                    },
                    {
                        "Message", "Permission has not been granted to browse photos."
                    },
                });
            }
            else
            {
                Photo photo = await DataService.BrowsePicturesAsync();
                if (photo != null)
                {
                    ImagePath = photo.ImagePath;
                    Bitmap = photo.Bitmap;
                    _canvasView.InvalidateSurface();
                }
            }
        }

        #endregion

and

 #region Command PaintSurfaceCommand

        private DelegateCommand<Dictionary<string, object>> _paintSurfaceCommand;

        public DelegateCommand<Dictionary<string, object>> PaintSurfaceCommand => _paintSurfaceCommand ??=
            new DelegateCommand<Dictionary<string, object>>(ExecutePaintSurfaceCommand);

        private void ExecutePaintSurfaceCommand(Dictionary<string, object> eventArgsResult)
        {
            SKPaintSurfaceEventArgs eventArgs = (SKPaintSurfaceEventArgs) eventArgsResult["EventArgs"];
            _canvasView = (SKCanvasView) eventArgsResult["Parameter"];

            if (eventArgs != null && Bitmap != null)
            {
                SKImageInfo imageInfo = eventArgs.Info;
                SKSurface surface = eventArgs.Surface;
                SKCanvas canvas = surface.Canvas;

                canvas.Clear();
                
                SKRect rect = new SKRect(0, 0, imageInfo.Width, imageInfo.Height);
                canvas.DrawBitmap(Bitmap, rect);
            }
            else if (eventArgs != null && Bitmap == null)
            {
                SKImageInfo imageInfo = eventArgs.Info;
                SKSurface surface = eventArgs.Surface;
                SKCanvas canvas = surface.Canvas;

                canvas.Clear();
            }
        }

        #endregion

Thanks

Mark.