Xamarin Forms - WebView Html Source issue

Question

I'm coming today because I'm stuck on the load of a GIF with the android platform. I know it works because it works for UWP and iOS, however android doesn't work..

I have this object:

public class Gif : WebView
{
    public string GifSource
    {
        set
        {
            var html = new HtmlWebViewSource();
            html.Html = String.Format(@"<html><body style='background: #FF0000;'><img src='{0}' style='width:100%;height:100%;'/></body></html>", "https://media.giphy.com/media/UGifMFmx0gERG/giphy.gif");
            Debug.WriteLine("Html.Source = '{0}'", html.Html);
            this.Margin = -10;
            this.Source = html;
        }
        get { return (string)GetValue(SourceProperty); }
    }
}

So I just declare this Gif in my xaml side:

<AbsoluteLayout AbsoluteLayout.LayoutBounds="0.5, 0.5, 1, 1" AbsoluteLayout.LayoutFlags="All">
            <control:Gif
                AbsoluteLayout.LayoutBounds="0.5, 0, 1, 0.9"
                AbsoluteLayout.LayoutFlags="All"
                BackgroundColor="Red"
                GifSource="Gifs/LoginBackground.gif" />
            <BoxView
                AbsoluteLayout.LayoutBounds="0.5, 0.5, 1, 1"
                AbsoluteLayout.LayoutFlags="All"
                BackgroundColor="Transparent" />
</AbsoluteLayout>

PS: I declare a BoxView to escape the possibilty of moving the webview by a user gesture.

Now the thing is, it works on UWP perfectly, with the both code :

html.Html = String.Format(@"<html><body style='background: #FF0000;'><img src='{0}' style='width:100%;height:100%;'/></body></html>", "https://media.giphy.com/media/UGifMFmx0gERG/giphy.gif");
this.Source = html;

or

this.Source = "https://media.giphy.com/media/UGifMFmx0gERG/giphy.gif";

On Android, the this.Source = "https://media.giphy.com/media/UGifMFmx0gERG/giphy.gif"; works, however the first solution doesn't work, which is a problem. By create my own html it allows me to make the gif fill my view unlike the link... On more point, if I delete the style='width:100%;height:100%;' of the html, it works, but one more time, not with the good size..

Any idea? Thank in advance !

Emixam23 Emixam23 · Accepted Answer · 2017-01-30T18:22:51

:)

I found a solution, it's weird but I have this code:

html.Html = String.Format(@"<html><body style='background: #000000;'><img src='{0}' style='width:{1};height:{2};'/></body></html>",
 DependencyService.Get<IBaseUrl>().Get() + value, App.ScreenSize.Width, (App.ScreenSize.Height / 100) * 90);

The first thing weird is that, 100% value works but only if I give it to the WebView. I mean by that, if I put 100% as html text it doesn't work, unlike when I give a real value. Maybe the WebView cannot access the property ..

Now how do I get the size of the screen?

Android:

App.ScreenSize = new Xamarin.Forms.Size((int)(Resources.DisplayMetrics.WidthPixels / Resources.DisplayMetrics.Density), (int)(Resources.DisplayMetrics.HeightPixels / Resources.DisplayMetrics.Density));

Include it in your MainActivity.cs of your Android project

UWP:

App.ScreenSize = new Size(Window.Current.Bounds.Width, Window.Current.Bounds.Height);

Include it in your MainPage.xaml.cs of your UWP project

In your App.cs of the PCL part, declare a public static Size ScreenSize;

Enjoy !

Xamarin Forms - WebView Html Source issue

1 Answers

Android:

UWP: