[C#] Countdown mit Timer erstellen

Drucken
( 4 Votes )
Hauptkategorie: Programmieren Kategorie: C#
Erstellt am 13.12.2011 Zuletzt aktualisiert am 23.04.2012 Geschrieben von Jonny132
Heute Zeige ich euch wie man einfach einen Countdown mit C# und Hilfe des Timer - Controls erstellen kann.
Dazu erstellen wir ein neues Windows Forms Projekt und wechseln in die Codeansicht der Form.
Für dieses Beispiel benötigen wir einiges an globalen Variablen. Man könnte Sie zwar auch zum späteren Zeitpunkt erst erstellen, aber wir wollen Speicherschonend Programmieren.

Globale Variablen

 string countDownString;
 Font countDownStringFont;
 SolidBrush countDownBrush;
 DateTime endTime;
 Timer timer;
countDownString: Beinhaltet den aktuellen Wert des Countdowns zur Anzeige.
countDownStringFont: Beinhaltet das Font das verwendet werden soll für die Countdownanzeige.
countDownBrush: Beinhaltet den Brush (die Farbe) der Countdownanzeige.
endTime: Beinhaltet den Wert, wann der Countdown auf 0 sein muss.
timer: Die Timer instanz um die Countdownanzeige zu aktualisieren.

Im nächsten Schritt werden im Form Load Ereigniss die Variablen initialisiert, die benötigten Events registriert und Eigenschaften zur korrekten Darstellung gesetzt. Zu Schluss wird der Timer gestartet.

Form Load Ereigniss    

 private void Form1_Load(object sender, EventArgs e)
 {
   // Initialisieren
   timer = new Timer();
   countDownStringFont = new Font(new FontFamily("Arial"), 50,
                                  FontStyle.Bold);
   countDownBrush = new SolidBrush(Color.Green);
   endTime = DateTime.Now.AddSeconds(7200);
 
   // Events registrieren
   timer.Tick += new EventHandler(timer_Tick);
   this.Paint +=new PaintEventHandler(Form1_Paint);
 
   // Eigenschaften setzen und Timer starten
   this.DoubleBuffered = true;
   this.ResizeRedraw = true;
   timer.Interval = 50;
   timer.Start(); 
 }
endTime: Wir addieren zum jetztigen Zeitpunkt 7200 Sekunden. Das ergibt einen Countdown Wert von 2 Stunden.
DoubleBuffered - Eigenschaft: Diese wird auf true gesetzt um ein mögliches Flackern der Form bzw. des Countdowns zu verhindern.
ResizeRedraw - Eigenschaft: Damit wird der Form gesagt, dass falls der User die Formgröße verändert, das Form - Paint Event automatisch aufgerufen wird, da wir den Countdown mittig auf der Form platzieren wollen.
Timer Interval - Eigenschaft: Gibt an wie oft das Tick - Ereigniss eintreten soll (Wert 50 für alle 50 Millisekunden)

Kommen wir nun zum Interessanten Teil. Das Timer Tick Event.

Timer Tick Event

private void timer_Tick(object sender, EventArgs e)
 {
   TimeSpan leftTime = endTime.Subtract(DateTime.Now);
   if (leftTime.TotalSeconds < 0)
   {
     countDownString = "00:00:00:00";
     countDownBrush.Color = Color.Red;
     Refresh();
     timer.Stop();
     MessageBox.Show("Countdown abgelaufen!");
   }
   else
   {
      countDownString = leftTime.Hours.ToString("00") + ":" +
        leftTime.Minutes.ToString("00") + ":" +
        leftTime.Seconds.ToString("00") + ":" +
         (leftTime.Milliseconds / 10).ToString("00");
      Refresh();
   }
 }
Zuerst finden wir heraus wieviel Zeit noch übrig ist indem wir der EndZeit den jetztigen Zeitpunkt abziehen.
Dann überprüfen wir, ob der Countdown vorbei ist oder nich. Ist er Vorbei, wird der CountdownString auf einen "NullString" gesetzt und dem Brush geben wir die Farbe Rot um das Ende mehr ersichtlich zu machen. Dann rufen wir Refresh auf um ein neuzeichnen zu erzwingen.
Da der Countdown fertig ist, können wir den Timer Stoppen.
Zuletzt geben wir noch eine Meldung aus, dass der Countdown fertig ist.
Wenn der Countdown noch nicht zu Ende ist, weisen wir dem globalen countDownString die verbleibende Zeit hinzu. Mit der ToString Methode stellen wir sicher, dass immer 2 Ziffern angezeigt werden ( zB 08).
Auch hier rufen wir wiederrum die Refresh - Methode auf um ein neuzeichnen zu erzwingen.

Wenn Sie nun das Projekt starten, passiert noch nicht viel. Es fehlt noch das Paint - Ereignis in dem der eigentliche Countdown gezeichnet wird.

Form Paint Ereigniss

 private void Form1_Paint(object sender, PaintEventArgs e)
 {
   Size stringSize = Size.Ceiling(
       e.Graphics.MeasureString(countDownString,countDownStringFont));
       e.Graphics.DrawString(countDownString, countDownStringFont,
           countDownBrush, ((this.Width - 4) / 2) - (stringSize.Width / 2),
           ((this.Height - 32) / 2) - (stringSize.Height/ 2));
 }
Hier rechnen wir uns zuerst aus wie groß der String in Pixeln ist der gezeichnet werden soll. Diesen brauchen wir, weil wir den Countdown mittig in der Form anzeigen wollen.
Dann wird per Graphics.DrawString der eigentliche Countdown gezeichnet.Nun können Sie Ihren persönlichen Countdown testen:

1. Start des Countdowns
Countdown Start

2. Resize der Form
Countdown Resize

3. Ende des Countdowns
Countdown fertig

  • Laroix

    schrieb am 2013-05-28 22:37:14

    Yo! Ich weiß, ich grad hier grad wieder altes zeug aus, aber dieses kleine Tut hat mir echt extrem weitergeholfen, vorallem auch gut erklärt.
    Nun allerdings stellt sich mir noch eine Frage. Ich mochte sie in meiner Form unten rechts haben, sozusagen als "Nebensache".
    Dieser hier stellt sich allerdings immer in die Mitte des Bildschirmes. Ich hab schon versucht an denn letzten Zeilen die Werte usw. zu verändern, allerdings tauchen da nur Fehlermeldungen auf.

    Hoffe du kannst mit weiterhelfen ^^

    MFG Laroix

    Auf Kommentar antworten

    • Jonny132

      schrieb am 2013-05-29 10:36:38

      Hallo Laroix,

      freut mich, dass dir dieses Tutorial geholfen hat.

      Um den Countdown rechts unten Anzeigen zu lassen, müsstest du im Paint-Ereignis diese Zeile:

      e.Graphics.DrawString(countDownString, countDownStringFont, countDownBrush, ((this.Width - 4) / 2) - (stringSize.Width / 2), ((this.Height - 32) / 2) - (stringSize.Height/ 2));

      ersetzen durch diese:
      e.Graphics.DrawString(countDownString, countDownStringFont, countDownBrush, this.Width - 4 -stringSize.Width, this.Height - 32 - stringSize.Height);

      Auf Kommentar antworten

      • Laroix

        schrieb am 2013-05-29 15:10:00

        Hey,

        witziger weise habe ich es, fast direkt nachdem ich dich gefragt habe, selbst rausbekommen ... :P
        Trotzdem danke für die überraschend schnelle antwort. Dachte eig. das hier wäre sowas wie ein ausgestorbener Thread ;P

        MFG Laroix

        Auf Kommentar antworten

  • Sali

    schrieb am 2013-05-24 11:36:15

    Ich möchte einen Funktion alle 3 Sekunden aufrufen. Ist so etwas möglich?

    Auf Kommentar antworten

    • Jonny132

      schrieb am 2013-05-27 11:57:13

      Hallo Sali,

      klar ist sowas Möglich.
      Einfach den Intervall auf 3000 (= 3 Sekunden) setzen und im Tick-Ereignis des Timers die Funktion aufrufen.

      Auf Kommentar antworten

  • Tim

    schrieb am 2013-05-14 13:12:45

    Echt gutes Tutorial. Dank dieser Anleitung konnte ich mir meinen "Feierabend-Timer" erstellen. Zur Zeit lese ich ich "endtime" aus einer .cfg-Datei aus. Später will ich zum Start des Programms die Endzeit per UI ermitteln.

    Auf Kommentar antworten

  • martin

    schrieb am 2012-10-02 16:07:56

    Hallo,
    das ist ein schönes Tutorial.
    Eine Frage habe ich aber: und zwar die Variable endTime wird nie gelesen, warum?
    danke + grüße
    mart

    Auf Kommentar antworten

    • Jonny132

      schrieb am 2012-10-02 16:19:48

      Hallo Martin,

      die Variable "endTime" wird am Anfang vom Countdown errechnet. Danach wird sie nurnoch zum Rechnen verwendet um herauszufinden wieviel Zeit noch bis endTime ist.

      Genauergesagt passiert dies in dieser Zeile:
      TimeSpan leftTime = endTime.Subtract(DateTime.Now);

      Auf Kommentar antworten

  • dgasg

    schrieb am 2012-09-25 10:51:41

    das geht nicht

    Auf Kommentar antworten

    • Jonny132

      schrieb am 2012-09-25 15:34:06

      Hallo,

      "das geht nicht" ist leider eine ungenaue Fehlerbeschreibung ;)
      Falls du Probleme mit dem Tutorial hast, schreib doch im Forum und beschreibe was genau nicht geht. So kann ich dir leider nicht helfen.

      Auf Kommentar antworten

  • Erwin

    schrieb am 2012-04-14 16:33:06

    Schönes Tutorial, werde es in den nächsten Monaten wieder zur Hand nehmen :))

    Auf Kommentar antworten

Veröffentlichen Sie ihre Kommentare ...