Udostępnij za pośrednictwem

Samouczek: tworzenie aplikacji do dopasowywania formularzy systemu Windows

  • Artykuł

W tej serii czterech samouczków utworzysz pasującą grę. Gracz dopasuje pary ukrytych ikon.

Skorzystaj z tych samouczków, aby dowiedzieć się więcej o następujących zadaniach w zintegrowanym środowisku projektowym programu Visual Studio (IDE):

  • Przechowuj obiekty, takie jak ikony, w obiekcie List<T>.
  • Użyj pętli foreach w języku C# lub pętli For Each w języku Visual Basic, aby iterować elementy na liście.
  • Śledź stan formularza przy użyciu zmiennych referencyjnych.
  • Utwórz program obsługi zdarzeń, aby reagować na zdarzenia, których można używać z wieloma obiektami.
  • Utwórz czasomierz, który odlicza, a następnie uruchamia zdarzenie dokładnie raz po jego uruchomieniu.

Po zakończeniu będziesz mieć pełną grę.

Zrzut ekranu przedstawiający utworzoną grę. W siatce jest wyświetlanych kilka pasujących ikon.

Z tego pierwszego samouczka dowiesz się, jak wykonywać następujące działania:

  • Utwórz projekt programu Visual Studio, który używa formularzy systemu Windows.
  • Dodaj i sformatuj element układu.
  • Dodawanie i formatowanie etykiet.

Warunki wstępne

Do ukończenia tego samouczka potrzebny jest program Visual Studio. Odwiedź stronę pobierania Visual Studio, aby uzyskać bezpłatną wersję.

Notatka

Ten samouczek wymaga szablonu projektu Windows Forms App (.NET Framework). Podczas instalacji wybierz pakiet roboczy rozwój aplikacji na komputery stacjonarne .NET:

Zrzut ekranu przedstawiający obciążenie rozwoju aplikacji desktopowych dot NET w Instalatorze programu Visual Studio.

Jeśli masz już zainstalowany program Visual Studio i musisz dodać szablon, z menu wybierz pozycję Tools>Get Tools and Featureslub w oknie Create a new project (Utwórz nowy projekt) wybierz pozycję Install more tools and features (Zainstaluj więcej narzędzi i funkcji).

Zrzut ekranu przedstawiający link Zainstaluj więcej narzędzi i funkcji z komunikatu Nie znaleziono tego, czego szukasz w oknie dialogowym Tworzenie nowego projektu.

Tworzenie projektu gry dopasowania formularzy systemu Windows Forms

Pierwszym krokiem tworzenia gry jest utworzenie projektu aplikacji Windows Forms.

  1. Otwórz program Visual Studio.

  2. W oknie uruchamiania wybierz pozycję Utwórz nowy projekt.

    Zrzut ekranu przedstawiający opcję Utwórz nowy projekt w oknie uruchamiania programu Visual Studio.

  3. W oknie Tworzenie nowego projektu wyszukaj Windows Forms. Następnie wybierz pozycję Desktop z listy Wszystkie typy projektów.

  4. Wybierz szablon Windows Forms App (.NET Framework) dla języka C# lub Visual Basic, a następnie wybierz Dalej.

  5. W oknie Konfigurowanie nowego projektu nadaj projektowi nazwę MatchingGame, a następnie wybierz Utwórz.

    Zrzut ekranu przedstawiający okno Konfigurowanie nowego projektu.

Program Visual Studio tworzy rozwiązanie dla aplikacji. Rozwiązanie to kontener dla projektów i plików, których potrzebuje Twoja aplikacja.

Na tym etapie program Visual Studio wyświetla pusty formularz w programie Windows Forms Designer.

Tworzenie układu gry

W tej sekcji utworzysz siatkę cztery na cztery do gry.

  1. Wybierz formularz, aby zaznaczyć projektanta formularzy Windows. Karta pokazuje Form1.cs [Projektowanie] dla języka C# lub Form1.vb [Projektowanie] dla Visual Basic. W oknie Właściwości ustaw następujące właściwości formularza.

    • Zmień właściwość Text z Form1 na Matching Game. Ten tekst pojawia się w górnej części okna gry.
    • Ustaw rozmiar formularza. Można ją zmienić, ustawiając właściwość Size na 550, 550 lub przeciągając róg formularza, aż zobaczysz prawidłowy rozmiar w dolnej części środowiska IDE programu Visual Studio.

  2. Wybierz kartę przybornika po lewej stronie środowiska IDE. Jeśli go nie widzisz, wybierz pozycję View>Toolbox na pasku menu lub wybierz pozycję Ctrl+Alt+X.

  3. Przeciągnij kontrolkę TableLayoutPanel z kategorii Containers w przyborniku lub kliknij ją dwukrotnie. Ustaw następujące właściwości panelu w oknie Właściwości.

    • Ustaw właściwość BackColor na CornflowerBlue. Aby ustawić tę właściwość, wybierz strzałkę w dół obok właściwości BackColor. W oknie dialogowym, które się pojawiło, wybierz pozycję Web. Na liście nazw wybierz CornflowerBlue.

      Notatka

      Kolory nie są w kolejności alfabetycznej. CornflowerBlue znajduje się w dolnej części listy.

    • Ustaw właściwość Dock na Fill, wybierając strzałkę w dół w menu rozwijanym, a następnie wybierając duży środkowy przycisk. Ta opcja rozdziela tabelę tak, aby obejmowała cały formularz.

    • Ustaw właściwość CellBorderStyle na Inset. Ta wartość zapewnia obramowania wizualne między poszczególnymi komórkami na tablicy.

    • Wybierz przycisk trójkąta w prawym górnym rogu kontrolki TableLayoutPanel, aby wyświetlić menu zadań. W menu zadań wybierz pozycję Dodaj wiersz dwa razy, aby dodać dwa kolejne wiersze. Następnie wybierz pozycję Dodaj kolumnę dwa razy, aby dodać dwie kolejne kolumny.

    • W menu zadań wybierz pozycję Edytuj wiersze i kolumny, aby otworzyć okno Kolumny i Style wierszy. Dla każdej kolumny wybierz opcję Percent, a następnie ustaw szerokość każdej kolumny na 25 procent.

    • Wybierz Wiersze z listy z góry okna, a następnie ustaw wysokość każdego wiersza na 25 procent.

    • Po zakończeniu wybierz pozycję OK, aby zapisać zmiany.

TableLayoutPanel jest teraz czterobajtową siatką z 16 komórkami kwadratowymi o równym rozmiarze. Te wiersze i kolumny są miejscem wyświetlania ikon później.

zrzut ekranu przedstawiający kartę Formularze z siatką cztery na cztery.

Dodawanie i formatowanie etykiet

W tej sekcji tworzysz i formatujesz etykiety wyświetlane podczas gry.

  1. Upewnij się, że kontrolka TableLayoutPanel jest zaznaczona w edytorze formularzy. Na górze okna Właściwości powinna być widoczna tableLayoutPanel1. Jeśli nie jest zaznaczona, wybierz kontrolkę TableLayoutPanel w formularzu lub wybierz ją z listy w górnej części okna właściwości .

  2. Otwórz przybornik, tak jak poprzednio, i otwórz kategorię Common Controls. Dodaj kontrolkę Label do lewej górnej komórki TableLayoutPanel. Kontrolka etykiety jest teraz zaznaczona w środowisku IDE. Ustaw dla niego następujące właściwości.

    • Ustaw dla etykiety właściwość BackColor na CornflowerBlue.
    • Ustaw właściwość AutoSize na wartość False.
    • Ustaw właściwość Dock na Fill.
    • Ustaw właściwość TextAlign na MiddleCenter, wybierając przycisk strzałki w dół obok właściwości, a następnie wybierając środkowy przycisk. Ta wartość gwarantuje, że ikona zostanie wyświetlona w środku komórki.
    • Wybierz właściwość Czcionka. Pojawi się przycisk wielokropka (...). Wybierz wielokropek i ustaw wartość czcionki na Webdings, styl czcionkipogrubionąi Rozmiar48.
    • Ustaw właściwość etykiety Text na literę c.

    Lewa górna komórka TableLayoutPanel zawiera teraz czarne pole wyśrodkowane na niebieskim tle.

    Notatka

    Webdings to czcionka ikony dostarczana z systemem operacyjnym Windows. W grze dopasowywania gracz dopasowuje pary ikon. Ta czcionka wyświetla ikony, które mają być zgodne. Jeśli ikony Webdings nie są prawidłowo wyświetlane w formularzu, ustaw właściwość UseCompatibleTextRendering etykiet w formularzu na True.

    Zamiast c, spróbuj użyć różnych liter we właściwości Text. Wykrzyknik jest pająkiem, wielka litera N jest okiem, a przecinek jest papryczką chili.

  3. Wybierz kontrolkę Etykieta i skopiuj ją do następnej komórki w TableLayoutPanel. Wybierz Ctrl+C lub na pasku menu Edytuj>Kopiuj. Następnie wklej go przy użyciu Ctrl+V lub Edytuj>Wklej.

    Kopia pierwszej etykiety jest wyświetlana w drugiej komórce tableLayoutPanel. Wklej go ponownie, a inna etykieta pojawi się w trzeciej komórce. Wklejaj kontrolki Etykieta, aż wszystkie komórki będą wypełnione.

Ten krok kończy układ formularza.

Zrzut ekranu przedstawiający pasującą formę gry z 16 czarnymi kwadratami.

Następny krok

Przejdź do następnego samouczka, aby dowiedzieć się, jak przypisać losową ikonę do każdej etykiety i dodać programy obsługi zdarzeń do etykiet.

Dodaj ikony do swojej gry do pary