Übung #5: Hinweise im Spiel anzeigen

Übung #5: Hinweise im Spiel anzeigen

Mmmmmoin und willkommen zur fünften Übung im WPF-Übungskurs für Einsteiger!

Herzlichen Glückwunsch! Du solltest heute bereits eine funktionierende WPF-Anwendung vor dir haben. Ab nun geht es darum, dass wir sie weiter optimieren. Dazu werden wir uns heute nochmals dem Thema Bedienerfreundlichkeit widmen. Das “ewige” bestätigen von MessageBox-Dialogen ist nicht wirklich der Hit. Daher wirst du heute die Hinweise direkt auf dem Spielfeld anzeigen.

Bevor ich dir jedoch die neue Aufgabe zeige, hier erstmal die Musterlösung zur vorherigen Übung!

Musterlösung der letzten Aufgabe

Musterlösung: Hier meine Musterlösung als zip-Datei.

Musterlösung Schritt-für-Schritt (durch Klick auf die Links siehst du die Änderungen im Quellcode von einem Schritt zum nächsten):

  1. Eine Gewinnreihe ermitteln
  2. Alle Gewinnreihen ermitteln
  3. Gewinner anzeigen
  4. Gewinnreihe im Spielfeld hervorheben
  5. Ist bereits in den vorherigen Schritten enthalten

Alternative: Mir gefällt nicht, dass in der bisherigen Musterlösung die Markierung der Gewinnreihe in der Methode IstSpielGewonnen() gemacht wird. Der Methodennamen IstSpielGewonnen() impliziert für mich, dass nur eine Abfrage stattfindet und keine Änderung. Daher habe ich noch eine Alternative umgesetzt. Hier findest du die Alternative mit der Methode SucheGewinnReihe().

Fragen & Rückmeldung: Wenn du Fragen hast oder Rückmeldung zu deiner aktuellen Umsetzung von TicTacToe haben möchtest, schreibe mir doch ein Issue hier auf GitHub. Damit können andere auch an der Diskussion teil haben. Hier findest du Links zu den Lösungen von anderen Teilnehmern dieses Übungskurses. Ich würde mich sehr freuen auch deine Lösung dort zu verlinken. Schick mir einfach den Link zu deinem GitHub-Repository.

Die neue Aufgabe

Die Anzeige von Hinweisen (insbesondere das Spielresultat) über eine MessageBox ist okay, aber auch nicht wirklich toll. Darum soll heute die Anzeige von Hinweisen direkt in das MainWindow integriert werden. Das Resultat könnte dann ungefähr so aussehen:

Mein TicTacToe mit Spiel gewonnen Label

Um das zu erreichen, kannst du folgende Schritte umsetzen:

  1. Platziere ein Label über der mittleren Zeile des Spielfeld. Solange du keinen Hinweis anzeigen möchtest, bekommt das Label einen leeren string als Content.
  2. Zeige den Hinweis “Dieses Kästchen ist bereits belegt! Wähle ein anderes.” im Label an (vorher war er in einer MessageBox). Blende den Hinweis aus, wenn ein weiteres Mal auf das Spielfeld geklickt wird. Hinweis: Du kannst den Text z.B. auf “Kästchen belegt” verkürzen.
  3. Zeige den Spielstand beim Spielende im Label an. Auch dieser Hinweis soll beim nächsten Klick ausgeblendet werden.
  4. Verbessere die Sichtbarkeit der Hinweise in dem du dem Label eine halbtransparente Hintergrundfarbe verpasst.
  5. Verwende eine Eigenschaft des Label um es wirklich auszublenden (nicht nur den Content auf einen leeren string setzen), wenn es nicht benötigt wird.
  6. Überlege dir welche Szenarien du testen solltest, führe die Tests durch und beschreibe als Kommentar an diesem Issue deine Testfälle, die Testresultate und eventuell gefundene Fehler.
  7. [optional] Blende den Hinweis aus Schritt 2 (“Kästchen belegt!”) automatisch nach 2-3 Sekunden wieder aus.
  8. [optional] Sofern du es noch nicht getan hast, mache einen Commit für deine ganzen Änderungen und schiebe alles via Sync auf GitHub.

Lösungshinweise

  1. Falls du nochmals eine Auffrischung brauchst wie du das Label im Grid platzieren kannst, sollte dich dieser Artikel von mir weiterbringen.
  2. Dazu kannst du bei einem Klick überprüfen ob momentan etwas im Content vom Label steht und wenn ja, dann setzt du es auf string.Empty zurück. So verschwindet das Label nicht komplett, aber darum kümmern wir uns gleich.
  3. siehe 2.
  4. Es gibt verschiedene Möglichkeiten dem Hintergrund eines Steuerelementes eine Transparenz zu geben. Eine Möglichkeit ist, dass du den Alpha-Kanal der Background-Eigenschaft verwendest. Das kannst du am einfachsten im Eigenschaften-Fenster machen. Weiter unten findest du ein Bild welches dir hoffentlich hilft. Mehr zum Thema Transparenz gibt es in einem separaten Artikel. Den muss ich aber erst noch schreiben 😁.
  5. Sofern du dich noch nicht mit Visibility und IsEnabled auseinander gesetzt hast, findest du in meinem Artikel alles was du brauchst um die Aufgabe zulösen.
  6. Dazu sage ich erstmal nichts. In der Lösung zu dieser Aufgabe wird es ein komplettes Video dazu geben.
  7. Im Ballspiel-Projekt auf YouTube habe ich bereits einen DispatcherTimer verwendet. Vielleicht bringt dich das in die richtige Richtung.

Hier noch das Bild wo du den Alpha-Kanal im Eigenschaft-Fenster in Visual Studio findest. Dazu gehst du erst im XAML auf das Label und wählst dann im Eigenschaften-Fenster erst Pinsel und dann Background aus.

Alpha-Kanal im Eigenschaften-Fenster

In wenigen Tagen bekommst du eine weitere Mail von mir mit meiner Musterlösung und der nächsten Teilaufgabe.

Bis dahin wünsche ich dir viel Spaß beim Üben

Jan von LernMoment.de