Blog Dla Młodszych Programistów C#/.NET

Kilka tygodni temu pokazałem Ci, jak możesz napisać prosty kalkulator w C#. Wtedy napisaliśmy naszą aplikację jako aplikacja konsolowa. Także wiesz już na pewno, jak podejść do pisania takich aplikacji. Niestety aplikacje konsolowe nie mają za bardzo rozbudowanego widoku, czyli interfejsu użytkownika, przez co dość ciężko się ich używa. Dlatego możemy teraz podejść o krok dalej i napisać podobną aplikację, ale już jako aplikacja desktopowa, oczywiście dalej w C#. W dzisiejszym artykule zaczniemy pisać pierwszą kompletną aplikację desktopową w windows forms. Podzielimy pisanie tej aplikacji na dwie części. W pierwszej części, czyli w tym artykule pokażę ci jak podejść do tworzenia interfejsu użytkownika (UI) w windows forms, gdzie skorzystamy z gotowych kontrolek domyślnie dostępnych w visual studio, a w kolejnej części napiszemy całą logikę tej aplikacji.

Pierwsza Aplikacja Desktopowa Windows Forms w C# – UI (1/2)


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.

Aplikacja Windows Forms UI - dodanie nowego projektu

Wyszukaj sobie windows forms, zwróć uwagę, żeby to był C#. Czyli wybierz Windows Forms App (.NET).

Aplikacja Windows Forms UI - tworzenie nowego projektu windows forms

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.

Aplikacja Windows Forms UI - wybór nazwy projektu


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.

Aplikacja Windows Forms UI - wybór odpowiedniego frameworka .NET 5

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.

Aplikacja Windows Forms UI - ustawienie startowego projektu

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:

Aplikacja Windows Forms UI - uruchomienie nowej aplikacji


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.

Aplikacja Windows Forms UI - widok 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:

Aplikacja Windows Forms UI - widok z textboxem

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.

Aplikacja Windows Forms UI - dodanie pierwszego przycisku Aplikacja Windows Forms UI - właściwości przycisku

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.

Aplikacja Windows Forms UI - dodane przyciski

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.

Aplikacja Windows Forms UI - ustawienie tekstu na przycisku Aplikacja Windows Forms UI - przyciski z ustawionymi tekstami

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.

Aplikacja Windows Forms UI - dopasowanie stylu dla textboxa

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.

Aplikacja Windows Forms UI - ostylowanie kolorów aplikacji

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).

Aplikacja Windows Forms UI - ustawienie nazwy dla textboxa

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.

Aplikacja Windows Forms UI - ustawienie czcionki 20 dla przycisków Aplikacja Windows Forms UI - ustawiona czcionka dla wszystkich przycisków

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).

Aplikacja Windows Forms UI - kompletna aplikacja kalkulator

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)
Autor artykułu:
Kazimierz Szpin
Kazimierz Szpin
Programista C#/.NET. Specjalizuje się w ASP.NET Core, ASP.NET MVC, ASP.NET Web API, WPF oraz Windows Forms.
Autor bloga ModestProgrammer.pl
Dodaj komentarz

Wyszukiwarka

© Copyright 2021 modestprogrammer.pl. Wszelkie prawa zastrzeżone. Polityka prywatności. Design by Kazimierz Szpin