aplikacja windows store apps tworzenie

Podstawy Windows Store: tworzymy pierwszą aplikację!29 września 2016

Dziś na naszym blogu rozpoczynamy cykl wpisów na temat Windows Store Apps! Kierujemy go do osób, które nigdy nie miały do czynienia z tą technologią, a chciałyby postawić swoje pierwsze kroki w tym kierunku. Każdą naukę zaczynamy zazwyczaj od stworzenia prostej aplikacji – z czasem jednak będziemy ją rozwijać w kolejnych wpisach. Zaczynamy!

Nasza pierwsza aplikacja będzie składać się z formularza tekstowego wyświetlającego wprowadzone dane. Aby rozpocząć tworzenie nowego projektu, z menu File wybieramy pozycję „New Project”. Otworzy się nam okno z wyborem języka oraz szablonu aplikacji.

Okno wyboru rodzaju aplikacji.

W otwartym oknie znajdziesz Windows 8 (w Visual Studio 2012 powinien być opis Windows Store). W polu „name” wpisujemy np: WindowsApp i klikamy przycisk OK. Do wyboru mamy również cztery zdefiniowane szablony. Są to:

  • Blank App – pusta aplikacja składająca się z jednej strony, bez zdefiniowanego layoutu oraz kontrolek,
  • Hub App – aplikacja składająca się z dwóch stron. Grupowanie elementów oraz szczegóły pojedynczego elementu przy zastosowaniu kontrolek typu HUB,
  • Grid App – aplikacja złożona z trzech stron – siatki wyświetlającej wszystkie prezentowane elementy, zgrupowanych elementów oraz szczegółów pojedynczego elementu,
  • Split App – aplikacja składająca się z dwóch stron – grupowanie elementów oraz szczegóły pojedynczego elementu.

Stworzony został nowy projekt. W Solution Explorer powinniśmy zobaczyć:

2.Widok okna Solution Explorer

Tu powinniśmy zobaczyć podstawowe pliki:

  • Assets/logo.png – logo aplikacji wyświetlane na ekranie startowym,
  • Assets/smalllogo.png – małe logo aplikacji wyświetlana na liście aplikacji,
  • Assets/splashscreen.png – grafika wyświetlana podczas uruchamiania aplikacji,
  • Assets/storelogo.png – logo aplikacji wyświetlane w sklepie z aplikacjami,
  • App.xaml – zdefiniowane są zasoby na poziomie aplikacji,
  • MainPage.xaml – strona główna aplikacji,
  • Package.appxmanifest – manifest aplikacji zawierający informacje o nazwie aplikacji, jej opisie, ikonach, wersji, itp.

Pliki MainPage.xaml i MainPage.xaml.cs są powiązane. Dzieje się tak, ponieważ są częścią definicji klasy MainPage. Widok pliku MainPage.xaml.cs powinien wyglądać następująco:


3.Widok pliku MainPage.xaml.cs
Plik ten został już “wyczyszczony” z niepotrzebnych dyrektyw using; tak naprawdę będą nam potrzebne tylko dwie.

Konstruktor klasy MainPage wywołuje metodę InicializeComponent. Klasa zawiera również przeciążoną metode OnNavigateTo; dzieje się tak, ponieważ aplikacja ma strukturę strona -nawigacja. Definicja klasy jest kontynuowana w innym pliku źródłowym – MainPage.xaml


wa4

Plik ten zawiera znaczniki zgodnie ze standardem XAML. Z plików XAML będziemy korzystać przy definiowaniu części wizualnej.

Pierwszym i głównym elementem pliku XAML jest Page. Jest ona klasą interfejsu Windows Runtime, a atrybut x:Class może występować tylko wewnątrz głównego elementu. Kolejne linie to deklaracje przestrzeni nazw XML. Nasza klasa zawiera obiekt Grid, który dzieli się na wiersze i kolumny. Pozwala on zdefiniować poszczególne komórki. W celu dodania kontrolki tekstowej u
żyjemy klasy Text Block, która wyświetli nam prosty tekst: “Witaj na blogu firmy Kotrak”

wa5

Kolejność w jakiej dodajemy atrybuty nie ma najmniejszego znaczenia. My dodaliśmy kilka dodatkowych atrybutów, ale jeżeli chcesz zobaczyć jedynie tekst wystarczy, że zostawisz tylko atrybut Text. Dla bardziej leniwych jest też opcja przeciągnięcia kontrolki z Toolbox. Teraz wystarczy nacisnąć F5 i zobaczyć naszą pierwszą aplikację:

wa6

Na sam koniec wspomnijmy jeszcze o atrybutach, które zastosowaliśmy. Atrybuty HorizontalAlignment oraz VerticalAlignment spowodowały, że nasz tekst został wyświetlony na środku. Atrybuty typu Font są odpowiedzialne za krój pisma. Nasza aplikacja może być uruchamiana na tablecie, gdzie zaobserwujemy że aplikacja dynamicznie dostosowuje się zmian orientacji i proporcji.

To by było na tyle z wprowadzenia do aplikacji typu Windows Store. W dalszych wpisach będziemy stopniowo rozwijać naszą aplikację!

Część druga: poznaj składnię XAML

Napisz komentarz

Zobacz inne wpisy:
Relacja z Quality Excites 2016

29.06.2016 Magda Urbanowicz