Render and Image on a Button

[Ric_C]

Greetings, all...

I'm having some issues with extending the
System.Web.UI.WebControls.Button. I want to add an image to the button
that will render on the button face itself. Think of the 'Back' button
for the IE browser - and image to the left of the text.

Unfortunately, with what I've coded, I'm getting exactly what I would
expect: an image to the left of the text. The problem is, the image is
rendering off the face of the button.

What I need to find out is how to add the new image to part of the
base, instead of as a new control that renders before the base.

Here's the code I've got so far:

namespace GoofingAround
{
[DefaultProperty("ImageUrl"),
ToolboxData("<{0}:TextImageButton
runat=server></{0}:TextImageButton>")]
public class TextImageButton : System.Web.UI.WebControls.Button,
INamingContainer
{
private Image _imageUrl = new Image();
[Bindable(false),
Category("Appearance"),
Description("The image to be added to the button.")]

public string ImageUrl
{
get{return _imageUrl.ImageUrl;}
set{_imageUrl.ImageUrl = value;}
}

protected override void Render(HtmlTextWriter writer)
{
_imageUrl.RenderControl(writer);
writer.Write("&nbsp;");
base.Render(writer);
}
}
}

The goal is to programmatically change the text based on localization
or custom strings, as well as being able to change the image.

Any help would be greatly appreciated!

thanks,
Ric

[Michael Baltic]

You could make the button a composite control. Nest the image and text areas
inside of a container tag (div, span, table) and create a click event for the
entire group.

The only other option I know of is to use GDI+ to render a new image with
your text and image combined into one image. You could then use this image
for your button.

Neither solution is trivial, but both are very doable with some effort.

Actually, ASPNETPRO magazine had a really cool article on this a couple of
months ago.....
--
Staff Consultant II
Enterprise Web Services
Cardinal Solutions Group

Future Business Model
Loan Origination Services
National City Mortgage


"Ric_C" wrote:

> Greetings, all...
>
> I'm having some issues with extending the
> System.Web.UI.WebControls.Button. I want to add an image to the button
> that will render on the button face itself. Think of the 'Back' button
> for the IE browser - and image to the left of the text.
>
> Unfortunately, with what I've coded, I'm getting exactly what I would
> expect: an image to the left of the text. The problem is, the image is
> rendering off the face of the button.
>
> What I need to find out is how to add the new image to part of the
> base, instead of as a new control that renders before the base.
>
> Here's the code I've got so far:
>
> namespace GoofingAround
> {
> [DefaultProperty("ImageUrl"),
> ToolboxData("<{0}:TextImageButton
> runat=server></{0}:TextImageButton>")]
> public class TextImageButton : System.Web.UI.WebControls.Button,
> INamingContainer
> {
> private Image _imageUrl = new Image();
> [Bindable(false),
> Category("Appearance"),
> Description("The image to be added to the button.")]
>
> public string ImageUrl
> {
> get{return _imageUrl.ImageUrl;}
> set{_imageUrl.ImageUrl = value;}
> }
>
> protected override void Render(HtmlTextWriter writer)
> {
> _imageUrl.RenderControl(writer);
> writer.Write(" ");
> base.Render(writer);
> }
> }
> }
>
> The goal is to programmatically change the text based on localization
> or custom strings, as well as being able to change the image.
>
> Any help would be greatly appreciated!
>
> thanks,
> Ric
>
>

[Jens Ansorg]

Ric_C wrote:

> Greetings, all...
>
> I'm having some issues with extending the
> System.Web.UI.WebControls.Button. I want to add an image to the button
> that will render on the button face itself. Think of the 'Back' button
> for the IE browser - and image to the left of the text.
>

If buttons in .net were actual HTML buttons (<button>thelabel</button>)
instead of the unflexible <input type=button> then you could easily put
anything you want inside the button tags.

Don't know wheter it would be possible to extend the Btton control to
that extend?


Jens

[Steve Walker]

In message <#RxIr98gFHA.1948@TK2MSFTNGP12.phx.gbl>, Jens Ansorg
<jens@ja-web.de> writes

>Ric_C wrote:

>> Greetings, all...
>> I'm having some issues with extending the
>> System.Web.UI.WebControls.Button. I want to add an image to the button
>> that will render on the button face itself. Think of the 'Back' button
>> for the IE browser - and image to the left of the text.
>>

>
>If buttons in .net were actual HTML buttons (<button>thelabel</button>)
>instead of the unflexible <input type=button> then you could easily put
>anything you want inside the button tags.
>
>Don't know wheter it would be possible to extend the Btton control to
>that extend?

It doesn't look worth it compared to writing your own rendered button
control derived from WebControl. It's hardly rocket science.

--
Steve Walker

[Ric_C]

Well, Steve...

Unfortunately, I neither work for JPL, nor do I have a Chemistry
degree, so I'm definitely not a rocket scientist.

I've tried every what I know (in my somewhat limited scope of
knowledge) to get the controls to render properly. I've tried adding
the controls overriding OnPreRender and also overriding Render as well,
but I'm still getting exactly the same result: image and label text
rendering to the left of the button itself. Now, I could probably play
with stupid CSS tricks to move the various elements onto the face, but
that seems more like a kludge than a solution.

So, do you have any suggestions that could point me down the road to
solving this problem? Unfortunately, I don't have "big book stores"
anywhere nearby, so I'm left with what I can dig up on Google.

I appreciate any help you might want to offer.

Take care,
Ric

[Michael Baltic]

Inherit from the button control and override the render method to use the
button tag instead of the input tag. Thats the easiest fix.
--
Direct Email: [email]Michael.Baltic@RemoveCharactersUpTo#NCMC.Com[/email]

Staff Consultant II
Enterprise Web Services
Cardinal Solutions Group


"Ric_C" wrote:

> Well, Steve...
>
> Unfortunately, I neither work for JPL, nor do I have a Chemistry
> degree, so I'm definitely not a rocket scientist.
>
> I've tried every what I know (in my somewhat limited scope of
> knowledge) to get the controls to render properly. I've tried adding
> the controls overriding OnPreRender and also overriding Render as well,
> but I'm still getting exactly the same result: image and label text
> rendering to the left of the button itself. Now, I could probably play
> with stupid CSS tricks to move the various elements onto the face, but
> that seems more like a kludge than a solution.
>
> So, do you have any suggestions that could point me down the road to
> solving this problem? Unfortunately, I don't have "big book stores"
> anywhere nearby, so I'm left with what I can dig up on Google.
>
> I appreciate any help you might want to offer.
>
> Take care,
> Ric
>
>

[Steve Walker]

The first thing I'd do would be to write some plain HTML to achieve the
desired effect.

You could then either, in order of decreasing control but increasing
ease:

* override Render to emit your HTML at runtime (so a completely rendered
control) You'd obviously need to modify the HTML to reflect the text and
image URL properties, and you'd need to create and wire up a click
event. If you intended using the VS designer's absolute positioning,
you'd have to support that.

* (more simply) add a literal control to the WebControl's controls
collection containing your HTML. Your HTML will end up inside a span
which will provide absolute positioning support. You'll still have to
wire up the click event manually, though.

* (More simply still) Create the effect you want by adding controls to
the webcontrol's control collection and positioning them appropriately


I don't think subclassing button is going to get what you want, because
it doesn't render as anything approaching what you are after. You could
be really sneaky and intercept and modify the rendered output after the
event: this is some code I use for debugging troublesome controls, I
guess you can see the potential for fiddling things:

protected override void Render(HtmlTextWriter writer)
{
System.IO.StringWriter target = new
System.IO.StringWriter();
HtmlTextWriter intercept = new HtmlTextWriter(target);
base.Render (intercept);
string html = target.ToString();
writer.Write(html);
}

I really wouldn't advise getting into that though, it breaks the base
class's encapsulation and makes you vulnerable to MS changing the
implementation.

Bottom line is that if you can do it in HTML, you can write a control to
do it. Worst case scenario is that you might have to write a rendered
control, which is not difficult but can be fiddly.


--
Steve Walker

[CigarDoug]

I found a simple solution to this problem. I used an HtmlButton instead, and overwrote the inner HTML.

HtmlButton cmdEdit = new HtmlButton();
cmdEdit.InnerHtml = "<img src='images/edititem.gif' align='middle' />&nbsp;Edit";
cmdEdit.Style.Add("vertical-align", "bottom");