windows store apps tworzenie aplikacji podstawy

Podstawy Windows Store: poznaj składnię XAML7 października 2016

Witaj w drugiej części serii dotyczącej tworzenia aplikacji! W poprzedniej części opowiadaliśmy m.in. o szablonach i atrybutach. Dziś przedstawimy składnię XAML, gdyż bez tej podstawowej znajomości będzie nam trudno tworzyć aplikację.

XAML jest dialektem XML i stał się rozpoznawalny dzięki aplikacjom typu WPF. Jest on używany do opisu interfejsu użytkownika, ale może opisywać również inne rzeczy (np. w WF jest używany do wyrażania aktywności, przez co nie ma nic wspólnego z częścią graficzną). XAML jest stosunkowo prosty. Można powiedzieć że to taki XML, w którym musimy przestrzegać zbioru zasad dotyczących pewnych elementów. Przedstawimy je na blogu:

  • Grid

Możemy dzięki niemu tworzyć układ tabelaryczny, a jego głównym zadaniem jest tworzenie struktury okna. Jedną z lepszych funkcji jakie posiada, to automatyczne skalowanie wysokości i szerokości, dzięki czemu łatwo możemy tworzyć skalowalne layouty. Dodając znacznik GRID możemy zacząć pracować w układzie, który pozwala na definiowanie wierszy i kolumn. Dla wierszy i kolumn powinniśmy również zdefiniować odpowiednio ich wysokości oraz szerokości.
Spójrzmy na przykład do naszej aplikacji, gdzie dodamy następujący kod:

wa2_1

Większość rzeczy powinna być dla nas jasna. Nową rzeczą jest pojawienie się przycisku (przycisków) Button, który tu zastosowaliśmy by pokazać jak zostanie wypełniony obszar na ekranie. Efekt naszej pracy to:

wa2_2

Lecz nie czekając na efekt debugowania, zawsze możemy podejrzeć nasz widok w trybie Design. Mamy w nim widoczną np: siatkę odzwierciedlającą linie:

wa2_3

  • StackPanel

Następnym komponentem będzie StackPanel, który jest dużo prostszy od Grida i służy do rozplanowania przycisków. Zmodyfikujmy nasz kod w taki sposób, by wyglądał następująco:

wa2_5

Zatem wynik powyższego kodu wygląda tak:

wa2_4

Jak widać, przyciski zostały dodane jeden pod drugim. Warto wiedzieć, że StackPanel może funkcjonować również w orientacji poziomej. Aby tak się stało, w znaczniku otwierającym wystarczy ustawić właściwość Orientation:

wa2_6

    • WrapPanel

WrapPanel działa bardzo podobnie jak StackPanel. Możemy w nim jednak dodawać obok siebie kontrolki, które same się pozycjonują. Poniżej przykład prostego kodu:

wa2_7

Podobnie jak w przypadku StackPanel, kod jest na tyle intuicyjny i jasny, że nie wymaga dodatkowych wyjaśnień.

    • Canvas

Ostatni z układów spodoba się szczególnie osobom, którym ciężko się odzwyczaić od Windows Forms. Nie oferuje on co prawda pozycjonowania absolutnego dla elementów znajdujących się wewnątrz panelu, ale relatywne. W praktyce oznacza to, że jeśli zastosujemy Canvas jako główny panel, to pozycjonowanie relatywne będzie równe pozycjonowaniu absolutnemu. Spójrzmy jak Canvas sprawuje się w praktyce:

wa2_8

Taki layout jest niezwykle przydatny jeżeli chcemy, by dany element na pewno znalazł się w takiej a nie innej lokalizacji, a nie umiemy zaprojektować wyglądu używając pozostałych układów. Tak wygląda nasz przykład:

wa2_9

Na tym kończymy wpis! Wkrótce kontynuacja na temat Windows Store app, czego celem końcowym ma być w pełni działająca aplikacja.

Napisz komentarz