Tworzenie nowego projektu
Będziemy tworzyć aplikację w visual studio, także uruchom proszę visual studio i stworzymy najpierw nowy projekt windows forms. Dodamy do naszej solucji (utworzonej w tym artykule – kalkulator) nowy projekt. Kliknij prawym przyciskiem na nazwę solucji, następnie add, new project.
Wyszukaj sobie windows forms, zwróć uwagę, żeby to był C#. Czyli wybierz Windows Forms App (.NET).
Następnie wpisz odpowiednią nazwę, może to być Calculator.WindowsFormsApp. Będziemy się tutaj trzymali konwencji z poprzedniego artykułu. Czyli nazwa solucji + typ aplikacji. Dzięki temu możemy rozdzielić tę aplikację desktopową, którą będziemy pisać w windows forms od aplikacji konsolowej, którą napisaliśmy wcześniej. Klikamy create.
Ustawienie .NET 5
I po chwili do naszej solucji zostanie dodany nowy projekt. Możemy jeszcze zmienić target framework, tak żeby to był .NET 5.0. Wystarczy kliknąć prawym przyciskiem myszy na nazwę projektu, następnie wybrać Properties.
Wystarczy teraz zapisać zmiany i automatycznie zostanie zmieniony framework na .NET 5.0.
Uruchomienie projektu
Następnie na górze w menu warto jeszcze sobie zaznaczyć ten projekt windows forms jako projekt startowy.
Dzięki temu, jeżeli teraz uruchomisz aplikacje poprzez CTRL+F5, to zostanie właśnie uruchomiony już ten projekt windows forms. To samo możesz ustawić w oknie Solution Explorer, wystarczy kliknąć prawym przyciskiem myszy na nazwę projektu i wybrać Set as Startup Project. Po uruchomieniu nasza aplikacja wygląda w ten sposób:
Tworzenie interfejsu użytkownika
Także spróbujemy tutaj stworzyć jakiś ładny kalkulator. Jeżeli chcesz dodać nowe kontrolki, to wystarczy skorzystać z tzw. Toolbox'a. Znajduje się on z lewej strony, obok okna głównego. Jeżeli nie ma go u Ciebie w tym miejscu, to wybierz w menu przycisk View, a następnie Toolbox.
Jeżeli chcesz mieć widoczny toolbox na stałe, to użyj do tego pinezki w prawym górnym rogu tego okna. Jak widzisz na toolboxie mamy dostępnych wiele kontrolek, takie najbardziej popularne, które najczęściej będziesz używał, to na pewno Button, TextBox, CheckBox, ComboBox, DateTimePicker, DataGridView, Label, NumericUpDown itp. jest tego naprawdę sporo i na pewno z czasem jak będziesz rozwijał więcej aplikacji, to poznasz lepiej każdą z nich.
Wracając do naszej aplikacji, na naszej formatce na pewno będziemy potrzebowali kilka przycisków (Button), a także kontrolek TextBox, tak aby wyświetlić wynik równania. Także najpierw za pomocą drag & drop przeciągnę sobie z Toolbox’a na moją główną formatkę o nazwie Form1 (tę domyślną nazwę oczywiście również możemy sobie zmienić) – TextBox’a. Następnie możesz również dostosować wielkość okna i tak może wyglądać teraz nasze główne okno:
Potrzebujemy teraz kilka przycisków, wyszukaj proszę na Toolbox’ie kontrolki Button. Tak samo, jak wcześniej, za metodą drag & drop przeciągnij ten przycisk na naszą formatkę główną. Również możesz ustawić rozmiar tego przycisku. Może to być 90x90. Możesz to zrobić bezpośrednio na formatce lub w oknie Properties każdej kontrolki.
Oprócz ustawienia rozmiaru przycisku w oknie Properties możesz ustawić i dostosować wiele innych właściwości.
Takich przycisków będziemy potrzebowali na pewno więcej. Do wszystkich cyfr – potrzebujemy 9 przycisków. Będziemy też potrzebować 0, przecinek, nasze operacje, czyli dzielenie, odejmowanie, mnożenie, dodawanie, wyświetlenie wyniku i jeszcze usuwanie wartości z naszego TextBoxa. Także potrzebujemy 17 przycisków. Możesz sobie skopiować przycisk, który już jest na formatce i wkleić16 razy, ustawiając odpowiednie położenie każdego z nich.
Dopasuj odpowiednio rozmiar okna. Następnie rozmiary przycisków. Zazwyczaj jest tak, że przyciski: 0, dodawanie i wyświetlenie wyniku są trochę większe. Możemy również tak zrobić w naszej aplikacji, dzięki czemu zapełnią puste obszary. Żeby nasz kalkulator był bardziej czytelny, to już teraz możemy również uzupełnić tekst na każdym z przycisków. Możesz to zrobić, ustawiając odpowiedni tekst dla każdego przycisku w oknie Properties (jeżeli to okno, nie jest u Ciebie widoczne, to również kliknij w menu przycisk View, a następnie Properties Window), a konkretnie właściwości: Text.
Już nasza aplikacja powoli zaczyna przypominać kalkulator 🙂 Jeszcze warto dostosować trochę TextBox’a, możesz ustawić do jego właściwości Text jakieś przykładowy cyfry, dzięki czemu będziemy mogli dostosować od razu style.
Ok, czyli nie wygląda, to jeszcze zbyt ładnie 🙂 Spróbujmy ustawić odpowiednie właściwości w oknie Properties dla tego TextBox’a. Przede wszystkim musimy dopasować czcionkę. Spróbuj ustawić Size: 28. Chcemy też, żeby tekst wyświetlał się po prawej stronie. W tym celu ustaw TextAlign: Right. Przez to, że czcionka została zwiększona, również cały TextBox został zwiększony, także dopasuj sobie pozostałe przyciski, tak żeby nie nachodziły na siebie nawzajem.
Dobrą praktyką jest jeszcze ustawienie właściwości Name dla wszystkich kontrolek, ponieważ później będziemy się do nich odnosić w code behind. Warto byłoby się tam odnosić po konkretnych, opisowych nazwach, a nie po domyślnych jak textBox1, czy button1, button10 itp. Możemy zacząć od textBoxa, nadamy mu nazwę np. tbScreen (tb od TextBox).
Tak samo musimy zrobić ze wszystkimi naszymi przyciskami. Czyli po kolei zgodnie z ich przeznaczeniem możemy je nazwać np. btn0, btn1, btn2, btn3, btn4, btn5, btn6, btn7, btn8, btn9, btnComma, btnClear, btnDivision, btnSubtraction, btnMultiplication, btnAdd i btnResult. Dzięki temu będziemy wiedzieć, który przycisk dokładnie został kliknięty. Jeżeli będziemy w code behind próbować dodać np. zdarzenia, to będziemy dodawać tutaj już po konkretnej nazwie. Tak samo w code behind możemy zmieniać właściwości każdej kontrolki, będziemy się też wtedy odwoływać po nazwie, czyli po właściwości Name. Jeżeli będziemy coś zmieniać w code behind, to właśnie będziemy konkretnie już wiedzieć, do której kontrolki odnosi się która nazwa, jest to dość ważne, ponieważ te domyślne nazwy nie są zbyt dobre. Akurat w niektórych przypadkach to pasuje, np. dla 5 jest button5, ale już dla dodawania jest button15 no i to już nic nam nie mówi. Także ja lubię się trzymać takiej konwencji. Trochę z tym jest pracy, ale na pewno w przyszłości takie konkretne i czytelne nazwy kontrolek wiele nam ułatwią.
Wróćmy do stylowania naszej aplikacji. Dostosujmy jeszcze czcionkę wszystkich przycisków, tak żeby tekst na nich był bardziej widoczny. Niech to będzie czcionka 20.
Od razu to lepiej wygląda. No i możemy się tutaj pobawić jeszcze w jakieś kolory. Np. dla tła możemy ustawić kolor szary. W tym celu zaznaczam formatkę główną i szukamy w oknie Properties właściwości BackColor. Możemy ustawić kolor: Gainsboro. Dla naszych przycisków z cyframi możemy ustawić kolor tła np. zielony (MediumSeaGreen). Dla operacji możemy ustawić też inny kolor, niech to będzie Gray. Dla wyniku również ustawimy inny, tak żeby to się też troszkę wyróżniało. Może tym razem niebieski (RoyalBlue). Na koniec jeszcze dla przycisku Clear ustawimy kolor czerwony (IndianRed). Dla wszystkich tych przycisków możemy jeszcze ustawić białą czcionkę, dzięki czemu to będzie również lepiej widoczne. Także szukamy Font i ustawimy tutaj ForeColor: White. Nasz interfejs jest już gotowy, można w takim razie teraz uruchomić aplikację (CTRL+F5).
Wydaje mi się, że jest całkiem w porządku. Oczywiście nasze przyciski nie są tutaj jeszcze obsłużone, tym zajmiemy się w kolejnym materiale. Także wygląda, że nasz interfejs użytkownika jest gotowy. Na koniec wyczyść testowe dane, które wcześniej ustawiliśmy we właściwości Text dla TextBox’a.
PODSUMOWANIE
Jak widzisz, tworzenie interfejsu użytkownika aplikacji windows forms nie jest skomplikowane. W krótkim czasie można stworzyć całkiem dobrze wyglądającą aplikację desktopową. Pozostaje nam jeszcze tylko zaimplementować całą logikę naszej aplikacji i właśnie tym zajmiemy się w kolejnym materiale.
Jeżeli taki artykuł Ci się spodobał, to koniecznie dołącz do mojej społeczności. Zapisz się na darmowy newsletter, gdzie co tydzień dzielę się wartościowymi materiałami w szczególności dotyczącymi C# i platformy .NET (darmowy zapis – newsletter).
Poprzedni artykuł - Jak Znaleźć Błąd w Kodzie – Debugowanie Kodu.
Następny artykuł - Pierwsza Aplikacja Desktopowa Windows Forms w C# – Logika (2/2)
![[E-Book] Jak Zostać Programistą Od Zera Do Eksperta (PDF)](/content/images/jak-zostac-programista-od-zera-male.png)
![[E-Book] Rekrutacja Programisty C#/.NET (PDF)](/content/images/rekrutacja-programisty-csharp-dotnet.png)