问题描述
我有C＃/ XAML win store应用程序，该应用程序从json接收各种数据。
I have C# / XAML win store app which receives various data from json. one piece of it - html string.
我使用WebView显示该字符串。NavigateToString
I display that string using WebView.NavigateToString
但是我不这样做看不到我该如何定型。通常我会使用blend获取默认样式，然后对其进行编辑。但是Blend不允许我设置WebView的样式。
However I don't see how can I style it. Normally I would use blend to get default style and then edit it. But Blend doesn't let me style WebView.
我最终将json html包装到
I ended up wrapping the json html into
<body style='background-color:black;color:white' />
但是这种方法不能让我使用应用程序其余部分所需要的主题。
but this approach doesn't let me use theming which the rest of the application does.
样式和/或格式化WebView内容的正确方法是什么？
What is the 'proper' way to style and / or format content of the WebView?
推荐答案
另一个解决方案是制作WebViewContentHelper（或类似类）。您可以传递主题并根据其样式设置CSS。例如：
Another solution is making a WebViewContentHelper (or so) class. You may pass the theme and style the CSS according to that. For example:
string content = WebViewContentHelper.WrapHtml(originalHtmlString, backGroundColor, webView.ActualHeight);
webView.NavigateToString(content);
您可以改编已经从Windows 8复制字体样式并提供水平滚动的类，就像ItemDetails模板一样，按列排列内容：
You can adapt this class that already copies the Font styling from Windows 8 and gives you horizontal scrolling, also arranges content in columns, just as ItemDetails Template:
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();
}
}
这篇关于您如何在Windows Store App中设置WebView控件的样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！