How to build ImageButton Control Adapter (or more general, how to build a simple control adapter)?

My inspiration for this question was my discovery of the very annoying default style (border-width: 0px;) on the ImageButton web control. The simple solution is to override it by adding your own style to the control e.g. Style="border-width: 2px;".

How every, it would have been nice to just make a simple control adapter that would just step in at the right place and just tell the control not to render the default styling.

After looking a bit at the code from the CSSFriendly ControlAdapter project, it seems like they are recreating much of the rendering, which is overkill for what I want to do — i.e. just change the default styling that is rendered out.

So the question, how to just modify the rendering of the default styles through control adapters, and leave the rest as is?

Is it even possible?

Thanks, Egil.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

There are two ways to do this. Both will require writing up a custom Control Adapter. Either you can set the actual value in code, or you can just not include the value at all and then use CSS to set your value. Here’s the code you’ll need to do this.

namespace TestApp
{
    using System.IO;
    using System.Web.UI;
    using System.Web.UI.Adapters;

    public class ImageAdapter : ControlAdapter
    {
        protected override void Render(HtmlTextWriter writer)
        {
            base.Render(new RewriteImageHtmlTextWriter(writer));
        }

        public class RewriteImageHtmlTextWriter : HtmlTextWriter
        {
            public RewriteImageHtmlTextWriter(TextWriter writer)
                : base(writer)
            {
                InnerWriter = writer;
            }

            public RewriteImageHtmlTextWriter(HtmlTextWriter writer)
                : base(writer)
            {
                InnerWriter = writer.InnerWriter;
            }

            public override void AddAttribute(HtmlTextWriterAttribute key, string value, bool fEncode)
            {
                if (key == HtmlTextWriterAttribute.Border)
                {
                    // change the value
                    //value = "2";

                    // -or-

                    // don't include the value
                    //return;
                }

                base.AddAttribute(key, value, fEncode);
            }

            public override void AddStyleAttribute(HtmlTextWriterStyle key, string value)
            {
                if (key == HtmlTextWriterStyle.BorderWidth)
                {
                    // change the value
                    //value = "2px";

                    // -or-

                    // don't include the value
                    //return;
                }

                base.AddStyleAttribute(key, value);
            }
        }
    }
}

Then you’ll need to add an entry into one of your browser files like this

<browsers>
  <browser refID="Default">
    <controlAdapters>
      <adapter controlType="System.Web.UI.WebControls.Image" adapterType="TestApp.ImageAdapter, TestApp" />
    </controlAdapters>
  </browser>
</browsers>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0