Button-Worked WebView In Xamarin.Forms Application

Introduction
 
This article demonstrates Button-worked WebView In Xamarin.Forms applications. Xamarin is a platform that allows us to create a multi-platform mobile application for platforms, like Windows, iOS, and Android through a single integrated development environment (IDE). 
 
 
 
Let's start.
 
Step 1 
 
Open Visual Studio and go to New Project >> Installed >> Visual C# >> Cross-Platform.
 
Select Cross-Platform app, then give your project a name and location.
 
 
 
Step 2 
 
Open Solution Explorer >> Project Name (Portable) >> MainPage.xaml. Double click on the left pane and open the design view of this page.
 
 
 
The code is given below.
 
 
 
XAML Code 
 
We are creating a button inside the StackLayout and WebView as well as Scroll View inside the StackLayout.
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              xmlns:local="clr-namespace:WebView"  
  5.              x:Class="WebView.MainPage">  
  6.     <ContentPage.Content>  
  7.         <StackLayout>  
  8.             <Button Text="Click" Clicked="Button_Clicked"/>  
  9.             <StackLayout>  
  10.         <ScrollView>  
  11.             <WebView x:Name="Browser" VerticalOptions="FillAndExpand" HeightRequest="500"/>  
  12.         </ScrollView>  
  13.             </StackLayout>  
  14.         </StackLayout>  
  15.     </ContentPage.Content>  
  16. </ContentPage>   
Step 3 
 
Open Solution Explorer >> Project Name (Portable) >> MainPage.xaml.cs. Double click to open the design view of this page.
 
 
 
The code is given below. 
 
 
Button-worked WebView is created using this code. Give your own link in the code.
 
 
 
C# Code 
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5. using System.Threading.Tasks;  
  6. using Xamarin.Forms;  
  7.   
  8. namespace WebView  
  9. {  
  10.     public partial class MainPage : ContentPage  
  11.     {  
  12.         public MainPage()  
  13.         {  
  14.             InitializeComponent();  
  15.         }  
  16.   
  17.         private void Button_Clicked(object sender, EventArgs e)  
  18.         {  
  19.             var Url = "https://www.c-sharpcorner.com/members/ajith-kumar51";  
  20.             Browser.Source = Url;  
  21.         }  
  22.     }  
  23. }  
Step 4 
 
Next, select the "Build & deploy" option, followed by selecting from the list of Android Emulator or Simulator. You can choose any API (Application Program Interface) level emulator or simulator to run it.
 
Output 
 
After a few seconds, you will see your app working.
 
Click the "Click" button. The WebView is displayed.
 
 
 
 Finally, we have successfully created a Xamarin.Forms Button-worked WebView.

X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now