Creating a Facebook like badge

This a small walkthrough of how you can go about creating a Bage just like Facebook Badge.

Infact While developing my project i myself thought of creating a facebook like badge that can later be saved on the server and used with a link to it. Following is the complete class code to generate the badge(Its also available on codeplex, and following is basically explaination of code there).

(Note: replace the"Image.FromFile(@"C:\Users\SHEKHAR\Desktop\Test HTML\tsp1.png");" with a path to image that can be used as a title bar in the badge.)

The Badge Class

First Declare the Class and some variables to hold on required information. (made it sealed so it couldn't be inherited).

public sealed class TSPBadge
{
 /// <summary>
 /// Image for the TSP badge's title bar (Static Field)
 /// </summary>
 private static Image TSPBadgeTitleBar = Image.FromFile(@"C:\Users\SHEKHAR\Desktop\Test HTML\tsp1.png");

 /// <summary>
 /// The Default Width for TSP Badge (Constant Field)
 /// </summary>
 public const int DBadgeWidth = 300;

 /// <summary>
 /// The Default Height for TSP Badge (Constant Field)
 /// </summary>
 public const int DBadgeHeight = 500;

 /// <summary>
 /// Set this variable to true if a TSP badge has been successfully made
 /// </summary>
 public bool IsMade = false;

 /// <summary>
 /// Initializes the static members of the TSPBadge Class (Static Constructor)
 /// </summary>
}

Class Constructors

Now lets define both static and instance constructors.

/// <summary>
/// Initializes the static values of TSPBadge with default values
/// </summary>
static TSPBadge()
{
BadgeWidth = DBadgeWidth;
BadgeHeight = DBadgeHeight;
}

/// <summary>
/// Initializes a new Instance of TSPBadge with default values
/// </summary>
public TSPBadge()
{
 IsMade = false;
 UserPic = null;
 UserName = null;
 EmailID = null;
 UserStatus = null;
}

/// <summary>
/// Initializes a new Instance of TSPBadge with specified Width and Height
/// </summary>
/// <param name="Width">The Width for the TSP Badge</param>
/// <param name="Height">The Height for the TSP Badge</param>
public TSPBadge(int Width, int Height)
{
 BadgeWidth = Width;
 BadgeHeight = Height;
}

/// <summary>
/// Initializes a new Instance of TSPBadge with specified Image, Name, Status and EmailID.
/// </summary>
/// <param name="userpic">The user's picture</param>
/// <param name="username">The name of the user</param>
/// <param name="emailID">The user's EmailID</param>
/// <param name="userstatus">The user's most recent status text</param>
public TSPBadge(Image userpic, string username, string emailID, string userstatus)
{
 IsMade = false;
 UserPic = new Bitmap(userpic);
 UserName = username.ToUpper(CultureInfo.InvariantCulture);
 EmailID = emailID;
 UserStatus = userstatus;
}

Properties

Following are defination of some properties that will help you to alter the settings when required.

/// <summary>
/// Gets or Sets the Width to be used for drawing TSP badge. (Static Property)
/// </summary>
public static int BadgeWidth { get; set; }

/// <summary>
/// Gets or Sets the Height to be used for drawing TSP badge. (Static Property)
/// </summary>
public static int BadgeHeight
{
 get
 {
  return _BadgeHeight;
 }
 set
 {
  GraphicsUnit gu = GraphicsUnit.Pixel;
  //The TSP Badge's Minimum height is the height of TSP TitleBar's height
  if (value <= (int)TSPBadgeTitleBar.GetBounds(ref gu).Height)
  {
   _BadgeHeight = (int)TSPBadgeTitleBar.GetBounds(ref gu).Height;
  }
  else
  {
   _BadgeHeight = value;
  }
 }
}
private static int _BadgeHeight;

/// <summary>
/// Gets or Sets the User Picture to be used for drawing TSP Badge
/// </summary>
public Bitmap UserPic { get; set; }

/// <summary>
/// Gets or Sets the User Name to be used for drawing TSP Badge
/// </summary>
public string UserName { get; set; }

/// <summary>
/// Gets or Sets the User EmailID to be used for drawing TSP Badge
/// </summary>
public string EmailID { get; set; }

/// <summary>
/// Gets or Sets the User's Status text to be used for TSP Badge
/// </summary>
public string UserStatus { get; set; }

Methods for drawing

Lets draw the badge!

/// <summary>
/// Draws a TSP Badge on bitmap with specified Image, Name, Status and EmailID. (Static Method)
/// </summary>
/// <param name="userpic">The user's picture</param>
/// <param name="username">The name of the user</param>
/// <param name="emailID">The user's EmailID</param>
/// <param name="userstatus">The user's most recent status text</param>
/// <returns>Returns an  TSP Badge as an Bitmap Image</returns>
public static Bitmap MakeBadge(Image userpic, string username, string emailID, string userstatus)
{
 Bitmap bmp = new Bitmap(BadgeWidth, BadgeHeight);
 Graphics gf = Graphics.FromImage(bmp);
 GraphicsUnit gu = GraphicsUnit.Pixel;
 string BatchString = String.Format("{0}\n\nEMAIL:  {1}\n\nSTATUS:  {2}", username.ToUpper(CultureInfo.InvariantCulture), emailID, userstatus);
 //We are taking 60% of the bitmap space for User picture - (int)((float)BadgeHeight * (60F / 100F))
 //Write status, name etc in rest of 40% bitmap space
 float PicPer = 60F;
 float RstPer = 100F - PicPer;
 gf.Clear(Color.White);
 gf.DrawImage(userpic, new Rectangle(2, 2, BadgeWidth - 4, (int)((float)BadgeHeight * (PicPer / 100F)))); //NOTE: The rectangle here takes a non-zero based width/height so 300
 gf.DrawImage(TSPBadgeTitleBar, new Rectangle(0, 0, BadgeWidth, (int)TSPBadgeTitleBar.GetBounds(ref gu).Height));
 //TODO: Insert code to check name dosen't go out of title bar and get trimmed
 gf.DrawString(username.ToUpper(CultureInfo.InvariantCulture), new Font(new FontFamily("Arial"), 10F), Brushes.White, new PointF(5, 6));
 gf.DrawRectangle(Pens.Black, 0, 0, BadgeWidth - 1, BadgeHeight - 1); //NOTE: DrawRectangle takes a 0 based width/height so 300-1
 gf.DrawRectangle(Pens.Black, 1, 1, BadgeWidth - 3, ((int)((float)BadgeHeight * (PicPer / 100F))) + 1);
 gf.DrawRectangle(Pens.Black, 1, ((int)((float)BadgeHeight * (PicPer / 100F))) + 3, BadgeWidth - 3, ((int)((float)BadgeHeight * (RstPer / 100F))) - 5);
 gf.DrawString(BatchString, new Font(new FontFamily("Arial"), 10F), Brushes.Black, new RectangleF(5, ((int)((float)BadgeHeight * (PicPer / 100F))) + 6, BadgeWidth - 7, ((int)((float)BadgeHeight * (RstPer / 100F))) - 5), StringFormat.GenericTypographic);
 return bmp;
}

Now lets add some more methods in the class to make the MakeBadge static method accessible to instance methods and customizable too.

/// <summary>
/// Draws a TSP Badge on bitmap.
/// <para>NOTE: This function requires that all the requiremens are set already other wise it returns a null bitmap</para>
/// </summary>
/// <returns>Returns an  TSP Badge as an Bitmap Image</returns>
public Bitmap GetBadge()
{
 IsMade = false;
 Bitmap bmp = null;
 if (UserPic != null && UserName != null && EmailID != null && UserStatus != null)
 {
  bmp = TSPBadge.MakeBadge(UserPic, UserName, EmailID, UserStatus);
  IsMade = true;
 }
 return bmp;
}

/// <summary>
/// Draws a TSP Badge on bitmap with specified Image, Name, Status and EmailID.
/// </summary>
/// <param name="userpic">The user's picture</param>
/// <param name="username">The name of the user</param>
/// <param name="emailID">The user's EmailID</param>
/// <param name="userstatus">The user's most recent status text</param>
/// <returns>Returns an  TSP Badge as an Bitmap Image</returns>
public Bitmap GetBadge(Image userpic, string username, string emailID, string userstatus)
{
 IsMade = false;
 UserPic = new Bitmap(userpic);
 UserName = username.ToUpper(CultureInfo.InvariantCulture);
 EmailID = emailID;
 UserStatus = userstatus;
 Bitmap bmp = TSPBadge.MakeBadge(UserPic, UserName, EmailID, UserStatus);
 IsMade = true;
 return bmp;
}

That's all Happy Coding :)