0
votes

Using Xamarin to open a web view on another page after a button is clicked.

I am attempting to build a cross platform app using Xamarin (updated on 4-03-19). On the mainpage of the app I have several buttons. With one of these buttons I am hoping to use a webview to load a website. I can accomplish if I launch the webview from that mainpage, using one of the buttons. However, on that mainpage I have the navigation set to false, that way I don't see the navigation on that page. This is where the problem occurs. Because the navigation is set to false, there is no way to go back once the web view is called. My solution to this was having my button navigate to a new page. Then I was attempting to trigger a webview once the page loads. But I cannot pull this off.

Mainpage.xaml

NavigationPage.HasNavigationBar="False"

Mainpage.xaml.cs

 public MainPage()
                {
                    InitializeComponent();

                }
        private async void OnButtonClickedwebsite(object sender, EventArgs e)
        {
            await Navigation.PushAsync(new Website());
        }
        //private void OnButtonClickedwebsite(object sender, EventArgs e)
        //{
        //    var browser = new WebView();
        //    browser.Source = "https://google.com";
        //    Content = browser;
        //}

Website.xaml

<?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:local="clr-namespace:test" 
             x:Class="test.Websitemain"
             BackgroundColor="White">
    <ContentPage.Content>

    <StackLayout>

            <WebView x:Name="websitemain" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>
 </StackLayout>
     </ContentPage.Content>

</ContentPage>

Website.xaml.cs

 public partial class Websitemain : ContentPage
    {
        public class Webview : ContentPage
        {

            private void Websitemain(EventArgs e)
            {
                //await Navigation.PushAsync(new Website());
                var browser = new WebView();
                browser.Source = "https://google.com";
                Content = browser;

            }


        }

The button should navigate to the new page then launch my webview. However it just navigates to the new page and never triggers the webview, so it's just a blank screen.

2
You are pushing the page Website, but are showing code for page Websitemain with an inner-class of another Webview ??? - SushiHangover
Below answer will help you, just add internet access permission in AndroidManifest file. <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /> - Narendra Sharma

2 Answers

0
votes
// load the website in your page's constructor
public partial class Websitemain : ContentPage
{
    private void Websitemain()
    {
      var browser = new WebView();
      browser.Source = "https://google.com";
      Content = browser;
    }
}
0
votes

However it just navigates to the new page and never triggers the webview, so it's just a blank screen.

From code of Mainpage.xaml.cs , you navigate to a new page(Website) not the Websitemain page you created.

And from code of Website.xaml.cs , name of contentpage is Websitemain.You need to keep their names consistent.

Modify Mainpage.xaml.cs as follow:

public MainPage()
{
      InitializeComponent();
}

private async void OnButtonClickedwebsite(object sender, EventArgs e)
{
      await Navigation.PushAsync(new Websitemain());
}

and Website.xaml.cs should be changed to Websitemain.xaml.cs .

public partial class Websitemain : ContentPage
{
    public class Webview : ContentPage
    {
       private void Websitemain()
       {
          //await Navigation.PushAsync(new Website());
          var browser = new WebView();
          browser.Source = "https://google.com";
          Content = browser;
       }
     }
}

Then your code will work.