Question

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

我使用WebView.NavigateToString

显示该字符串

但我不明白我该如何设计它。通常我会使用blend来获取默认样式然后进行编辑。但Blend并没有让我对WebView进行设计。

我最终将json html包装成

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

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

设置和/或格式化WebView内容的“正确”方法是什么？

Answer 1

另一个解决方案是创建一个WebViewContentHelper（左右）类。您可以根据它传递主题并设置CSS的样式。例如：

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

您可以调整已经从Windows 8复制Font样式的类，并为您提供水平滚动，也可以在列中排列内容，就像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();
    }
}

Answer 2

您无法显示/扩展webview，Webview不是控制子类的衍生物（它没有控件模板），而是托管在自己的HWND中。你可能最好使用webviewbrush。见this sample

Answer 3

你可以这样设计

 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;
        }

如何在Windows应用商店应用中设置WebView控件的样式？

3 个答案: