Implementing IEPNGFix as a Reusable Control
Even with IE 8.0 on the horizon, a great deal of our internal users are still using IE 5.5 and 6.0. While, for the most part, our current coding techniques are unaffected, we did move to using PNG files quite a while ago and are faced with rendering issues as the target audience for a few of our produces expands.
To solve those issues, I’ve been using TwinHelix’s IE PNG Fix behavior with a great deal of success; however, I dislike keeping track of multiple files and references between projects. It made more sense to make it a reusable control and include it in our shared architecture library. When Angus releases a new implementation, then I only need to update the control and push out the updated libraries rather than touching HTML in each project.
Here’s how:
1. Download the latest version of IE PNG Fix from here.
2. Add the IEPngFix.htc, blank.gif, and IEPngFix_tilebg.js (if using 2.0 Alpha 3) into your project. Mark all three files as Embedded Content.
3. Create a basic CSS file that can be added to pages and call the IEPngFix behavior. Use the full path to the Web Resource (we’ll add those in the next step). It’s sensitive to the namespace of your project.
img, div, .pngfix, input {
behavior: url(‘<%=WebResource(“Resources.IEPngFix.htc”)%>’);
}
3. Modify the Properties/AssemblyInfo.cs file and add the approprate Web References.
[assembly: WebResource("Resources.IEPngFix.css", "text/css",
PerformSubstitution = true)]
[assembly: WebResource("Resources.IEPngFix.htc", "text/x-component",
PerformSubstitution = true)]
[assembly: WebResource("Resources.IEPngFix_blank.gif", "image/gif")]
[assembly: WebResource("Resources.IEPngFix_tilebg.js", "text/javascript")]
Notice that the HTC behavior file is an “x-component”. For a full list of MIME references, check out the w3schools.com. Also, perform substitution allows us to use dynamic calls of resources—within resources, such as in our CSS file.
4. Create a new class that inherits from CompositeControl. This control will add the javascript and CSS references into our projects. Override the OnPreRender method and populate the calling Page’s header with the links to our two files.
protected override void OnPreRender(EventArgs e)
{
// Base Code: http://www.twinhelix.com/css/iepngfix/
// Include JavaScript for tiled background support.
string javascriptInclude =
Page.ClientScript.GetWebResourceUrl(GetType(),
“Resources.IEPngFix_tilebg.js”);
var jsLink = new HtmlLink
{
Href = javascriptInclude
};
jsLink.Attributes.Add(“type”, “text/javascript”);
Page.Header.Controls.Add(jsLink);
// Include Css file that calls HTC.
string cssInclude =
Page.ClientScript.GetWebResourceUrl(GetType(),
“Resources.IEPngFix.css”);
var cssLink = new HtmlLink
{
Href = cssInclude
};
cssLink.Attributes.Add(“rel”, “stylesheet”);
cssLink.Attributes.Add(“type”, “text/css”);
Page.Header.Controls.Add(cssLink);
base.OnPreRender(e);
}
That’s it. Build and add the new control to your project. You can then add a new forms page and drop the control into the page. I prefer, however, to keep a “DefaultPage” and inherit my pages from it—add once, apply to all. 
protected void Page_Load(object sender, EventArgs e)
{
Page.Controls.Add(new IEPngFix());
}
Here we can see the rendered control. The PNG has a transparent background and without IEPngFix shows up as a white box rather than seeing the black background of the page. Works like a champ!
Thanks again to Angus Turnbull for this excellent behavior!
