How do you style WebView control in Windows Store

I have C# / XAML win store app which receives various data from json. one piece of it - html string.

I display that string using WebView.NavigateToString

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.

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.

What is the 'proper' way to style and / or format content of the WebView?

回答1:

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

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

回答2:

You cannot style/extend webview apparently, Webview is not a derivative of control subclass (it does not have a control template) and is rather hosted in its own HWND. You are probably better off using webviewbrush. See this sample