Avatar billede thanse21 Nybegynder
22. juni 2006 - 16:29 Der er 6 kommentarer og
1 løsning

Custom ImageButton med tekst-property og hover-billede

Hej Eksperter,

Jeg er ved at lave et projekt, der bruger en masse ImageButtons.
Hver knap har faktisk to billeder, et til når man holder musen henover, og et til når man ikke gør det.
Der er efterhånden ved at være omkring 60 forskellige knapper. Derudover er der seks farvetemaer, der hver især kræver en knap, og desuden 3 sprog. Dvs. at hver gang der skal tilføjes en ny knap skal der faktisk laves 2*6*3 = 36 billeder. Min designer er ved at være ret træt af det og det er jeg sådan set også.

Derfor har jeg tænkt om man kan lave sin egen custom imagebutton, der har properties som: ImageURL, HoverImageURL og Text.

Jeg har aldrig prøvet at lave min egen Custom Control, og det er vel det der skal til?

Har I nogen ideer eller links til tutorials, så bliver jeg meget glad, synes ikke rigtig google gav noget brugbart.
Avatar billede snepnet Nybegynder
30. juni 2006 - 12:49 #1
Det er meget ukompliceret at komme igang med:

public class SpecialImageButton : ImageButton
{
  public string HoverImageUrl
  {
    get
    {
      string _hoverImageUrl = (string) this.ViewState["HoverImageUrl"];
      if (_hoverImageUrl != null)
      {
            return _hoverImageUrl;
      }
      return string.Empty;     
    }
    set
    {
      this.ViewState["HoverImageUrl"] = value;
    }
  }
}

Så har du din egen specialiserede kontrol med en ekstra property (HoverImageUrl) - du kan angive på samme måde som med alle andre properties på kontrollen ImageButton.

Mvh
Avatar billede thanse21 Nybegynder
11. juli 2006 - 09:20 #2
Ok, hvad så hvis jeg gerne vil have en tekst ovenpå?
Avatar billede snepnet Nybegynder
11. juli 2006 - 09:51 #3
Så skal du enten lave de billeder du skal bruge, eller lave en handler der kan lægge tekst på billeder, og gemme resultatet i en responsestream.
Hvis du bruger den sidste løsning - skal du så sætte din hoverimageurl til den handler, og give den en querystring-parameter med teksten.
Handleren kunne se sådan her ud (eller i hvert fald noget i den stil... der er lidt hardkodning mv. i nedenstående som du nok skal fikse op):

<%@ WebHandler Language="C#" Class="ImageServer" %>

using System;
using System.Web;
using System.Drawing;
using System.Drawing.Imaging;
using System.IO;

public class ImageServer : IHttpHandler
{   
    public void ProcessRequest (HttpContext context)
    {
        string tag = context.Request.QueryString["tag"] != null ? context.Request.QueryString["tag"] : "Header";
        context.Response.ContentType = "image/jpeg";
        context.Response.BinaryWrite(ImageTagger.CreateTaggedImaged(tag));
    }

    public bool IsReusable
    {
        get{return true;}
    }
}

public class ImageTagger
{
    public static byte[] CreateTaggedImaged(string tag)
    {
        Image image = Resources.Images.Wood;
        using (Graphics g = Graphics.FromImage(image))
        using (Font font = new Font("Verdana", 16, FontStyle.Regular))
        using (SolidBrush brush = new SolidBrush(Color.Black))
        {
            g.DrawString(String.Format(tag), font, brush, new PointF(5F, 40F));
            using (MemoryStream ms = new MemoryStream())
            {       
                image.Save(ms, ImageFormat.Jpeg);
                return ms.GetBuffer();       
            }
        }   
    }
}

Mvh
Avatar billede thanse21 Nybegynder
11. juli 2006 - 10:03 #4
Ok, det lyder interessant. Umiidelbart vil jeg dog mene at der kan komme nogle performanceproblemer?
Der er vel også en del kodning involveret eller hvad? Jeg kan ikke rigtig se hvordan jeg skal anvende det når jeg vil have et billede til en imagebutton på en given side.

Jeg er begyndt at kigge lidt på en specialisering af linkbutton, og så bruge noget style/backgroundimage manipulation, men det spiller ikke helt endnu.
Avatar billede snepnet Nybegynder
11. juli 2006 - 11:21 #5
Der er sådan set ikke mere kode end det du ser.... Du skal blot angive ImageUrl på din knap sådan her:

<asp:ImageButton id="someImageButton" runat="server" ImageUrl="ImageServer.ashx?tag=godmorgen" />

Performance ... well ... Hvis du vil generere billeder dynamisk - koster det jo det det koster.
Hvis det bliver for dyrt - kan du jo altid lave handleren om til at returnere prekonstruerede billeder istedet.
Du kan også lave systemet så billederne gemmes for hvert nyt tag du angiver, og så bare hentes i filsystemet, hvis de er genereret i forvejen.

Mvh
Avatar billede thanse21 Nybegynder
11. juli 2006 - 11:28 #6
jeg takker for hjælpen, og vil holde det i mente, men jeg har lavet en specialiseret linkbutton. Vha. noget javascript får jeg det til at virke.
Læg et svar hvis du vil have pointene.
Avatar billede snepnet Nybegynder
11. juli 2006 - 11:36 #7
Ok :o)
Mvh
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
IT-kurser om Microsoft 365, sikkerhed, personlig vækst, udvikling, digital markedsføring, grafisk design, SAP og forretningsanalyse.

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester