
Übung #2: Spielfeld verschönern
Mmmmmoin und willkommen zur zweiten Übung im WPF-Übungskurs für 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):
- WPF Projekt erstellen
MainWindow
anpassen- Erstelle ein
Grid
als Basis für das Spielfeld - 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:
- 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.
- Wähle eine dunklere Farbe für den Hintergrund. Probiere verschiedene bis dir eine gefällt. (Ich verwende das “LernMoment”-Türkis
- Erstelle nun einen
Style
der alleButtons
mit diesem Aussehen versieht. - 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! - [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:
- 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 ;-). - Eine Einführung in das Thema
Style
gebe ich dir in diesem Artikel. - Dafür brauchst du einen EventHandler für das
Button.Click
Event. Darin kannst du dann die entsprechenden Eigenschaften desButton
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