This article will explain how to embed HTML content and
show in WebBrowser control in Silverlight Windows Phone 7.
Getting Started
Creating a Windows Phone Application:
ï‚· Open Visual Studio 2010.
ï‚· Go to File => New => Project
ï‚· Select Silverlight for Windows Phone from the
Installed templates and choose Windows Phone Application
ï‚· Enter the Name and choose the location.
Click OK
First of all add a new .htm file in application and put
some text in body tag like this:
<html>
<head>
<title>This page shows how to embed HTML Content in WP7</title>
</head>
<body>
<h1>Welcome!</h1>
<br />
<h1>This is test
HTML file</h1>
<h1>To see the
all articles by Raj Kumar on C-SharpCorner.com</h1>
<h1>Click here
"<a
href="http://www.c-sharpcorner.com/Authors/raj1979/raj-kumar.aspx">Raj
Kumar's
World</a>"</h1>
</body>
</html>
Now
drag and drop a WebBrowser control on page and a button and put this code on
button click event.
MainPage.xaml
<Grid x:Name="LayoutRoot"
Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application
and page title-->
<StackPanel x:Name="TitlePanel"
Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource
PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle"
Text="Embed HTML" Margin="9,-7,0,0" Style="{StaticResource
PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<phone:WebBrowser HorizontalAlignment="Left" Margin="10,73,0,0" Name="webBrowser1" VerticalAlignment="Top" Width="440" Height="528"
/>
<Button Content="Load
HTML" Height="72"
HorizontalAlignment="Left" Margin="-4,10,0,0" x:Name="btnLoadHTML" VerticalAlignment="Top" Width="200" FontSize="18.667" FontFamily="Andy" Click="btnLoadHTML_Click" >
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FFE44040" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
</Button>
</Grid>
</Grid>
MainPage.xaml.cs
Here
are the namespace you have to add first:
using System.IO.IsolatedStorage;
using System.Windows.Resources;
using System.IO;
First I
am storing html file in Isolated Storage.
What is Isolated Storage?
Isolated
Storage is like cookies which provide the ability to store data on client between
application invocations but unlike cookies Isolated Storage is full-fledged
virtual file system, it provides the application ability to Create, Read,
Write, Delete and enumerate files and directories inside the virtual file
system.
private void
SaveHTMLFile()
{
string fileName = "TextFile1.htm";
IsolatedStorageFile isolatedStorageFile = IsolatedStorageFile.GetUserStoreForApplication();
if (isolatedStorageFile.FileExists(fileName) == true)
{
isolatedStorageFile.DeleteFile(fileName);
}
StreamResourceInfo streamResourceInfo = Application.GetResourceStream(new Uri(fileName, UriKind.Relative));
using (BinaryReader
binaryReader = new BinaryReader(streamResourceInfo.Stream))
{
byte[] data = binaryReader.ReadBytes((int)streamResourceInfo.Stream.Length);
using (BinaryWriter
bw = new BinaryWriter(isolatedStorageFile.CreateFile(fileName)))
{
bw.Write(data);
bw.Close();
}
}
}
private void
btnLoadHTML_Click(object sender,
System.Windows.RoutedEventArgs e)
{
// TODO: Add
event handler implementation here.
SaveHTMLFile();
webBrowser1.Navigate(new Uri("TextFile1.htm",
UriKind.Relative));
}
Now
time to run the application to see the result on button click.
Image
1.
We are
done here. Question or comments are most welcome. Drop me a comment in
c-sharpcorner comments section.