Use HTML and CSS File in Windows Phone Apps

Neeraj Kumar
9y
10.1k
0
0
100
Article

First create a project in Visual Studio.

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

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:

<html>
<link href="design.css" rel="stylesheet" type="text/css" />
<body>
This is demo for HTML page in Windows Phone App
My Name is : NeErAj KuMaR
My Image :
<img src="neeraj.jpg" class="img" />
<a href="http://www.twitter.com/sainipray" >Follow On Twitter </a>
<a href="https://plus.google.com/u/0/+NeErAjKuMaR1234" >See my Profile on Google+ </a>
</body>
<html>

The following is the CSS file code:

.first {
background-color: Black;
font-size: 20px;
color: White;
}
.second {
background-color: White;
font-size: 30px;
color: Black;
}
.third {
background-color: GREEN;
font-size: 20px;
color: Yellow;
}
.fourth {
background-color: Gray;
font-size: 30px;
color: RED;
}
.img {
width: 100px;
height: 100px;
}

The following is the HTML page design in a browser:

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:

<Page
x:Class="HTMLAPP.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:HTMLAPP"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<WebView HorizontalAlignment="Left" Height="620" Margin="10,10,0,0" VerticalAlignment="Top" Width="380"/>
</Grid>
</Page>