您如何在 Windows 应用商店应用中设置 WebView 控件的样式? [英] How do you style WebView control in Windows Store App?
问题描述
我有从 json 接收各种数据的 C#/XAML win store 应用程序.一部分 - html 字符串.
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 不允许我设置 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 应用商店应用中设置 WebView 控件的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
