Use HTML and CSS File in Windows Phone Apps

In this article you will learn how to use a HTML and CSS file in Windows Phone Apps.

First create a project in Visual Studio.

Go to File => New => Project and select Blank App (Windows Phone).

blank app

Then make a HTML file and CSS file. Then write the code that you want to display in the Windows Phone App.

The following is the HTML page code:

  1. <html>  
  2.     <link href="design.css" rel="stylesheet" type="text/css" />  
  3.     <body>  
  4.         <p class="first">This is demo for HTML page in Windows Phone App</p>  
  5.         <p class="second">My Name is : NeErAj KuMaR</p>  
  6.         <p class="third">My Image :  
  7.             <img src="neeraj.jpg" class="img" />  
  8.         </p>  
  9.         <p class="fourth">  
  10.             <a href="http://www.twitter.com/sainipray" >Follow On Twitter </a>  
  11.         </p>  
  12.         <p>  
  13.             <a href="https://plus.google.com/u/0/+NeErAjKuMaR1234" >See my Profile on Google+ </a>  
  14.         </p>  
  15.     </body>  
  16. <html>  
The following is the CSS file code:
  1. .first {  
  2.   background-color: Black;  
  3.   font-size20px;  
  4.   color: White;  
  5. }  
  6.   
  7. .second {  
  8.   background-color: White;  
  9.   font-size30px;  
  10.   color: Black;  
  11. }  
  12.   
  13. .third {  
  14.   background-color: GREEN;  
  15.   font-size20px;  
  16.   color: Yellow;  
  17. }  
  18.   
  19. .fourth {  
  20.   background-color: Gray;  
  21.   font-size30px;  
  22.   color: RED;  
  23. }  
  24.   
  25. .img {  
  26.   width100px;  
  27.   height100px;  
  28. }  
The following is the HTML page design in a browser:

HTML page design

Create a folder in the Asset folder in Solution Explorer and copy the HTML and CSS files and one image to the new folder.

HTML

Then open the MainPage.xaml file and drag a ”WebView” element from the Toolbox to the Windwos Phone App GUI.

The following is the MainPage.xaml file code:
  1. <Page  
  2.     x:Class="HTMLAPP.MainPage"  
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  5.     xmlns:local="using:HTMLAPP"  
  6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
  7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
  8.     mc:Ignorable="d"  
  9.     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
  10.     <Grid>  
  11.         <WebView HorizontalAlignment="Left" Height="620" Margin="10,10,0,0"             VerticalAlignment="Top" Width="380"/>  
  12.     </Grid>  
  13. </Page>  
Create a Loaded Event on “WebView” as in the following:

properties

Add code to the WebView event:
  1. private void WebView_Loaded(object sender, RoutedEventArgs e)  
  2. {  
  3.    Web.Source = new Uri("ms-appx-web:///assets/HTML/demo.html"); ;  
  4. }   
Debug this project and the output is:

output