Resize WebView defined in Xamarin.Forms Core libra

问题:

I have web page defined in the core library as view to fill whole screen:

Content = new WebView
{
    VerticalOptions = LayoutOptions.FillAndExpand,
    HorizontalOptions = LayoutOptions.FillAndExpand,
    Source = "https://google.com",
};

Unfortunately on screen rotate it's not resized (please see below):

How can I make sure that screen is resized on screen rotation.

回答1:

Please try this solution, it works in iOS 8.4, but not iOS 7. Xamarin Forms: How to resize the Webview after rotation in iOS

回答2:

If it's iOS, then make a custom WebView renderer (http://developer.xamarin.com/guides/cross-platform/xamarin-forms/custom-renderer/):

protected override void OnElementChanged (VisualElementChangedEventArgs e)
{
    base.OnElementChanged(e);

    AutoresizingMask = UIViewAutoresizing.FlexibleDimensions;
    ScalesPageToFit = true;
}

public override void LayoutSubviews()
{
    base.LayoutSubviews();

    NativeView.Bounds = UIKit.UIScreen.MainScreen.Bounds;
}

回答3:

You need to be working with webview using Xamarin.forms.

Working with WebView in Xamarin.Forms

xamarin-forms-samples/WorkingWithWebview Has examples for each platform.

This link on Handling Rotation gives you all the details you need for android. The other answer has covered iOS.

Responding To Orientation Changes In Xamarin Forms another great link

Customizing Controls for Each Platform using these premise you can manage the screen rotation for each platform separately within the one app.

Handling Runtime Changes shows how to manage screen rotation. You need to scroll down the page.

A good link on managing windows phone, The two ways to handle orientation in your Windows 8.1 app.

Another useful link Fix IE 10 on Windows Phone 8 Viewport.

This is an interesting link on Managing screen orientation from mozilla. It is experimental, but interesting.

回答4:

I implemented the custom renderer and added the line "webView.AutoresizingMask = UIViewAutoresizing.FlexibleDimensions;" but it doesn't work for me. Then, I solved this with a not so elegant solution (reloading the WebView component when the device orientation changes).

In my xaml:

  <StackLayout Padding="0" >
      <WebView x:Name="viewJupyter" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" />
  </StackLayout>

And my code behind class:

public partial class ServiceChart : ContentPage
{
    private int _rotateView;
    public ServiceChart(string title, string url)
    {
        Title = title;
        InitializeComponent();

        var urlPage = new UrlWebViewSource
        {
            Url = url
        };
        viewJupyter.Source = urlPage;

        if (Device.OS == TargetPlatform.iOS)
        {
            SizeChanged += (sender, arg) =>
            {
                if (_rotateView != 0)
                { 
                    var lalala = viewJupyter;
                    InitializeComponent();
                    viewJupyter.Source = (lalala.Source as UrlWebViewSource).Url;
                }
                _rotateView++;
            };
        }
    }
}