您如何在Windows应用商店App中设计WebView控件？

我有C＃/ XAML win store app从json接收各种数据。它的一部分 - html字符串。您如何在Windows应用商店App中设计WebView控件？

我使用WebView.NavigateToString

显示字符串但是我不知道怎样才能样式。通常我会使用混合来获得默认样式，然后编辑它。但Blend不让我使用WebView。

我结束了包裹JSON HTML到

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

但这种做法并不让我使用主题化该应用程序的其他部分一样。

什么是适当的方式来设置和/或格式化WebView的内容？

来源

2012-12-04 Boppity Bop

另一种解决方案是制作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-04 10:16:03 danielrozo

您不能显式地设计/扩展webview，Webview不是控件子类的派生（它没有控件模板），而是托管在自己的HWND中。你可能使用webviewbrush更好。请参阅this sample

来源

2012-12-04 01:54:12

我看到webviewbrush但它表示目的是在HTML内容上添加其他控件....可以有效地设计webviewbrush风格吗？你可以从xaml预期风格的webviewbrush html内容？ –

您如何在Windows应用商店App中设计WebView控件？

回答

相关问题