
Ü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):
- Eine Gewinnreihe ermitteln
- Alle Gewinnreihen ermitteln
- Gewinner anzeigen
- Gewinnreihe im Spielfeld hervorheben
- 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:
Um das zu erreichen, kannst du folgende Schritte umsetzen:
- Platziere ein
Label
über der mittleren Zeile desSpielfeld
. Solange du keinen Hinweis anzeigen möchtest, bekommt dasLabel
einen leerenstring
alsContent
. - Zeige den Hinweis “Dieses Kästchen ist bereits belegt! Wähle ein anderes.” im
Label
an (vorher war er in einerMessageBox
). 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. - Zeige den Spielstand beim Spielende im
Label
an. Auch dieser Hinweis soll beim nächsten Klick ausgeblendet werden. - Verbessere die Sichtbarkeit der Hinweise in dem du dem
Label
eine halbtransparente Hintergrundfarbe verpasst. - Verwende eine Eigenschaft des
Label
um es wirklich auszublenden (nicht nur denContent
auf einen leerenstring
setzen), wenn es nicht benötigt wird. - Ü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.
- [optional] Blende den Hinweis aus Schritt 2 (“Kästchen belegt!”) automatisch nach 2-3 Sekunden wieder aus.
- [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
- Falls du nochmals eine Auffrischung brauchst wie du das
Label
imGrid
platzieren kannst, sollte dich dieser Artikel von mir weiterbringen. - Dazu kannst du bei einem Klick überprüfen ob momentan etwas im
Content
vomLabel
steht und wenn ja, dann setzt du es aufstring.Empty
zurück. So verschwindet dasLabel
nicht komplett, aber darum kümmern wir uns gleich. - siehe 2.
- 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 😁. - Sofern du dich noch nicht mit
Visibility
undIsEnabled
auseinander gesetzt hast, findest du in meinem Artikel alles was du brauchst um die Aufgabe zulösen. - Dazu sage ich erstmal nichts. In der Lösung zu dieser Aufgabe wird es ein komplettes Video dazu geben.
- 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.
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