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