Erforschung des C#-Formulardesigns mit Tim Corey — Ein geführter Rundgang

Einführung in die Formularerstellung

Tim beginnt damit, uns zu Lektion sieben willkommen zu heißen und den Zweck klar zu benennen: Wir erstellen die Formulare. Er erinnert uns daran, dass dies ähnlich wie die Arbeit an der Klassenbibliothek ist, aber jetzt implementieren wir das eigentliche UI basierend auf unseren früheren Planungsskizzen. Tim merkt an, dass wir versucht sein könnten, in dieser Phase Code hinzuzufügen, aber er fordert uns auf, uns nur auf den Bau der Formulare zu konzentrieren.

Er erklärt auch, dass unsere vorherigen Entwürfe grobe Skizzen waren und wir jetzt die Formulare gut aussehen lassen sollen. Tim erklärt, dass der Design-Leitfaden wichtig ist und obwohl er nicht das Experimentieren zeigt, das er durchgemacht hat, wird er uns die Endergebnisse zeigen. Er weist auch darauf hin, dass die Entwürfe aus dem Planungsschritt vier die Grundlage für diese Lektion sind und schlägt vor, bei Bedarf auf diese Entwürfe zurückzugreifen.

Neues Projekt hinzufügen und eine Windows Forms-Anwendung starten

Tim zeigt uns, wie man ein neues Projekt zur Lösung hinzufügt. Im Solution Explorer klickt er mit der rechten Maustaste auf die Lösung, wählt Neues Projekt hinzufügen und entscheidet sich für Windows Form Application. Dies erstellt einen neuen Projekttyp speziell zum Aufbau von Windows-Desktop-Anwendungen. Er nennt das Projekt Tournament Tracker UI.

Er erklärt, dass die standardmäßige Form1.cs-Datei automatisch generiert wird, wenn eine Windows-Forms-App erstellt wird. Da die App ein Startformular benötigt, beschließt Tim, es nicht zu löschen. Stattdessen benennt er die Datei und die Klasse in TournamentViewerForm um und akzeptiert die Aufforderung, alle Verweise umzubenennen. Dies stellt sicher, dass das Hauptfenster der Anwendung korrekt läuft.

Die Formularklasse umbenennen

Tim betont, dass Sie ein Formular haben müssen, das in einer Windows Forms-Anwendung läuft. Er erklärt, dass Sie, wenn Sie das standardmäßige Form1.cs löschen, den Einstiegspunkt in Program.cs manuell aktualisieren müssen. Um diese Komplexität zu vermeiden, benennt Tim das Formular einfach um. Dies ist ein typischer Schritt beim Starten einer Windows Forms-App: die Klasse und die Datei entsprechend dem Zweck des Projekts umbenennen.

Das Eigenschaftenfenster verwenden

Tim zieht das Eigenschaftenfenster heraus und beginnt, die Eigenschaften des Formulars zu ändern. Er ändert die Texteigenschaft in "Tournament Viewer", sodass die Titelleiste den richtigen Namen anzeigt.

Als nächstes ändert er die Hintergrundfarbe vom standardmäßigen Visual Studio-Grau in Weiß und erklärt, dass Weiß moderner ist und nicht von den Inhalten des Formulars ablenkt. Dies ist Teil der Erstellung eines Design-Leitfadens für das UI.

Er ändert dann die Schriftart auf eine moderne 16-Punkt-Schriftart und erklärt, warum dies frühzeitig getan werden sollte: Später hinzugefügte Steuerelemente erben die neue Schriftart automatisch. Tim erklärt, dass dies ein wichtiger Tipp zum effizienten Erstellen von Formularen ist.

Das Symbol und die Ressourcen ändern

Tim ändert das Symbol des Formulars, indem er eine benutzerdefinierte Symboldatei importiert. Er erklärt, dass er ein kostenloses Tool namens Metro Studio verwendet hat, um das Symbol zu erstellen. Dies hilft ihm, das Schreiben oder Entwerfen von Symbolen von Grund auf zu vermeiden. Er merkt auch an, dass er dasselbe Symbol auf allen Formularen verwenden wird, um ein einheitliches Erscheinungsbild der Anwendung zu schaffen.

Kontrollen zum Formular hinzufügen

Tim beginnt mit dem Aufbau des UI, indem er Steuerelemente aus der Toolbox auf das Formular zieht. Er fügt ein Kopfzeilen-Label hinzu und ändert dessen Eigenschaften:

• ForeColor → RGB (51, 153, 255)

• Schriftart → Light, 28

• Text → "Tournament:"

• Name → "headerLabel"

Er kopiert und fügt dann das Kopfzeilen-Label ein, um das Turnier-Namen-Label zu erstellen, dessen Text vorübergehend auf "None" gesetzt wurde und nennt es tournamentNameLabel. Tim erklärt, dass das Kopieren und Einfügen von Steuerelementen eine schnelle Möglichkeit ist, ein konsistentes Styling beizubehalten und Zeit zu sparen.

Rundenauswahl-Steuerelemente hinzufügen

Tim fügt ein Runden-Label und ein Dropdown-ComboBox hinzu. Er ändert die Schriftart des Labels auf 20 und setzt die Farbe auf dieselbe blaue Akzentfarbe. Er nutzt die Ausrichtungsleitlinien von Visual Studio, um sicherzustellen, dass die Steuerelemente richtig ausgerichtet sind.

Als Nächstes fügt er eine CheckBox mit der Bezeichnung "Nur Unbespielte" hinzu. Er ändert ihren Stil auf flach und modifiziert die Farbe des Häkchens auf blau. Tim erklärt auch seine Namenskonvention: Er fügt den Steuerelementtypen am Ende hinzu (z.B. roundDropDown, unplayedOnlyCheckbox), um die Suche und Navigation im Code zu erleichtern.

Hinzufügen von Matchup-Listen und Punkte-Controls

Tim fügt eine ListBox namens matchupListBox hinzu und setzt deren Rahmenstil auf feste Einzelrahmen. Er erklärt, dass sich ListBox ähnlich wie ComboBox verhält, was das Codieren später erleichtert.

Dann fügt er Beschriftungen und Textfelder für Teamnamen und Punkte hinzu. Er demonstriert eine leistungsstarke Technik: das Auswählen mehrerer Steuerelemente, Kopieren und gemeinsames Einfügen. Dies bewahrt Abstände und Layout und beschleunigt den Designprozess.

Tim erklärt außerdem, dass Sie jedes Steuerelement ordnungsgemäß umbenennen müssen, um Standardnamen wie label1 oder textBox2 zu vermeiden, die später Verwirrung stiften können.

Hinzufügen des VS Labels und Score Buttons

Tim fügt ein "VS"-Label zwischen den beiden Teamabschnitten hinzu. Dann fügt er einen Score-Button hinzu und passt seinen Stil an:

• FlatStyle → flach

• BorderColor → Silber

• MouseDownBackColor → (102, 102, 102)

• MouseOverBackColor → (242, 242, 242)

• Font → Halbfett, 16

• ForeColor → (51, 153, 255)

• Text → "Punkte"

Er erklärt, dass diese Einstellungen den Button modern und reaktionsschnell aussehen lassen, besonders wenn der Benutzer darüber fährt oder klickt.

Ausführen des Formulars

Tim erklärt, dass das Projekt derzeit das falsche Startprojekt hat. Die Klassenbibliothek ist im Solution Explorer fett dargestellt, was bedeutet, dass sie als Startprojekt festgelegt ist, aber eine Klassenbibliothek kann nicht eigenständig ausgeführt werden. Er setzt Tracker UI als Startprojekt.

Wenn er die Anwendung ausführt, erscheint das Formular mit Windows 10-Stil. Tim weist auf das Hover- und Klickverhalten des Buttons hin, was zeigt, dass die UI reaktionsschnell und modern ist.

Turnier-Erstellungsformular

Tim fügt ein neues Formular namens CreateTournamentForm hinzu und setzt dessen Eigenschaften (Schriftart, Farbe, Symbol). Er kopiert Steuerelemente vom Tournament Viewer-Formular, um die Entwicklung zu beschleunigen.

Er fügt hinzu:

• Turniernamen-Eingabe

• Teilnahmegebühr-Eingabe (Standardwert 0)

• Team hinzufügen-Dropdown

• Team erstellen-Link-Beschriftung

• Team hinzufügen-Button

• Preis erstellen-Button

• Turnierspieler-Listbox

• Löschen-Buttons

• Turnier erstellen-Button

Tim erklärt seine Designwahl, die Link-Beschriftung blau zu halten, weil Benutzer darauf trainiert sind, blauen unterstrichenen Text als Link zu erkennen.

Team-Formular erstellen

Tim erstellt das CreateTeamForm und fügt hinzu:

• Teamnamen-Eingabe

• Teammitglied auswählen-Dropdown

• Mitglied hinzufügen-Button

• Gruppenfeld zum Hinzufügen neuer Mitglieder

• Vorname, Nachname, E-Mail und Handynummer-Felder

• Mitglied erstellen-Button

• Teammitglieder-Listbox

• Ausgewähltes Mitglied löschen-Button

• Team erstellen-Button

Er erklärt, dass das Gruppenfeld eine visuelle Abgrenzung bietet und das Management von gruppierten Steuerelementen erleichtert. Es hilft auch beim Bewegen der Gruppe als Einheit.

Preisformular erstellen

Tim erstellt das CreatePrizeForm mit:

• Platzzahl-Eingabe

• Platzname-Eingabe

• Preisbetrag-Eingabe

• Preisanteil-Eingabe

• "Oder"-Label

• Preis erstellen-Button

Er nutzt Ausrichtungswerkzeuge, um sicherzustellen, dass das Layout sauber und professionell aussieht.

Turnier-Dashboard-Formular

Tim erstellt das letzte Formular: TournamentDashboardForm. Er fügt hinzu:

• Bestehendes Turnier laden Dropdown

• Turnier laden-Button

• Turnier erstellen-Button

Er nutzt Ausrichtungs- und Abstandswerkzeuge, um das Layout visuell ausbalanciert zu gestalten.

Namens- und Organisationstipps

Tim betont die Wichtigkeit der richtigen Benennung. Er zeigt, wie das Eigenschaften-Dropdown helfen kann, unbenannte Steuerelemente wie label1 oder textBox2 zu identifizieren, die versehentlich übrig geblieben sind. Er demonstriert die Umbenennung eines Gruppenfelds auf addNewMemberGroupBox für Klarheit.

Das Startformular festlegen

Tim erklärt, wie man das Startformular in Program.cs ändert. Er ändert:

Application.Run(new TournamentViewerForm());

zu:

Application.Run(new TournamentDashboardForm());

Er erklärt, dass diese Zeile die Formularinstanz erstellt und die Anwendung pausiert, bis das Formular geschlossen wird.

Warum Main wichtig ist

Tim vergleicht Windows-Forms mit Konsolenanwendungen: Beide haben ein statisches void Main. Er erläutert, dass die Anwendung endet, sobald Main abgeschlossen ist. Deshalb muss das Formular geöffnet bleiben, um die Anwendung am Laufen zu halten.

Er bemerkt auch, dass Visual Studio XML-Kommentare enthält und er empfiehlt, später XML-Dokumentation für Methoden hinzuzufügen.

Was kommt als nächstes

Tim schließt die Lektion ab, indem er sagt, dass der nächste Schritt darin besteht, die Formulare mit Logik zu verknüpfen. Er beruhigt die Zuschauer damit, dass der abschreckende Teil bevorsteht, es aber beherrschbar sein wird, sobald die Formulare erstellt sind. Er sagt, die Logik werde sich wie das Zusammenbauen von LEGO-Teilen anfühlen, und der schwierige Teil werde allmählich verschwinden, während wir voranschreiten.