Render and Image on a Button

Discussion in 'ASP .Net Web Controls' started by Ric_C, Jul 7, 2005.

  1. Ric_C

    Ric_C Guest

    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
    Ric_C, Jul 7, 2005
    #1
    1. Advertising

  2. 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
    >
    >
    Michael Baltic, Jul 7, 2005
    #2
    1. Advertising

  3. Ric_C

    Jens Ansorg Guest

    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
    Jens Ansorg, Jul 8, 2005
    #3
  4. Ric_C

    Steve Walker Guest

    In message <#>, Jens Ansorg
    <> 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
    Steve Walker, Jul 8, 2005
    #4
  5. Ric_C

    Ric_C Guest

    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
    Ric_C, Jul 8, 2005
    #5
  6. 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: Michael.Baltic@RemoveCharactersUpTo#NCMC.Com

    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
    >
    >
    Michael Baltic, Jul 8, 2005
    #6
  7. Ric_C

    Steve Walker Guest

    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
    Steve Walker, Jul 8, 2005
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Lau Lei Cheong

    Page.Render do not render complete page

    Lau Lei Cheong, May 15, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    2,051
    Lau Lei Cheong
    May 15, 2004
  2. Lars Netzel

    Can you render and image in ASP.NET?

    Lars Netzel, Jan 5, 2005, in forum: ASP .Net
    Replies:
    9
    Views:
    4,765
    Kevin Spencer
    Jan 6, 2005
  3. sonic
    Replies:
    1
    Views:
    524
    John Saunders
    Jan 7, 2005
  4. Ric_C

    Render and Image on a Button

    Ric_C, Jul 7, 2005, in forum: ASP .Net Building Controls
    Replies:
    6
    Views:
    161
    Steve Walker
    Jul 8, 2005
  5. Glenn Gillen
    Replies:
    0
    Views:
    266
    Glenn Gillen
    Nov 17, 2006
Loading...

Share This Page