Write HTML Code In Xamarin Cross Platform With Table Example

Step 1

Go to Visual Studio.

Click File -> New -> Project.

Click C# -> Cross Platform -> Cross Platform App (Xamarin.Forms.Portable).

Enter the Application Name, followed by clicking OK.

 

Step 2

In this step, go to Solution Explorer -> Portable Class Library, followed by clicking XAML, insert the code given below XAML page and save it.

 

Step 3

Open App.Xaml.cs and set the page name.

  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.              x:Class="TableExample.Page1">  
  5. </ContentPage>  

Step 4

Open Page1.Xaml.cs and add the code in this page. 

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5. using System.Threading.Tasks;  
  6.   
  7. using Xamarin.Forms;  
  8.   
  9. namespace TableExample  
  10. {  
  11.     public partial class Page1 : ContentPage  
  12.     {  
  13.         public Page1()  
  14.         {  
  15.             InitializeComponent();  
  16.             var browser = new WebView();  
  17.             var htmlSource = new HtmlWebViewSource();  
  18.             StringBuilder htmlStr = new StringBuilder("");  
  19.             htmlStr.Append("<html><body><table>");  
  20.             htmlStr.Append("<table width='100%' height='20%' Border='1px solid black'>");  
  21.   
  22.             htmlStr.Append("<tr>");  
  23.             htmlStr.Append("<th> FirstName </th>");  
  24.             htmlStr.Append("<th>LastName </th></tr>");  
  25.   
  26.             htmlStr.Append("<tr>");  
  27.             htmlStr.Append("<td>Disha </td>");  
  28.             htmlStr.Append("<td>Raval</td></tr>");  
  29.   
  30.             htmlStr.Append("<tr>");  
  31.             htmlStr.Append("<td>Namrata</td>");  
  32.             htmlStr.Append("<td>Rathod</td></tr>");  
  33.   
  34.             htmlStr.Append("<tr>");  
  35.             htmlStr.Append("<td>Monika</td>");  
  36.             htmlStr.Append("<td>Vaghasiya</td></tr>");  
  37.   
  38.             htmlStr.Append("</table></body></html>");  
  39.             htmlSource.Html = htmlStr.ToString();  
  40.             browser.Source = htmlSource;  
  41.             Content = browser;  
  42.         }  
  43.     }  
  44. }   

Step 5

Click Build menu and go to Configuration Manager

Configure your Android, Windows, iOS Depoly & Build Setting, followed by clicking Close. 

Step 6.

In this step, select Build & Depoly option, followed by clicking to Start your Application.

Now, go to Run option, choose Debug from the list of an Android or an iOS or UWP Simulators, which are available. You can choose any one Simulator and run it.

Step 7

Output

After few seconds, the app will start running on your Android Simulator. You will see your app is working successfully.


Similar Articles