1

我有 C# / XAML win store 应用程序，它从 json 接收各种数据。它的一部分- html 字符串。

我使用 WebView.NavigateToString 显示该字符串

但是我不知道我该如何设计它。通常我会使用 blend 来获取默认样式，然后对其进行编辑。但是 Blend 不允许我设置 WebView 的样式。

我最终将 json html 包装到

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

但是这种方法不允许我使用应用程序其余部分所做的主题。

WebView 的样式和/或格式内容的“正确”方式是什么？

4

3 回答 3

3

另一个解决方案是制作一个 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-04T10:16:03.447 回答
1

您显然不能样式/扩展 webview，Webview 不是控件子类的派生（它没有控件模板），而是托管在它自己的 HWND 中。您可能最好使用 webviewbrush。请参阅此示例

于 2012-12-04T01:54:12.620 回答
0

你可以这样设计

 public static string Scape(string htmlContent, string fontColor)
        {
            var htm = "<html>  <head>    <script type=\"text/javascript\"></script>    <style>      body {        color: "+ fontColor +";      }    </style>  </head>  <body>" + htmlContent +"</body></html>";
            return htm;
        }
于 2021-05-24T04:04:51.893 回答