TicTacToe-WPF-Übungskurs - Spielfeld verschönern

Mmmmmoin und willkommen zur zweiten Übung im TicTacToe Übungskurs für WPF Einsteiger!

Heute geht es darum, dass wird das Spielfeld etwas schöner machen wollen. In der ersten Übung habe ich dir dazu schon einiges über das Grid erklärt. Jetzt lernst du eine der mächtigsten Funktionen für die Gestaltung der Oberfläche in WPF kennen. Du sollst nämlich heute einen Style anlegen der allen Button im Spielfeld ein einheitliches Aussehen gibt.

Bevor ich nun jedoch weiter ins Detail bezüglich der neuen Aufgabe gehe, hier die Lösung der ersten Aufgabe.

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. WPF Projekt erstellen
2. MainWindow anpassen
3. Erstelle ein Grid als Basis für das Spielfeld
4. Fügt in jedes Kästchen einen Button ein

Die neue Aufgabe

Für die “Verschönerung” des Spielfelds darfst du heute einen neuen Style anlegen:

1. Mach das Layout für einen Button (z.B. den oben links) über seine Eigenschaften:
   • Wähle eine dunklere Farbe für den Hintergrund. Probiere verschiedene bis dir eine gefällt. (Ich verwende das “LernMoment”-Türkis #00A8C6)
   • Wähle eine hellere Farbe für die Schrift. Probiere verschiedene bis dir eine gefällt. (Ich verwende das “LernMoment”-Beige #F9F2E7)
   • Erhöhe die Schriftgröße so das es “gut” ;-) aussieht. (Ich verwende 70)
   • Die Buttons sollen eine dünne Abgrenzung zu einander haben die nicht zu hell und nicht zu dunkel ist.
2. Erstelle nun einen Style der alle Buttons mit diesem Aussehen versieht.
3. Beim Klick auf einen Button deiner Wahl (z.B. wieder oben links) soll die Hintergrundfarbe und die Textfarbe invertiert werden. (Dieses braucht nur einmalig geschehen, weil wir in der nächsten Übung noch weitere Änderungen vornehmen.) Hinweis: Lösung in MainWindow.xaml.cs (code-behind) und nicht XAML!
4. [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

Durch den ersten Schritt in dieser Aufgabe sollte es dir möglich sein erstmal die “richtigen” Eigenschaften am Button zufinden. Wenn du die gefunden hast, dann kannst du sie in einen Style übernehmen.

Konkretere Hinweise zu den einzelnen Schritten findest du hier:

1. Auf Microsoft Docs findest du eine Auflistung aller Eigenschaft eines Button. Ja, es ist ziemliche Sucherei, aber das ist halt das Leben eines C# Entwicklers ;-).
2. Eine Einführung in das Thema Style gebe ich dir in diesem Artikel.
3. Dafür brauchst du einen EventHandler für das Button.Click Event. Darin kannst du dann die entsprechenden Eigenschaften des Button auch im C# Quellcode anpassen. Wie du einen solchen EventHandler anlegst zeige ich dir hier im BallSpiel Projekt. Mehr über Maus- und Tastatur- Events gibts im 2. Teil des BallSpiel Projekts.

Weiterführende Artikel / Videos

• Eine gute Einführung in das Thema Style gibt es auch im freiverfügbaren Openbook von Rheinwerk Computing.
• Im Artikel Exemplarische Vorgehensweise: Erstellen einer Schaltfläche mit XAML auf Microsoft Docs gibt es ein umfangreiches Tutorial mit wesentlich mehr Optionen für das Styling eines Button. Allerdings wird es zum Ende schon etwas anspruchsvoller.

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

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

Jan von LernMoment.de