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?
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();
}
}
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
You can style like this
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;
}
Related
I followed the answer in
Displaying html from string in WPF WebBrowser control
to bind to list of html content, so I'm able to display it in a WPF program I've built. I can't figure out how to get the ' and " to display properly.
Displaying HTML from string in a WebBrowser control doesn't properly display ' or "
Here is my XAML:
<Grid Grid.Column="1" Grid.Row="2">
<Border BorderThickness="2" BorderBrush="{DynamicResource TitleBrush}" Margin="50,0">
<WebBrowser utility:BrowserBehavior.Html="{Binding SelectedEmail.EmailContent}"
ScrollViewer.VerticalScrollBarVisibility="Hidden"/>
</Border>
</Grid>
Here is my code:
public class BrowserBehavior
{
public static readonly DependencyProperty HtmlProperty = DependencyProperty.RegisterAttached(
"Html",
typeof(string),
typeof(BrowserBehavior),
new FrameworkPropertyMetadata(OnHtmlChanged));
[AttachedPropertyBrowsableForType(typeof(WebBrowser))]
public static string GetHtml(WebBrowser d)
{
return (string)d.GetValue(HtmlProperty);
}
public static void SetHtml(WebBrowser d, string value)
{
d.SetValue(HtmlProperty, value);
}
static void OnHtmlChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs e)
{
WebBrowser webBrowser = dependencyObject as WebBrowser;
if (webBrowser != null)
webBrowser.NavigateToString(e.NewValue as string ?? " ");
}
}
See the link above how with questions. Any help on how to get the ' or " to display would be much appreciate.
I have already tried to replace ' with &apos and ' with no results.
Example of Problem:
We have added several overlay options for the frame line. Each option will allow you to pick either “STD†(Doesn’t auto add butt doors) or “BUTT†(Auto adds butt doors).
Example of Proper Format:
We have added several overlay options for the frame line. Each option will allow you to pick either "STD" (Doesn't auto add butt doors) or "BUTT" (Auto adds butt doors).
For that you can use a verbatim string and simply escape double quotes with an added double quote.
This sample works for me.
public partial class MainWindow : Window
{
private string html = #"<!DOCTYPE html>
<html lang=""en"">
<body>
<div>My Test HTML 'single quote', ""double quote""</div>
</body>
</html>";
public MainWindow()
{
InitializeComponent();
MyWebBrowser.NavigateToString(html);
}
}
If you are reading the HTML from a file you shouldn't need to do anything special.
MyWebBrowser.NavigateToString(File.ReadAllText(#"C:\myfilepath\myfile.htm"));
I have a DIV which has images and hyperlinks, which are added in C# by CODE
mStr.Append(" <div id='wn'>");
mStr.Append("<div id='lyr1'> <ul id='horiz'>");
if (dv.Count > 0) {
for (int i = 0; i < dv.Count; i++) {
mStr.Append("<li width='450' height='110' style='padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px;'>");
mStr.Append("<a href='PlayGame.aspx?GameID=" + GameLib.Utilities.Encrypt(dv[i][1].ToString()) + "'>");
mStr.Append("<img src='../" + dv[i][10].ToString() + "' width='156px' height='109px' style='padding-left:0px;' />");
mStr.Append("</a>");
mStr.Append("</li>");
}
mStr.Append("</ul></div></div>");
RelatedGames.InnerHtml.Remove(0, RelatedGames.InnerHtml.Length);
RelatedGames.InnerHtml = mStr.ToString();
}
..but the problem is that I want to scroll the DIV so that i can go through all images. I tried many ways in JQuery but it has been stuck and static. I will be grateful for any suggestions.
Or, is there any other way that the same functionality can be achieved?
Simply add the following CSS:
#lyr1 {
overflow: auto;
}
Overflow is a CSS property that specifies how content that is larger than its parents should be displayed. The default value is visible, which means that everything will be displayed, even if it goes beyond the size of its parent (which it does, in your case). Setting it to auto will make everything that doesn't fit in the parent hidden, and will add scrollbars whenever necessary. To make scrollbars always visible, do overflow: scroll;.
Live demo: http://jsfiddle.net/DanVicBez/kNk4y/
Just use a css property overflow:scroll to the target div
<div id='lyr1' style='overflow:scroll'>
I'm trying to display image in WebBrowser control with this code:
string captcha = "<img src=\"http://www.reddit.com/captcha/{0}/.png\" border=\"0\"></img>";
webBrowser1.DocumentText = String.Format(captcha, iden);
but it looks like this. Look at only the top image. There is white space on top-left and image is moved down-right.
I have tried border=0; padding=0; vertical-align:top; inside img and body tag and nothing works.
Is there a way to remove that space?
The <html> and <body> elements have padding/margins. Try this:
string captcha = "<style>html, body {{ padding: 0; margin: 0 }}</style><img src=\"http://www.reddit.com/captcha/{0}/.png\" border=\"0\"></img>";
webBrowser1.DocumentText = String.Format(captcha, iden);
I'm trying to generate some html programmatically in my code behind for a user control I'm designing.
I've been looking around, but can't seem to figure out how to dynamically generate some h1 tags for content I'll be displaying.
Is it just a Label with a special property set?
var h1 = new HtmlGenericControl("h1");
h1.InnerHtml = "header content";
You could also use:
<h1 runat="server" />
You can use label or literal controls as shown below:
Label1.Text = "<h1>HI All</h1>";
Or
string heading = "HI All";
Label1.Text = string.Format("<h1>{0}</h1>", heading);
You can do this easily by
literall.Text ="<h1>ABCD</h1>";
Let, you have a server control like this,
<div class="cls" runat="server" id="MyServerControlDiv"></div>
using HtmlGenericControl
var h1 = new HtmlGenericControl("h1");
h1.InnerHtml = "header content";
MyServerControlDiv.Controls.Add(h1);
using LiteralControl
MyServerControlDiv.Controls.Add(new LiteralControl("<h1>"));
MyServerControlDiv.Controls.Add(new LiteralControl("header content"));
MyServerControlDiv.Controls.Add(new LiteralControl("</h1>"));
Use Literal control, Literal1.Text = "<h1>" + texttodisplay + "</h1>";
ASP literals may help you.
http://ganeshmohan.wordpress.com/aspnet-and-c-generate-html-controls-dynamically/
Personally I prefer to make a class for it.
public class H1: HtmlGenericElement
{
public H1(): base("h1") { }
}
Or maybe.
public class H: HtmlGenericControl
{
public H(int size): base("h" + size) { }
}
Let us assume that you have an asp placeholder in your design:
PlaceHolder placeHolder1 = new PlaceHolder();
string yourText = "Header Text";
Label myLabel = new Label();
myLabel.Text = "<h1>" + yourText + "</h1>";
PlaceHolder1.Controls.Add(myLabel);
OR
PlaceHolder1.Controls.Add(new LiteralControl ("<h1>")) // and likewise
for </h1>.
Using a generic HTML control or a literal control is fine just so long as you don't want to insert any child controls. If you do need to append a child control such as a label for example, then you will want to create you header as a Web Control like follows:
WebControl H2Header = new WebControl(HtmlTextWriterTag.H1);
And then you can append a child control like this:
Label labHeader = new Label() { Text = "Some Header Text" };
H2Header.Controls.Add(labHeader);
What i always prefer to use:
In the front end put the desired html control like
<h1 id="title" runat="server">XXX</h1>
Then in the behind code declare the desired control like
protected HtmlGenericControl PublicTitle
{
get
{
return this.title;
}
}
And anywhere in the code play whith the control
PublicTitle.InnerHtml = state.Equals("win") ? "Win" : "Lost";
PublicTitle.Attributes.Add("src", "https://xxxx");
I am using following code to open a modalwindow:
function OpenPopup(rn) {
var winargs = null;
var winsettings = "help:no;status:no;maximize:yes;minimize:no;dialogHeight:450px;dialogWidth:820px;edge:sunken;scroll:yes;center:yes;resizable:yes;";
winargs = window.showModalDialog("../PopUp.aspx?id=" + rn , winargs, winsettings);
}
Here the property scroll provides only Yes and No option. I want only Vertical scroll bar and not Horizontal one. How should I achieve this ?
Can anyone help me on this issue ?
Make sure that the width of PopUp.aspx is not more than the dialogWidth:820px;
try this
<body style="width:820px;">
on PopUp.aspx
Have you tried the following:
Specify the width to it:
function popupWindow(url, width)
{
window.open('url', 'win_name', 'width=' + width);
}
And depending upon your layout, you could use the css as well:
<style type="text/css">
overflow-x:hidden;
</style>
Source: stackoverflow
Please check this solution:
did you make the div scrollable? i.e.
<div style="position:absolute;top:0;left:0;width:100px;height:100px;overflow:auto;"></div>
also make sure that you do not have any element (table, div, span) in the the div who's width is greater than the container width + 25px (needed for vertical scroll bar)
http://forums.asp.net/t/1450847.aspx/1