您如何在Windows應用商店App中設計WebView控件？

我有C＃/ XAML win store app從json接收各種數據。它的一部分 - html字符串。您如何在Windows應用商店App中設計WebView控件？

我使用WebView.NavigateToString

顯示字符串但是我不知道怎樣才能樣式。通常我會使用混合來獲得默認樣式，然後編輯它。但Blend不讓我使用WebView。

我結束了包裹JSON HTML到

<body style='background-color:black;color:white' />

但這種做法並不讓我使用主題化該應用程序的其他部分一樣。

什麼是適當的方式來設置和/或格式化WebView的內容？

來源

2012-12-04 Boppity Bop

另一種解決方案是製作WebViewContentHelper（或類似）類。你可以根據這個來傳遞CSS的主題和風格。例如：

string content = WebViewContentHelper.WrapHtml(originalHtmlString, backGroundColor, webView.ActualHeight); 
webView.NavigateToString(content);

您可以修改這個類已經複製從Windows 8的字體造型，讓您水平滾動，還安排在欄目內容，就像ItemDetails模板：

class WebContentHelper 
{ 
    public static string HtmlHeader(double viewportWidth, double height) //adapt parametres 
    { 
     var head = new StringBuilder(); 
     head.Append("<head>"); 

     head.Append("<meta name=\"viewport\" content=\"initial-scale=1, maximum-scale=1, user-scalable=0\"/>"); 
     head.Append("<script type=\"text/javascript\">"+ 
      "document.documentElement.style.msScrollTranslation = 'vertical-to-horizontal';"+ 
      "</script>"); //horizontal scrolling 
     //head.Append("<meta name=\"viewport\" content=\"width=720px\">"); 
     head.Append("<style>"); 
     head.Append("html { -ms-text-size-adjust:150%;}"); 
     head.Append(string.Format("h2{{font-size: 48px}} "+ 
     "body {{background:white;color:black;font-family:'Segoe UI';font-size:18px;margin:0;padding:0;display: block;"+ 
     "height: 100%;"+ 
     "overflow-x: scroll;"+ 
     "position: relative;"+ 
     "width: 100%;"+ 
     "z-index: 0;}}"+ 
     "article{{column-fill: auto;column-gap: 80px;column-width: 500px; column-height:100%; height:630px;"+ 
     "}}"+ 
     "img,p.object,iframe {{ max-width:100%; height:auto }}")); 
     head.Append(string.Format("a {{color:blue}}")); 
     head.Append("</style>"); 

     // head.Append(NotifyScript); 
     head.Append("</head>"); 
     return head.ToString(); 
    } 
    public static string WrapHtml(string htmlSubString, double viewportWidth, double height) 
    { 
     var html = new StringBuilder(); 
     html.Append("<html>"); 
     html.Append(HtmlHeader(viewportWidth,height)); 
     html.Append("<body><article class=\"content\">"); 
     html.Append(htmlSubString); 
     html.Append("</article></body>"); 
     html.Append("</html>"); 
     return html.ToString(); 
    } 
}

來源

2012-12-04 10:16:03 danielrozo

您不能顯式地設計/擴展webview，Webview不是控件子類的派生（它沒有控件模板），而是託管在自己的HWND中。你可能使用webviewbrush更好。請參閱this sample

來源

2012-12-04 01:54:12

我看到webviewbrush但它表示目的是在HTML內容上添加其他控件....可以有效地設計webviewbrush風格嗎？你可以從xaml預期風格的webviewbrush html內容？ –

您如何在Windows應用商店App中設計WebView控件？

回答

相關問題