Projekt: Aplikacja UWP (C#) - Struktura projektu, tworzymy bardzo podstawową aplikację "Hello world!" (cz. 2)

Witajcie!

W poprzedniej części stworzyliśmy projekt aplikacji UWP. 

W tej części wyjaśnię strukturę projektu oraz stworzymy bardzo podstawową aplikację.

Na początek jednak skompilujmy i uruchommy to, co jest. Aby to zrobić, trzeba wcisnąć przycisk "Play" "Maszyna lokalna":

Jeżeli proces się udał, powinna uruchomić się pusta aplikacja z czarnym ekranem:

Aplikacja powinna także się pojawić na liście aplikacji w menu start:

Zamknijmy ją jednak na teraz i przejdźmy do struktury naszego projektu.

Folder Assets (niebieska strzałka) zawiera dodatkowe elementy naszej aplikacji, jak grafiki. W nowym projekcie są tam puste grafiki ikony dla naszej aplikacji, które można dostosować.

Przejdźmy jednak do ostatniego elementu, czyli Package.appxmanifest (czerwona strzałka). Plik ten zawiera konfigurację i informacje o aplikacji. Po jego otwarciu ukaże nam się ekran pozwalający ustawić nazwę aplikacji, opis, informacje o języku, orientację, wygenerować lub ustawić ikony, nadać uprawnienia itd.:

Na obecną chwilę nie ma potrzeby zmian tych ustawień, więc przejdę do najważniejszej części - MainPage.xaml i MainPage.xaml.cs (zielone strzałki). Zanim je jednak pokażę wspomnę, że XAML bazuje na XML.

Otwórzmy więc MainPage.xaml klikając go dwukrotnie:

Kliknijmy także przycisk "Projekt" (różowa strzałka). Ukaże nam się czarny prostokąt - ekran naszej aplikacji. Opcja, którą pokazałem brązową strzałką pozwala ustawić różne urządzenia i ich rozdzielczości, aby zobaczyć jak aplikacja będzie na nich wyglądać.

Zanim jednak edytujemy ten element, otwórzmy jeszcze podrzędny MainPage.xaml.cs:

Plik ten zawiera kod C# tego ekranu. MainPage.xaml definiuje elementy i wygląd ekranu, a MainPage.xaml.cs zawiera funkcjonalny kod.

Wróćmy do MainPage.xaml i dodajmy coś. Otwórzmy przybornik po lewej (biała strzałka) - zawiera on listę elementów, które możemy umieścić na naszym ekranie:

Na początek umieśćmy przycisk (button) i tekst (text block). Po prostu złapmy elementy w przyborniku i przeciągnijmy je na ekran aplikacji tam, gdzie mają być:

Aby z nich korzystać, nazwijmy te elementy. Kliknijmy raz w nie i w menu po prawej ustawmy im nazwy (można tam też zmienić inne parametry tych elementów). Ja nazwę przycisk "Przycisk1" i tekst "BlokTekstu1":

Zanim jednak dodamy kod C#, naciśnijmy znów przycisk kompilacji. Ponownie wczyta się nasza aplikacja, ale już z dodanym przez nas przyciskiem i tekstem:

Przycisk jednak nic nie robi, w końcu nie dodaliśmy żadnego kodu C#. Zamknijmy aplikację i wróćmy do edycji. 

Na ekranie MainPage.xaml naciśnijmy dwukrotnie przycisk. Otworzy to MainPage.xaml.cs i doda fragment kodu, który reaguje na naciśnięcie przycisku:

Kod ten to:

        private void Przycisk1_Click(object sender, RoutedEventArgs e)

        {

        }

Kod między nawiasami ( { } ) będzie wykonywany po naciśnięciu przycisku. Dodajmy tam coś. 

Drugi element jaki umieściliśmy na ekranie aplikacji to tekst. Niech naciśnięcie przycisku zmieni go na tradycyjne "Hello world!". Dodajmy:

BlokTekstu1.Text = "Hello world!";

Całość funkcji:

        private void Przycisk1_Click(object sender, RoutedEventArgs e)

        {

            BlokTekstu1.Text = "Hello world!";

        }

 

Zapiszmy wszystko i skompilujmy aplikację. Jeżeli wszystko zrobiliśmy dobrze, aplikacja wczyta się. Teraz naciśnięcie przycisku ustawi tekst na "Hello world!":

To wszystko w tym artykule. W następnej części wykorzystamy bardziej zaawansowane elementy, aby stworzyć coś lepszego i bardziej przydatnego.

Dziękuję!

- Wojtekb30

(14.12.2022)

Repozytorium GitHub projektu: https://github.com/Wojtekb30/AplikacjaUWP1