Eksploracja projektowania formularzy C# z Timem Coreyem — prowadzone przejście

Wprowadzenie do Budowania Formularzy

Tim zaczyna, witając nas na lekcji siódmej i jasny cel: budujemy formularze. Przypomina nam, że jest to podobne do pracy nad biblioteką klas, ale teraz wdrażamy rzeczywisty interfejs użytkownika na podstawie naszych wcześniejszych planistycznych szkiców. Tim zauważa, że możemy być skłonni dodać kod na tym etapie, ale zachęca nas do skoncentrowania się tylko na budowaniu formularzy.

Wyjaśnia również, że nasze wcześniejsze projekty były zgrubnymi szkicami, a teraz dbamy o to, aby formularze dobrze wyglądały. Tim stwierdza, że przewodnik projektowy jest ważny, i choć nie pokaże eksperymentów, przez które przeszedł, przeprowadzi nas przez końcowe wyniki. Wskazuje również, że projekty z kroku czwartego planowania są podstawą tej lekcji, i sugeruje powrót do tych projektów, jeśli to konieczne.

Dodawanie Nowego Projektu i Rozpoczęcie Aplikacji Windows Forms

Tim pokazuje, jak dodać nowy projekt do rozwiązania. W Eksploratorze rozwiązań klika prawym przyciskiem myszy rozwiązanie, wybiera Dodaj Nowy Projekt i wybiera Windows Form Application. Tworzy to nowy typ projektu specjalnie do budowania aplikacji desktopowych Windows. Nadaje projektowi nazwę Tournament Tracker UI.

Wyjaśnia, że domyślny plik Form1.cs jest automatycznie generowany podczas tworzenia aplikacji Windows Forms. Ponieważ aplikacja potrzebuje startowego formularza, Tim decyduje się go nie usuwać. Zamiast tego zmienia nazwę pliku i klasy na TournamentViewerForm oraz akceptuje monit o zmianę nazwy wszystkich odwołań. To zapewnia, że główne okno aplikacji będzie działać poprawnie.

Zmiana Nazwy Klasy Formularza

Tim podkreśla, że musisz mieć uruchamialny formularz w aplikacji Windows Forms. Wyjaśnia, że jeśli usuniesz domyślny Form1.cs, musisz ręcznie zaktualizować punkt wejścia w Program.cs. Aby uniknąć tej złożoności, Tim po prostu zmienia nazwę formularza. To typowy krok przy zakładaniu aplikacji Windows Forms: zmiana nazwy klasy i pliku, aby dopasować je do celu projektu.

Używanie Okna Właściwości

Tim otwiera okno Właściwości i zaczyna modyfikować właściwości formularza. Zmienia właściwość Text na "Tournament Viewer", aby pasek tytułu wyświetlał poprawną nazwę.

Następnie zmienia kolor tła z domyślnego szarego Visual Studio na biały, wyjaśniając, że biały jest bardziej nowoczesny i nie odwraca uwagi od treści formularza. To część ustanawiania przewodnika projektowego dla interfejsu użytkownika.

Następnie zmienia czcionkę na nowoczesną 16-punktową i wyjaśnia, dlaczego należy to zrobić wcześniej: dodane później elementy będą automatycznie dziedziczyć nową czcionkę. Tim wyjaśnia, że to ważna wskazówka, jak efektywnie budować formularze.

Zmiana Ikony i Zasobów

Tim zmienia ikonę formularza, importując niestandardowy plik ikony. Wyjaśnia, że użył darmowego narzędzia o nazwie Metro Studio do stworzenia ikony. Dzięki temu unika pisania lub projektowania ikon od podstaw. Zauważa również, że zamierza używać tej samej ikony we wszystkich formularzach, aby stworzyć spójny wygląd aplikacji.

Dodawanie Kontrolek do Formularza

Tim zaczyna budować interfejs użytkownika, przeciągając kontrolki z narzędziowników na formularz. Dodaje etykietę nagłówkową i zmienia jej właściwości:

• ForeColor → RGB (51, 153, 255)

• Czcionka → Light, 28

• Tekst → "Turniej:"

• Nazwa → "headerLabel"

Następnie kopiuje i wkleja etykietę nagłówkową, aby utworzyć etykietę nazwy turnieju, tymczasowo ustawiając jej tekst na "Brak" i nazywając ją tournamentNameLabel. Tim wyjaśnia, że kopiowanie i wklejanie kontrolek jest szybkim sposobem na zachowanie spójnego stylu i oszczędność czasu.

Dodawanie Kontrolek Wyboru Rund

Tim dodaje etykietę Rundy i rozwijane ComboBox. Zmienia czcionkę etykiety na 20 i ustawia kolor na ten sam niebieski akcent. Używa przewodników wyrównywania Visual Studio, aby zapewnić, że kontrolki są prawidłowo wyrównane.

Następnie dodaje pole wyboru oznaczone "Tylko nierozgrywane". Zmienia jego styl na płaski i modyfikuje kolor zaznaczenia na niebieski. Tim również wyjaśnia swoją konwencję nazw, dodając typ kontrolki na końcu (np. roundDropDown, unplayedOnlyCheckbox), aby ułatwić wyszukiwanie i nawigację po kodzie.

Dodawanie Listy Meczów i Kontrolek Wyników

Tim dodaje ListBox o nazwie matchupListBox i ustawia jego styl obramowania na fixed single. Wyjaśnia, że ListBox zachowuje się podobnie do ComboBox, co ułatwia późniejsze kodowanie.

Następnie dodaje etykiety i pola tekstowe dla nazw drużyn i wyników. Demonstruje potężną technikę: wybieranie kilku elementów, ich kopiowanie i wklejanie razem. Ta technika zachowuje odstępy i układ, przyspieszając proces projektowania.

Tim wyjaśnia również, że musisz poprawnie nazywać każdą kontrolkę, unikając domyślnych nazw, takich jak label1 czy textBox2, które mogą później powodować zamieszanie.

Dodawanie Etykiety VS i Przycisku Wyniku

Tim dodaje etykietę "VS" między dwiema sekcjach drużyn. Następnie dodaje przycisk Wynik i dostosowuje jego styl:

• FlatStyle → Flat

• BorderColor → Silver

• MouseDownBackColor → (102, 102, 102)

• MouseOverBackColor → (242, 242, 242)

• Czcionka → Semi-bold, 16

• ForeColor → (51, 153, 255)

• Tekst → "Wynik"

Wyjaśnia, że te ustawienia sprawiają, że przycisk wygląda nowocześnie i responsywnie, zwłaszcza gdy użytkownik najeżdża na niego myszą lub klika.

Uruchamianie Formularza

Tim wyjaśnia, że projekt ma obecnie nieprawidłowy projekt startowy. Biblioteka klas jest pogrubiona w Eksploratorze rozwiązań, co oznacza, że jest ustawiona jako projekt startowy, ale biblioteka klas nie może działać samodzielnie. Ustawia Tracker UI jako projekt startowy.

Kiedy uruchamia aplikację, formularz pojawia się ze stylistyką Windows 10. Tim wskazuje zachowania przycisku na hover i click, pokazując, że interfejs jest responsywny i nowoczesny.

Formularz Create Tournament

Tim dodaje nowy formularz o nazwie CreateTournamentForm i ustawia jego właściwości (czcionka, kolor, ikona). Kopiuje kontrolki z formularza Tournament Viewer, aby przyspieszyć rozwój.

Dodaje:

• Wejście nazwy turnieju

• Wejście opłaty wpisowej (domyślna wartość 0)

• Rozwijane menu dodawania drużyny

• Etykieta linku tworzenia drużyny

• Przycisk dodawania drużyny

• Przycisk tworzenia nagrody

• Pole listy graczy turnieju

• Przyciski usuwania

• Przycisk tworzenia turnieju

Tim wyjaśnia swoją decyzję projektową, aby zachować niebieską etykietę linku, ponieważ użytkownicy są przyzwyczajeni do rozpoznawania niebieskiego podkreślonego tekstu jako link.

Utwórz formularz drużyny

Tim tworzy CreateTeamForm i dodaje:

• Wejście nazwy drużyny

• Rozwijane menu wyboru członka drużyny

• Przycisk dodawania członka

• Pole grupy do dodawania nowych członków

• Pola imienia, nazwiska, e-mail i telefonu komórkowego

• Przycisk tworzenia członka

• Pole listy członków drużyny

• Przycisk usuwania wybranego członka

• Przycisk tworzenia drużyny

Wyjaśnia, że pole grupy zapewnia wizualne granice i ułatwia zarządzanie grupowanymi kontrolkami. Pomaga również podczas przesuwania grupy jako jednostki.

Utwórz formularz nagrody

Tim tworzy CreatePrizeForm z:

• Wejście numeru miejsca

• Wejście nazwy miejsca

• Wejście kwoty nagrody

• Wejście procentu nagrody

• Etykieta "Lub"

• Przycisk tworzenia nagrody

Używa narzędzi wyrównywania, aby układ wyglądał czysto i profesjonalnie.

Formularz panelu kontrolnego turnieju

Tim tworzy ostatni formularz: TournamentDashboardForm. Dodaje:

• Rozwijane menu ładowania istniejącego turnieju

• Przycisk ładowania turnieju

• Przycisk tworzenia turnieju

Używa narzędzi wyrównania i odstępów, aby układ był wizualnie zbilansowany.

Porady dotyczące Nazewnictwa i Organizacji

Tim podkreśla znaczenie prawidłowego nazewnictwa. Pokazuje, jak rozwijane menu Właściwości może pomóc w identyfikacji nienazwanych kontrolek, takich jak label1 lub textBox2, które zostały przypadkowo pozostawione. Demonstruje, jak zmienić nazwę pola grupy na addNewMemberGroupBox dla jasności.

Ustawianie Formularza Początkowego

Tim wyjaśnia, jak zmienić formularz startowy w Program.cs. Zmienia:

Application.Run(new TournamentViewerForm());

na:

Application.Run(new TournamentDashboardForm());

Wyjaśnia, że ta linia tworzy instancję formularza i zatrzymuje aplikację, dopóki formularz nie zostanie zamknięty.

Dlaczego Główne Ma Znaczenie

Tim porównuje Windows Forms do aplikacji konsolowych: obie mają statyczne void Main. Wyjaśnia, że gdy Main się zakończy, aplikacja zostaje zamknięta. Dlatego formularz musi pozostać otwarty, aby aplikacja działała.

Zauważa również, że Visual Studio zawiera komentarze XML, i zachęca do dodawania dokumentacji XML dla metod później.

Co dalej

Tim kończy lekcję, stwierdzając, że następnym krokiem jest połączenie formularzy z logiką. Uspokaja widzów, że nadchodzi zniechęcająca część, ale będzie do opanowania, gdy formularze zostaną zbudowane. Mówi, że logika przypomina składanie klocków LEGO, a trudna część stopniowo zniknie w miarę postępów.