介绍:
在我们的Windows Phone 7项目中,有可能需要动态生成一些HTML字符串或者从WebService上获取一段HTML字符串,然后将这些HTML字符串在WebBrowser控件上显示,那么一般在这种情况下你可能需要将对应的js文件,css文件以及图片文件保存在应用程序安装包内而非从网络上获取。
解决方案:
为了演示如何做到这一点,我们演示一个来自从webservice上获取的html代码。
<div data-role='fieldcontain'>
<fieldset data-role='controlgroup'>
<legend>Do you agree to this request?</legend>
<input type='checkbox' name='agree-1' id='agree-1' />
<label for='agree-1'>I agree</label>
</fieldset>
</div>
如上图,html需要调用来自jquery Mobile的data-role,在我们这个演示中,将在xap安装包中将包含jqueryMobile的所有js文件以及css文件。
首先要添加这些文件到项目的指定目录中,然后将这些文件的"Build Action"设置为"Content"。接着下一步我们先创建一个构建HTML的方法BuildHTML将拼接来自WebService的html代码。
public string BuildHTML(string htmlFromWS)
{
StringBuilder html = new StringBuilder(@"<!DOCTYPE html>
<html class=""ui-mobile-rendering"">
<head>
<meta charset=""utf-8"" />
<meta name=""viewport"" content=""initial-scale=1.0; maximum-scale=1.0"" />
<link rel=""stylesheet"" type=""text/css"" href=""/html/jquery.mobile.structure-1.0.1.min.css"" />
<link rel=""stylesheet"" type=""text/css"" href=""/html/style.css"" />
<script type=""text/javascript"" src=""/html/jquery-1.7.1.min.js""></script>
<script type=""text/javascript"" src=""/html/jquery.mobile-1.0.1.min.js""></script>
</head>
<body style=""-webkit-user-select: none;"">
<div style=""padding:80px 0 0 0"" data-role=""page"">
<div data-role=""content"">");
html.Append(htmlFromWS);
html.Append("</div></div></body></html>");
return html.ToString();
}
如上图,所有的css文件以及js文件的加载路径都是/html/... 这种形式,这就意味着webbrowser控件将通过相对Uri从独立存储中加载这些文件。但不幸的是我们无法将这些文件就这么直接添加到独立存储中,而只能先添加到解决方案目录里面,所以这里需要创建一个方法来完成这个需求 CopyContentToIsolatedStorage.
public static void CopyContentToIsolatedStorage(string file)
{
// Obtain the virtual store for the application.
IsolatedStorageFile iso = IsolatedStorageFile.GetUserStoreForApplication();
if (iso.FileExists(file))
return;
var fullDirectory = System.IO.Path.GetDirectoryName(file);
if (!iso.DirectoryExists(fullDirectory))
iso.CreateDirectory(fullDirectory);
// Create a stream for the file in the installation folder.
using (Stream input = Application.GetResourceStream(new Uri(file, UriKind.Relative)).Stream)
{
// Create a stream for the new file in isolated storage.
using (IsolatedStorageFileStream output = iso.CreateFile(file))
{
// Initialize the buffer.
byte[] readBuffer = new byte[4096];
int bytesRead = -1;
// Copy the file from the installation folder to isolated storage.
while ((bytesRead = input.Read(readBuffer, 0, readBuffer.Length)) > 0)
{
output.Write(readBuffer, 0, bytesRead);
}
}
}
}
接着在WP7的页面初始化方法中添加以下代码:
CopyContentToIsolatedStorage("html/themes/images/ajax-loader.png");
CopyContentToIsolatedStorage("html/themes/images/icons-18-black.png");
CopyContentToIsolatedStorage("html/themes/images/icons-18-white.png");
CopyContentToIsolatedStorage("html/themes/images/icons-36-black.png");
CopyContentToIsolatedStorage("html/themes/images/icons-36-white.png");
CopyContentToIsolatedStorage("html/jquery-1.7.1.min.js");
CopyContentToIsolatedStorage("html/jquery.mobile-1.0.1.min.js");
CopyContentToIsolatedStorage("html/style.css");
CopyContentToIsolatedStorage("html/jquery.mobile.structure-1.0.1.min.css");
然后,我们只需要拼接好HTML字符串然后发送到WebBrowser控件就行了,但是,请小心,为了强制WebBrowser控件加载html代码以及所有对应的文件,你必须将html代码也以文件的方式存储到独立存储中,而且还必须存储到与css/js文件相同的根目录中。
string htmlFromWS = ...;
// Concat our html
string html = BuildHTML(htmlFromWS);
var bytes = Encoding.UTF8.GetBytes(html);
// Get the iso store
IsolatedStorageFile iso = IsolatedStorageFile.GetUserStoreForApplication();
// Write the html in the html/index.html
using (IsolatedStorageFileStream output = iso.CreateFile("html/index.html"))
{
output.Write(bytes, 0, bytes.Length);
}
// navigate to the html/index.html
wb.Navigate(new Uri("html/index.html", UriKind.Relative));
终于,现在WebBrowser控件将从独立存储中加载css/js文件以及你的html代码!