Using ASP.Net, I have a server control for which i would like to add the inline css style "background-image:none". However, when i call:
writer.AddStyleAttribute("background-image", "none");
The following inline style is generated (and tries to resolve the url "none"):
background-image:url(none)
Is there a special syntax I can use to set the background image to none inline?
Looking at the code for the HTMLTextWriter and CssTextWriter classes in .NET Reflector, the only thing I can think of is subclassing HTMLTextWriter yourself.
"Binary not the first element in the style enum", ~HtmlTextWriterStyle.BackgroundColor, is what it uses for any style whose name it doesn't recognize, and therefore doesn't bother to check if the value needs wrapped in "url()" when it's actually written out.
HtmlTextWriterEx isn't the greatest name, but whatever. Depending on what you're doing, you might(?) need to do something like this in your code-behind System.Web.UI.Page subclass:
protected override HtmlTextWriter CreateHtmlTextWriter(TextWriter writer)
{
return new HtmlTextWriterEx(writer);
}
And here's the class:
class HtmlTextWriterEx : HtmlTextWriter
{
public HtmlTextWriterEx(TextWriter writer)
: this(writer, "\t")
{
}
public HtmlTextWriterEx(TextWriter writer, string tabString)
: base(writer, tabString)
{
}
public override void AddStyleAttribute(string name, string value)
{
if (name.ToLower() == "background-image" && value.ToLower() == "none")
base.AddStyleAttribute(name, value, ~HtmlTextWriterStyle.BackgroundColor);
else
base.AddStyleAttribute(name, value);
}
public override void AddStyleAttribute(HtmlTextWriterStyle key, string value)
{
if(key == HtmlTextWriterStyle.BackgroundImage && value.ToLower() == "none")
base.AddStyleAttribute("background-image", value, ~HtmlTextWriterStyle.BackgroundColor);
else
base.AddStyleAttribute(key, value);
}
}
You could try adding a CSS class to your page such as
.noimage { background-image: none; }
Then instead of adding the style attribute in your code behind you could add the CssClass.
Related
I'm getting an external page HTML code from my Backend as a string
and displaying it in a Webview in a Xamarin forms app
Now I would like to style it
I was wondering what is the most efficient way to do that?
and is it possible to style it in the same way a Xamarin Page would get styled with XAML and shared resources?
so far I tried referencing a CSS file in the shared resources, which I found out doesn't work...
htmlData = "<link rel=\"stylesheet\" type=\"text/css\"href=\"Assets\"Styles\"style.css\" />" + htmlData;
htmlSource.Html = htmlData;
myWebView.Source = htmlSource;
Update
I ended up using a custom renderer for the Webview
which worked for Android but not for IOS
here is my IOS implementation of the renderer
[assembly: ExportRenderer(typeof(CustomWebView), typeof(CustomWebViewRenderer))]
namespace XXX.iOS.Renderers
{
public class CustomWebViewRenderer : WkWebViewRenderer
{
WKUserContentController userController;
public CustomWebViewRenderer() : this(new WKWebViewConfiguration())
{
}
public CustomWebViewRenderer(WKWebViewConfiguration config) : base(config)
{
userController = config.UserContentController;
}
protected override void OnElementChanged(VisualElementChangedEventArgs e)
{
base.OnElementChanged(e);
var customWebView = e.NewElement as CustomWebView;
if (e.NewElement != null)
{
string htmldata = customWebView.HTMLData;
htmldata = "<link rel=\"stylesheet\" type=\"text/css\" href=\"StyleSheet.css\" />" + htmldata;
WkWebViewRenderer wkWebViewRenderer = new WkWebViewRenderer();
NSData data = NSData.FromString(htmldata);
wkWebViewRenderer.LoadData(data,"text/html", "UTF-8",new NSUrl(""));
}
}
}
}
Note: I don't have any idea what is happening here with the IOS code, cause I have never coded in the native language
I don't know whether this is feasible for you, but you could inject the actual CSS in the HTML string and then assign the HtmlSource
var css = ReadStringFromAsset("style.css");
htmlData = InjectCssInHtml(htmlData, css);
htmlSource.Html = htmlData;
myWebView.Source = htmlSource;
Depending on how much control you have over the HTML you receive, you have several option on how to realize InjectCssInHtml
Pseudo-Markup comment
If changing the HTML is feasible, you could add an HTML comment as a pdeudo markup. This will make the code simple, but each HTML must be edited accordingly
<html>
<head>
<style>
<!-- CSS -->
</style>
...
</html>
your InjectCssInHtml then becomes
string InjectCssInHtml(string html, string css)
{
return html.Replace("<!-- CSS -->", css);
}
Without editing the HTML
If editing the HTML is not feasible, the InjectCssInHtml becomes a tad more complicated. The following is a first guess, but I think you get the idea
string InjectCssInHtml(string html, string css)
{
string codeToInject;
int indexToInject = 0;
if(ContainsStyleTag(html))
{
indexToInject = IndexOfStyleTagContent(html);
codeToInject = css;
}
else if(ContainsHeadTag(html))
{
indexToInject = IndexOfHeadTagContents(html);
codeToInject = $"<style>{css}</style>";
}
else
{
indexToInject = IndexOfHtmlTagContents(html);
codeToInject = $"<head><style>{css}</style></head>";
}
return html.Insert(indexToInject, codeToInject);
}
Surely this does not cover each possible case, but I think you get the idea. The ìf-else` could be replaced by an abstract factory generational pattern combined with the strategy behavioral pattern.
string InjectCssInHtml(string html, string css)
{
ICssInjector injector = injectorFactory.CreateInjector(html);
return injector.InjectCss(html, css);
}
I'm adding some content to a given web page from code behind. When I want to add a break after some text, I try to do that this way:
pDoc.Controls.Add(New Label With {.Text = "whatever"})
pDoc.Controls.Add(New HtmlGenericControl("br"))
,where pDoc is the Panel in which I'm adding the content. But it adds two br tags into the final HTML.
I've avoid this behaviour this way:
pDoc.Controls.Add(New Label With {.Text = "whatever" & "<br />"})
Anyway, I'm so curious and I want to know why
pDoc.Controls.Add(New HtmlGenericControl("br"))
is acting that way. I also think my approach is not too fancy.
Regards,
Actually you can use;
pDoc.Controls.Add(new LiteralControl("<br/>"));
Whereas new HtmlGenericControl("br") adds two <br>, this will only add <br/> tag to your HTML so that you just have 1 space line.
In this picture I added those breaks with that code block.
Also similar question here: Server control behaving oddly
After some testing it looks like the reason is that HtmlGenericControl doesn't support self closing. On server side the HtmlGenericControl("br") is treated as:
<br runat="server"></br>
There is no </br> tag in HTML, so the browser shows it as there are two <br /> tags. Nice way out of this is to create HtmlGenericSelfCloseControl like this (sorry for C# code but you should have no issue with rewritting this in VB.NET):
public class HtmlGenericSelfCloseControl : HtmlGenericControl
{
public HtmlGenericSelfCloseControl()
: base()
{
}
public HtmlGenericSelfCloseControl(string tag)
: base(tag)
{
}
protected override void Render(HtmlTextWriter writer)
{
writer.Write(HtmlTextWriter.TagLeftChar + this.TagName);
Attributes.Render(writer);
writer.Write(HtmlTextWriter.SelfClosingTagEnd);
}
public override ControlCollection Controls
{
get { throw new Exception("Self closing tag can't have child controls"); }
}
public override string InnerHtml
{
get { return String.Empty; }
set { throw new Exception("Self closing tag can't have inner content"); }
}
public override string InnerText
{
get { return String.Empty; }
set { throw new Exception("Self closing tag can't have inner text"); }
}
}
And use it instead:
pDoc.Controls.Add(New Label With {.Text = "whatever"})
pDoc.Controls.Add(New HtmlGenericSelfCloseControl("br"))
As a simpler alternative (if you have reference to the Page) you can try using Page.ParseControl:
pDoc.Controls.Add(New Label With {.Text = "whatever"})
pDoc.Controls.Add(Page.ParseControl("br"))
Instead of rendering the image of a menu item as an <img> tag within an anchor, I'd like to add a class to the anchor tag which adds the image as a background image.
At the moment, I'm doing some post-processing with javascript that searches for image urls. If found, they are removed and replaced with a CSS class.
Is there a way to perform this by overriding the Menu or implementing a MenuAdapter?
I've had a look at the MenuAdapter class but it looks like I'd have to re-implement all rendering functionality just to change this small part.
[Note: the reason I'm doing this is because I want to display the images after the text; i struggled to do this using the default rendering.]
ETA: Answered below.
I found the simplest way is to override the Render method of the Menu.
Using this menu, you can put a tooltip and css class, separated by a semi-colon, in the ToolTip property of the menu item:
item.ToolTip = "this is the tip; class1 class2";
Note: This is a simplistic menu that performs as much as I want it to do. It ignores ImageUrl and SeparatorImageUrl.
public class CSSItemMenu : Menu
{
protected override void Render(HtmlTextWriter writer)
{
this.PerformDataBinding();
writer.Write(string.Format("<div id=\"{0}\" class=\"{1}\">", base.ClientID, base.CssClass));
writer.WriteLine();
writer.WriteLine("<ul class=\"level1\">");
foreach (MenuItem item in Items)
{
WriteItem(writer, item, 1);
}
writer.WriteLine("</ul>");
writer.WriteLine("</div>");
}
private static void WriteItem(HtmlTextWriter writer, MenuItem item, int level)
{
writer.WriteLine("<li>");
string title = "";
var userClass = "";
if (!string.IsNullOrEmpty(item.ToolTip))
{
var data = item.ToolTip.Split(';');
title = string.Format(" title=\"{0}\"", data[0].Trim());
if (data.Length > 1)
{
userClass = " " + data[1].Trim();
}
}
var cssClass = string.Format("class = \"popout level{0}{1}\"", level, userClass);
writer.WriteLine(string.Format("<a {0} href=\"{1}\"{2}>{3}</a>", cssClass, item.NavigateUrl, title, item.Text));
if (item.ChildItems.Count > 0)
{
writer.WriteLine(string.Format("<ul class=\"level{0}\">", level + 1));
foreach (MenuItem child in item.ChildItems)
{
WriteItem(writer, child, level + 1);
}
writer.WriteLine("</ul>");
}
writer.WriteLine("</li>");
}
}
I need to databind formatted text to a RichTextBox. For formatting it seems that I will have to create a series of Runs with their specific formats and then add them to a paragraph and add it to the blocks property on the RichTextBox. I tried to bind a paragraph property to Blocks but it doesn't seem to allow that. Paragraph doesn't have an itemsource to bind it to a list of Runs. How can I possibly databind the list of Runs to a RichTextBox Widget ?
Thanks
Here is the solution I came up with. I created a custom RichTextViewer class and inherited from RichTextBox.
using System.Windows.Documents;
using System.Windows.Markup;
using System.Windows.Media;
namespace System.Windows.Controls
{
public class RichTextViewer : RichTextBox
{
public const string RichTextPropertyName = "RichText";
public static readonly DependencyProperty RichTextProperty =
DependencyProperty.Register(RichTextPropertyName,
typeof (string),
typeof (RichTextBox),
new PropertyMetadata(
new PropertyChangedCallback
(RichTextPropertyChanged)));
public RichTextViewer()
{
IsReadOnly = true;
Background = new SolidColorBrush {Opacity = 0};
BorderThickness = new Thickness(0);
}
public string RichText
{
get { return (string) GetValue(RichTextProperty); }
set { SetValue(RichTextProperty, value); }
}
private static void RichTextPropertyChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs dependencyPropertyChangedEventArgs)
{
((RichTextBox) dependencyObject).Blocks.Add(
XamlReader.Load((string) dependencyPropertyChangedEventArgs.NewValue) as Paragraph);
}
}
}
is there any way to change skinId in codeBehind?
I tried it during setting other property, but it's not working. The skin is not applied.
public GlobalImageButtonType Skin {
get { return _skin; }
set
{
_skin = value;
this.SkinID = _skin.ToString();
this.CommandName = _skin.ToString();
LoadDefaultValues();
}
}
I also tried loop throught page.contols, but in page_onpreinit event is controls collection empty.
Is it possible to change the SkinId elsewhere than in aspx page?
Thanks
SkinID can only be changed programmatically on or before OnPreInit - your only option to initiate this for a control is in the Page's OnPreInit.
Under normal circumstances, .Controls should be available at that stage.
In some cases, you need the following work-around for .master pages:
/*
* HACK: need to ensure master controls are instantiated first.
* */
MasterPage root = this.Master;
while (root.Master != null)
root = root.Master;
InvokeControlPreInit(Controls);
You can now have controls that need skinning implement some interface (IRuntimeSkinableControl) that allows them to assign their own skins:
private void InvokeControlPreInit(ControlCollection controls)
{
foreach (Control control in controls)
{
IRuntimeSkinableControl skinableControl;
if (null != (skinableControl = control as IRuntimeSkinableControl))
skinableControl.OnPreInit();
if (string.IsNullOrEmpty(control.SkinID) && control.Controls.Count > 0)
InvokeControlPreInit(control.Controls);
}
}
The control would apply it like so:
public class UserControl : System.Web.UI.UserControl, IRuntimeSkinableControl
{
public virtual void OnPreInit()
{
//assign this.SkinID
}
}