Update layout after image change

Hi

I have extended the Image class and wrote a custom renderer for it. All it does is to create an empty image and then download on the background some other stuff. When it's ready, the image gets updated with the result.

It works just fine but the layout of the Image is completely off when loading the new one.

For instance, if I play the image on a grid, at the beginning the height of the grid cell with the image may be 50 pixels (the image is empty so whatever value the grid assigns to it). Then my background job kicks in, downloads a new image and updates the content of it. But the layout doesn't get update, so although maybe I updated it with a 300 height image, the grid cell is stuck at 50 and the image is shrink to that space.

Is there a way to force the Image to recalculate the value? I've tried everything: forcelayout, invalidate, etc... it will always measure those 50 pixels.

this is my imagerenderer code:

protected async override void OnElementChanged(ElementChangedEventArgs<Image> e)
        {
            base.OnElementChanged(e);

            var targetImageView = this.Control;
             await GetImageFromWeb(targetImageView, cachedImage.ImageUrl);

        }

        /// <summary>
        /// Gets the image from web.
        /// </summary>
        /// <param name="url">The URL.</param>
        /// <returns>Bitmap.</returns>
        private async Task GetImageFromWeb(Android.Widget.ImageView target, string url)
        {
            try {

// go get a new image on the background
                var path=await DownloadHelper.GetOrDownloadImageMaxSize(url, (float)App.ScreenSize.Width, (float)App.ScreenSize.Height);
                var handler = new FileImageSourceHandler();
                var image = await handler.LoadImageAsync(ImageSource.FromFile(path), this.Context);
                target.SetImageBitmap(image);
                this.ForceLayout();
                this.PostInvalidate();
                this.Invalidate();
            } catch (Exception e)
            {
                Console.WriteLine("exception:" + e);
            }

        }

Posts

  • JoaquinGrechJoaquinGrech ESMember ✭✭

    ok, maybe my question is not clear. To simplify it to the maximum possible. The question is, why this will not make the component recalculate the image layout:

                   string path=await getImagePathMethod();
                    var handler = new FileImageSourceHandler();
                    var image = await handler.LoadImageAsync(ImageSource.FromFile(path), this.Context);
                    this.Control.SetImageBitmap(image);
    

    but this will do it:

    string path=await getImagePathMethod();
    e.NewElement.Source = path;
    

    and is there a way to make it on the first method instead of the second? Because although the second method works, it will create a whole new ImageSource class while the first one doesn't because it draws the image bitmap directly.

Sign In or Register to comment.