1

Following the answer in the following link " Xamarin WebView scale to fit "

I've managed to fit the html live stream to the phone screen while it is in portrait mode. The result in portrait is acceptable. But when the screen rotates to landscape mode it exceeds the limits of the screen and in order to view the whole stream it requires for the user to scroll. I've found the following topic but it does not seem to work Xamarin webview does not fill screen

What needs to be done in order for the stream to fit without scrolling. I feel that its simply. Do I follow the correct path?

I am using a custom renderer for the WebView

 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.SetSupportZoom(true);

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

            }
            /*
             * The code for the second link
             * 
             * Control.Settings.JavaScriptEnabled = true;
               Control.EvaluateJavascript("document.documentElement.style.height = screen.height + 'px';", null);
               Control.EvaluateJavascript("document.documentElement.style.width = screen.width + 'px';", null);
             */
        }
    }

The xaml code of the page is

   <?xml version="1.0" encoding="utf-8" ?>
<ContentPage 
    NavigationPage.HasNavigationBar="False"
    xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:androidclient="clr-namespace:AndroidClient"
             x:Class="AndroidClient.LiveViewPage">

        <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <Button  x:Name="ExitFullScreenBtn" Clicked="ExitFullScreenBtn_Clicked"
                    HorizontalOptions="End" VerticalOptions="Start" WidthRequest="50"
                    Text="X"></Button>

        <androidclient:CustomWebView x:Name="Browser"  VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" 
                 ></androidclient:CustomWebView>
    </StackLayout>
    

</ContentPage>

The c# for the same page

 [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class LiveViewPage : ContentPage
    {
        public LiveViewPage()
        {
            
            InitializeComponent();

            var url = "http://192.168.1.7:8080/";
            Browser.Source = url;        }

        private void ExitFullScreenBtn_Clicked(object sender, EventArgs e)
        {
            Console.WriteLine("Closed Live");
            Navigation.PopAsync();
        }

    }
Hex
  • 23
  • 3
  • I checked the code you provided with the url of this case link. In portrait mode, it fit the width of the screen and i could scroll to the bottom. On landscape mode, it fit the height of the screen and i also couls scroll to the bottom. Without your `http://192.168.1.7:8080/`, i am not sure what does `it requires for the user to scroll` mean. Do you mean you want to show all the page on the screen on landscape mode without scrolling? – Wendy Zang - MSFT Nov 08 '21 at 07:00
  • Yes I don't want to scroll. I want the whole page to fit on screen. The url is a LAN broadcast from another device. Based on the `custom render's code` it works well on portrait but when I flip the screen to landscape mode It's like the webview is stretched or zoomed, so it does not fit on screen based on it's size. – Hex Nov 10 '21 at 00:04
  • You could change the layout when you rotates to landscape mode. https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/device-orientation?tabs=windows – Wendy Zang - MSFT Nov 16 '21 at 09:11
  • In portrait works well. From portrait to landscape the screen does not fit well. But when I go back from landscape to portrait it works as well as before. Before the corrections in my code it didn't work I portrait either. With the correction (above) it works in portrait but not in landscape – Hex Dec 06 '21 at 11:05

0 Answers0