Dartboard User Control in C#

• Download demo project - 7 Kb
• Download source - 50 Kb

Introduction

When I play darts with my friends at home we have a laptop with us to hold scores and statistics. We used Excel to do the job, but I was encouraged to build a more sophisticated solution. So, I came up with the idea to click on a dartboard picture to calculate the scores thrown and the statistics. So this article shows the usercontrol and the delegates/events I used.

Using the code

There are 2 interesting parts in this challenge:

• How to determine the score based on a click somewhere on the dartboard;
• Using delegates and events;

For the first part I used the middle of the bull (that is the middle of the picture) as my base point (0,0). Since I know the X and Y coordinate I can calculate the degrees by using the atan() function.

double  dblHoekInRadians  = System.Math.Atan2(  posY ,  posX  );
double  dblHoekInGraden  = dblHoekInRadians * 180 / System.Math.PI;

When I know the degrees I know which number was clicked. The dartboard has 20 slices of equal size. So, each slice is of 360 / 20 = 18 degrees. Remember, the middle is my base, so number 13 is between 9 and 27 degrees and number 4 is between 27 and 45.

The next thing to do is to check which ring was clicked (bull, triple, double or else just single). I calculated the distince from the base (0,0) to the clicked X,Y coordinate. Now, the Pythagoras guy is entering our life!

double  dblLengte  = System.Math.Sqrt(  posX * posX  +  posY * posY );
int  intLengte  = (int)System.Math.Floor(  dblLengte  );

Well, this was the hard part.

The next thing is to develop some events to be raised. I chose to have 4 events: NoScoreThrown, SingleScoreThrown, DoubleScoreThrown and TripleScoreThrown. I declared them like this:

public event NoScoreThrownEventHandler  NoScoreThrown ;
protected virtual void OnNoScoreThrown( DartbordEventArgs  e  )
{
  if(  NoScoreThrown  != null )
  {
    NoScoreThrown( this,  e  );
  }
}

For these events I used 4 delegates:

//Declare the delegates for each event
public delegate void NoScoreThrownEventHandler( object  sender , 
  DartbordEventArgs  e  );
public delegate void SingleThrownEventHandler( object  sender , 
  DartbordEventArgs  e  );
public delegate void DoubleThrownEventHandler( object  sender , 
  DartbordEventArgs  e  );
public delegate void TripleThrownEventHandler( object  sender , 
  DartbordEventArgs  e  );

I also defined my own EventArgs with specific data about the scores and throws.

/// <SUMMARY>
/// Holds data about the score and throw
/// </SUMMARY>
public class  DartbordEventArgs  : EventArgs
{
  private readonly int  mintScore ;
  private readonly string  mstrScore ;
  private readonly int  mintThrow ;

  //Constructor
  public DartbordEventArgs( int  Score , string  ScoreText , int  Throw  )
  {
    this.mintScore =  Score ;
    this.mstrScore =  ScoreText ;
    this.mintThrow =  Throw ;
  }

  #region Properties
  public int  Score
  {
    get
    {
      return mintScore;
    }
  }

  public string  ScoreText
  {
    get
    {
      return mstrScore;
    }
  }

  public int  Throw
  {
    get
    {
      return mintThrow;
    }
  }
  #endregion

}

Based on the score thrown I raise the right event. I used a class variable (boolean) to know whether I hit a single, double, triple or noscore.

//Raise the event(s)
DartbordEventArgs  dea  = new DartbordEventArgs(  mintScore ,  
  mstrScoreText ,  mintThrow  );

if(  mIsTriple  ) OnTripleThrown( dea );
if(  mIsDouble  ) OnDoubleThrown( dea );
if(  mIsSingle  ) OnSingleThrown( dea );
if(  mIsNoScore  ) OnNoScoreThrown( dea );

That's basically it. Have fun!