CODEWITHSUNDEEP
xamarinxamarin.forms
jbassking10
jbassking10

Reputation: 803

Xamarin WebView scale to fit

Is there a way to set a WebView in Xamarin to scale its content to fit the screen by default and still allow for pinch zooming in/out?

We're going to use this to display documents we have online.

Upvotes: 6

Views: 11515

Answers (2)

rsssssonsss
rsssssonsss

Reputation: 423

I solved the scale fit to page and zooming by Custom Renderers, as given below

For IOS

 public class CustomWebViewRenderer : WebViewRenderer
{
    protected override void OnElementChanged(VisualElementChangedEventArgs e)
    {
        base.OnElementChanged(e);

        var view = Element as CustomWebView;
        if (view == null || NativeView == null)
        {
            return;
        }
        this.ScalesPageToFit = true;
    }

}

For Android

public class CustomWebViewRenderer : WebViewRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
    {
        base.OnElementChanged(e);

        if (Control != null)
        {
            Control.Settings.BuiltInZoomControls = true;
            Control.Settings.DisplayZoomControls = false;

            Control.Settings.LoadWithOverviewMode = true;
            Control.Settings.UseWideViewPort = true;
        }
    }
}

Upvotes: 9

xerotolerant
xerotolerant

Reputation: 2079

If you're using Xamarin.Forms that would look something like this

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="WebViewDemo.LoadingDemo" Title="Loading Demo">
    <ContentPage.Content>
    <StackLayout>
      <WebView x:Name="Browser"
      VerticalOptions = LayoutOptions.FillAndExpand ,
      HorizontalOptions = LayoutOptions.FillAndExpand,
    </StackLayout>
    </ContentPage.Content>
</ContentPage>

This should fill the page and not affect pinch and zoom.

Upvotes: -1

Related Questions