CODEWITHSUNDEEP
androidxamarinwebviewxamarin.android
Abanoub
Abanoub

Reputation: 3809

Xamarin Forms - Webview is not showing up within my StackLayout

why isn't the WebView showing ? I have tried FillAndExpand and CenterAndExpand , but it still not working!

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:views="clr-namespace:MyApp.Views;assembly=MyApp"
             x:Class="MyApp.Pages.Main">
  <StackLayout>
    <StackLayout Orientation="Horizontal" VerticalOptions="Start">
      <!-- top controls -->
    </StackLayout>

    <StackLayout x:Name="WebViewLayout" VerticalOptions="CenterAndExpand">
      <WebView Source="https://www.google.com/" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand"/>
    </StackLayout>

    <StackLayout Orientation="Horizontal" VerticalOptions="End">
      <views:AdMobView WidthRequest="400" HeightRequest="50" />
    </StackLayout>
  </StackLayout>


</ContentPage>

Upvotes: 2

Views: 5452

Answers (3)

logictechy
logictechy

Reputation: 131

Change the Vertical Options of the StackLayout (which holds the WebView) from CenterAndExpand to FillAndExpand and the WebView itself.

I hope this helps. :)

<StackLayout x:Name="WebViewLayout" VerticalOptions="FillAndExpand">
     <WebView Source="https://www.google.com/" VerticalOptions = "FillAndExpand"/>
</StackLayout>

Upvotes: 4

Victor Chelaru
Victor Chelaru

Reputation: 4847

I can't say exactly why but setting the VerticalOptions on the stack layout seemed to solve it for me. The following results in the web view being drawn:

var webView = new WebView();
webView.Source = "https://www.xamarin.com";
webView.MinimumWidthRequest = 200;
webView.MinimumHeightRequest = 200;
webView.HorizontalOptions = LayoutOptions.FillAndExpand;
webView.VerticalOptions = LayoutOptions.FillAndExpand;

var stackLayout = new StackLayout;
this.Content = stackLayout;
stackLayout.Children.Add(webView);
stackLayout.HorizontalOptions = LayoutOptions.FillAndExpand;
stackLayout.VerticalOptions = LayoutOptions.FillAndExpand;

I admit the layout behavior for StackLayout is pretty confusing.

Upvotes: 1

hvaughan3
hvaughan3

Reputation: 11105

I would suggest taking the WebView out of the parent StackLayout and the change the outer most StackLayout to a Grid.

That being said, I think that might help solve the issue without doing that:

public override void OnAppearing()  {
    SizeChanged += (sender, e) => {
        WebViewItem.WidthRequest = Width;
        WebViewItem.HeightRequest = 200; //Or what ever
    }

    OnSizeChanged(null, null); //Make it run at least once
}

Upvotes: 1

Related Questions