Build a Managed C# Playing Card UserControl
by Peter A. Bromberg, Ph.D.

Peter Bromberg

"Do not worry about your difficulties in Mathematics. I can assure you mine are still greater." --Einstein

Not long ago, as I was going through some of the trials and tribulations involved in deploying .NET UserControls via CAB files to run in the browser (if you need enlightenment, check my UnBlog on this one - its a killer...), I experimented by creating several UserControls. One of the code samples I came across was a playing cards control ActiveX written in ATL C++, and it had a whole set of playing card images. I reasoned, "this will be fun- I'll make a managed C# version using the bitmaps embedded as resources, and I can test it with some additional unmanaged code calls".

So, I did. Now, this is not a perfect example of OOP programming and best practices coding style, because I really kind of "threw it together". However, it's pretty much feature complete. My basic idea here was to create a UserControl that represents a single playing card. What would this object need? Well, obviously you would need to generate a face, and a back (for a card that's face down). You'd need a "Flip" method to "turn the card over". You'd also need some sort of RandomCard method to generate a random card face (for various card games and so on). That, I think, is the bare minimum.

So let's see how I approached this. First, I created a Card class, as follows:

using System;
using System.Drawing.Imaging;
using System.Drawing ;
using System.IO;
using System.Reflection ;
namespace Cards
{ 
 public enum  CardResource
{
  clubA,
  club2,
  club3,
  club4,
  club5,
  club6,
  club7,
  club8,
  club9,
  club10,
  clubJ,
  clubQ,
  clubK,
  diamondA,
  diamond2,
  diamond3,
  diamond4,
  diamond5,
  diamond6,
  diamond7,
  diamond8,
  diamond9,
  diamond10,
  diamondJ,
  diamondQ,
  diamondK,
  heartA,
  heart2,
  heart3,
  heart4,
  heart5,
  heart6,
  heart7,
  heart8,
  heart9,
  heart10,
  heartJ,
  heartQ,
  heartK,
  spadeA,
  spade2,
  spade3,
  spade4,
  spade5,
  spade6,
  spade7,
  spade8,
  spade9,
  spade10,
  spadeJ,
  spadeQ,
  spadeK,
  bigJoker,
  smallJoker,
  backside1,
  backside2
}

 public enum CardName
 {
  AceClub,
  TwoClub,
  ThreeClub,
  FourClub,
  FiveClub,
  SixClub,
  SevenClub,
  EightClub,
  NineClub,
  TenClub,
  JackClub,
  QueenClub,
  KingClub,
  AceDiamond,
  TwoDiamond,
  ThreeDiamond,
  FourDiamond,
  FiveDiamond,
  SixDiamond,
  SevenDiamond,
  EightDiamond,
  NineDiamond,
  TenDiamond,
  JackDiamond,
  QueenDiamond,
  KingDiamond,
  AceHeart,
  TwoHeart,
  ThreeHeart,
  FourHeart,
  FiveHeart,
  SixHeart,
  SevenHeart,
  EightHeart,
  NineHeart,
  TenHeart,
  JackHeart,
  QueenHeart,
  KingHeart,
  AceSpade,
  TwoSpade,
  ThreeSpade,
  FourSpade,
  FiveSpade,
  SixSpade,
  SevenSpade,
  EightSpade,
  NineSpade,
  TenSpade,
  JackSpade,
  QueenSpade,
  KingSpade,
  BigJoker,
  SmallJoker,
  Backside1,
  Backside2
 }

 public class Card
 {
  public Bitmap CardPic=null;
  public Card()
  {    
  }
  public Card( Cards.CardName cardName)
  {     
   string resourceName =   ((Cards.CardResource)(int)cardName).ToString();
   Bitmap bmp; 
   Assembly a = Assembly.GetExecutingAssembly(); 
   string fullResName="Cards."+resourceName+".bmp";
   Stream strm= a.GetManifestResourceStream(fullResName); 
   bmp = new Bitmap (strm); 
   this.CardPic=bmp;
  }
 }
}

Note above that there are two enums - CardResource, and CardName. The reason I did this is because the bitmaps all correspond to the CardResource enum, but the names are not "user friendly". So instead of renaming all the bitmaps, I just created a second enum with friendly names, and decided I would add some translation code to map one to the other. So that's why in the constructor I have this:

string resourceName = ((Cards.CardResource)(int)cardName).ToString();

The rest is simply extracting the named bitmap and assigning it to a public Bitmap field, "CardPic". Easy! So now we have a class that represents "a card". Next, I whipped up my UserControl Class that acts as the "container" for a "Card":

using System.ComponentModel;
using System.Drawing;
using System.Data;
using System.Windows.Forms;

namespace Cards
{
 public class CardControl : System.Windows.Forms.UserControl
 {
  private System.Windows.Forms.PictureBox pictureBox1;
  private Cards.Card theCard=null;
  private string _cardName=String.Empty;
  private System.ComponentModel.Container components = null;
  private bool FaceUp;
  private static Random r= new Random((int)DateTime.Now.Ticks);

  public CardControl()
  {
    InitializeComponent();
   object o= Enum.Parse(typeof(Cards.CardName),"Backside1",true);
      this._cardName ="Backside1";
   this.FaceUp =false;
   Cards.CardName cn =  (Cards.CardName)o;
   this.theCard =new Card(cn);
   this.pictureBox1.Image =this.theCard.CardPic ;
   if(this._cardName!="Backside1")this.FaceUp =true;
   this.pictureBox1.Refresh();
  }

  public string CardName
  {
   get
   {
    return null;
   }
   set
   {
    try
    {
     if(value==null)return;
     if(value!="Backside1")
     this._cardName =value;
     object o= Enum.Parse(typeof(Cards.CardName),_cardName,true);
     Cards.CardName cn =  (Cards.CardName)o;
     this.theCard =new Card(cn);
     if(this._cardName!="Backside1")this.FaceUp =true;
     this.pictureBox1.Image =this.theCard.CardPic ;
     this.pictureBox1.Refresh();
    }
    catch
    {
     throw new ArgumentException("Incorrect Card Name.");
     }
   }
    }
  
  public void Flip()
  {   
   if(this.FaceUp==true)
   {
     string cardName="Backside1";
    object o= Enum.Parse(typeof(Cards.CardName),cardName,true);    
    Cards.CardName cn =  (Cards.CardName)o;
    this.theCard =new Card(cn);
    this.pictureBox1.Image =this.theCard.CardPic ;
    this.pictureBox1.Refresh();
    this.FaceUp =false;
   }
   else
   {
    this.CardName=_cardName;
    this.FaceUp =true;
    this.Refresh();
   }
  }
  
  public CardControl(string cardName)
  {   
   InitializeComponent();
           object o= Enum.Parse(typeof(Cards.CardName),cardName,true);
   this._cardName =cardName;
   Cards.CardName cn =  (Cards.CardName)o;
   this.theCard =new Card(cn);
   this.pictureBox1.Image =this.theCard.CardPic ;
   this.pictureBox1.Refresh();
  }

  public void RandomCard()
  {  
   int resId =r.Next(0,52);    
   Cards.CardName cn=(Cards.CardName)resId;
   string cardName=cn.ToString();
   this._cardName =cardName;    
    this.theCard =new Card(cn);   
   this.pictureBox1.Image =this.theCard.CardPic ;
   this.pictureBox1.Refresh();
  }

  protected override void Dispose( bool disposing )
  {
   if( disposing )
   {
    if( components != null )
     components.Dispose();
   }
   base.Dispose( disposing );
  }

  #region Component Designer generated code
  
  private void InitializeComponent()
  {
   this.pictureBox1 = new System.Windows.Forms.PictureBox();
   this.SuspendLayout();
    
   this.pictureBox1.Location = new System.Drawing.Point(0, 0);
   this.pictureBox1.Name = "pictureBox1";
   this.pictureBox1.Size = new System.Drawing.Size(71, 104);
   this.pictureBox1.SizeMode = System.Windows.Forms.PictureBoxSizeMode.StretchImage;
   this.pictureBox1.TabIndex = 0;
   this.pictureBox1.TabStop = false;
   
   this.Controls.Add(this.pictureBox1);
   this.Name = "CardControl";
   this.Size = new System.Drawing.Size(71, 104);
   this.Load += new System.EventHandler(this.CardControl_Load);
   this.ResumeLayout(false);

  }
  #endregion

  private void CardControl_Load(object sender, System.EventArgs e)
  {
  
  }
 }
}

The UserControl is like a baby "windows form" face that's exactly the same size as a Card Bitmap. It has a PictureBox control on it to display the selected Card class's CardPic Bitmap, as well as all the "engine" code that handles the various methods we need as described above. The result is a pretty easy to use UserControl that you can host in a web page (Hey, don't come after me about security issues - read my UnBlog piece first!).

I've included a sample web page that you can use to give the CardControl a workout. The partial code looks like so:

A sample display from the above HTML in the browser:

 

The downloadable solution below has a Windows Forms test app that has card controls on it, along with some buttons that exercise the methods. Enjoy!

Download the Visual Studio.Net Solution that accompanies this article


Peter Bromberg is a C# MVP, MCP, and .NET consultant who has worked in the banking and financial industry for 20 years. He has architected and developed web - based corporate distributed application solutions since 1995, and focuses exclusively on the .NET Platform.
Article Discussion: