[Tutorial] XAML od Podstaw - Lekcja 1

Ciekawe artykuły dotyczące C#

Moderator: xxSlayeRxx

[Tutorial] XAML od Podstaw - Lekcja 1

Sponsor

Sponsor
 

[Tutorial] XAML od Podstaw - Lekcja 1

Postprzez `DrumZy » Śr lut 24, 2010 9:50 am

Powitać :)

Postanowiłem z nudów napisać kilka lekcji korzystania z XAML'a.


Lekcja 1 - Poznajemy XAML'a.


1. Co to jest XAML i po co się go używa.

XAML (ang. Extensible Application Markup Language) jest to oparta na XML gramatyka, pozwalająca definiować za pomocą znaczników stan obiektów w aplikacjach WPF (Windows Presentation Fundation). Używa się go najcześciej do tworzenia Graficznych Interfejsów Użytkownika (ang. GUI - Graphic User Interface).


2. Jak zacząć prace z tym językiem?

Na początek należy pobrać Visual C# 2008 Express Edition. Po zainstalowaniu i uruchomieniu środowiska, powinniśmy mieć przed oczyma taki widok:

Obrazek

Jeżeli nie mamy, klikamy na górnym pasku zakładke View i wybieramy kolejno:

- Error List, Properties Window, Solution Explorer oraz jeżeli Toolbox wygląda tak:

Obrazek

Klikamy na niego (RAZ) i potem klikamy ikonę pinezki po prawej stronie wyświetlonego okienka.

OK! Jesteśmy gotowi!

/-----------------------------------------------/

3. Zaczynamy pracę z XAML (pierwszy program)

Teraz mająć otwarte główne okno aplikacji, wybieramy File -> New Project.
Zaznaczamy WPF Application, nadajemy nazwę FirstWPFApp.

Powinno to wyglądać tak:

Obrazek

Następnie naciskamy OK.

Po krótkiej chwili zobaczymy taki widok.

Obrazek

Którtki opis okien znajdujących się na ekranie:

- Toolbox:

Obrazek

Tutaj znajdują się wszystkie kontrolki które będzie można dodawać do Okna programu, np.
TextBox, Label, ListBox itp.

Jeżeli niewidzisz tych kontrolek kliknij na + Controls w oknie Toolbox.

- Główne Okno Design i XAML View.

Obrazek

Tutaj dzieję się cała magia tworzenia programu :)
Tutaj opisujemy ogólny wygląd aplikacji, czyli fachowo: Projektujemy Interfejs Użytkownika.

- Solution Explorer(a) i Properties(b)

Obrazek

a) Tutaj znajdą się wszystkie pliki w projekcie takie jak: Okna, Zdjęcia, Pliki Konfiguracji itp.

b) Tutaj ustawiamy różne opcje dla wszystkich kontrolek i okien. Np. Wysokość okna, nazwę okna ale także np. Wartość kontroli Label (czyli napisu).

/----------------------------------------------/

Ok, gdy już znamy nasze środowisko, możemy przystąpić do:

4. Pierwszy program w XAML

Widzimy zakładkę XAML przechodzimy do pola
Kod: Zaznacz cały
<Grid> </Grid>


Wpisujemy w nań:
Kod: Zaznacz cały
<Button Width="100" Height="50" Content="Mój przycisk" VerticalAlignment="Center" HorizontalAlignment="Center"/>


W oknie Design powinniśmy zobaczyć przycisk z napisem "Mój przycisk".
Naciskamy F5 i cieszymy się pierwszą aplikacją w XAML. :)

Obrazek

Ok, trochę opisu tego cośmy zrobili:

- Width(czyt. ły(t)f) (przy t(f) język musi być między zębami) i Height to odpowiednio Szerokość i Wysokość.

Dlaczego napisałem jak czytać Width? Ponieważ połowa osób (informatyków), których znam nie potrafi poprawnie wypowiedzieć tego słowa. :)

- Content, czyli odpowiednik Text. Ustawia napis na kontrolce.

- VerticalAlignment i HorizontalAlignment - W tym wypadku, wyśrodkowuje kontrolkę w poziomie i pionie w oknie. Warto zauważyć, że dobrze jest znać trochę angielski pisząc w C# i nie tylko w tym języku.

Teraz należałoby oprogramować nasz przycisk, czyli jak go klikniemy coś robił. (ang. Event) :)

Możemy to zrobić na dwa sposoby:

1. Pisząc w XAML'u pod <Button (...)/>:
Kod: Zaznacz cały
<x:Code>
          <![CDATA[
        private void btnPrzycisk_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Witam! :)");
        }]]> 
        </x:Code>


lub(nigdy naraz) klikając w Designer'ze na niego dwa razy.
Wtedy ujrzymy taki widok:

Obrazek

Ja polecam tą drugą metode, iż XAML'owi lepiej zostawić sam interfejs. ;)

Naciskamy F5 i klikamy w przycisk. :)

/--------------------------/
Teraz troche objaśnień:

Kod: Zaznacz cały
<x:Code>
</x:Code>


Znaczniki oznaczające, że będziemy używali zwykłego C# do oprogramowania kontrolek/ki.

Kod: Zaznacz cały
<![CDATA[
        private void btnPrzycisk_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Witam! :)");
        }]]>


Odpowiada za implementacje języka C# w XAML'u.

Kod: Zaznacz cały
private void btnPrzycisk_Click(object sender, RoutedEventArgs e) { }


To metoda która się wykona po (w tym wypadku) kliknięciu w przycisk.

Takich rodzajów metod jest wiele (MouseDown, DragDrop) itp.
Aby zobaczyć listę wszystkich, wracamy do Designera klikając w głównym oknie zakładke Window1.xaml oraz w oknie Properties klikamy ikone Pioruna.

Myślę, że na początek wystarczy Wam taka wiedza. :)


Co w następnej lekcji?

- Poznamy nowe kontrolki, oraz pobawimy się oknem (w tym problematyka zmiany nazwy pliku).


/------------------------------------/
Zapraszam i polecam `DruMzY :)
Ostatnio edytowano Pt lut 26, 2010 11:08 am przez `DrumZy, łącznie edytowano 1 raz
`DrumZy
Member
 
Posty: 93
Dołączył(a): Pt maja 22, 2009 6:56 pm
Lokalizacja: Piotrków Trybunalski

Re: [Tutorial] XAML od Podstaw :)

Postprzez pablo663 » Śr lut 24, 2010 8:21 pm

Dzięki. Na pewno się przyda :)
pablo663
New member
 
Posty: 2
Dołączył(a): Pn lut 22, 2010 7:28 pm

Re: [Tutorial] XAML od Podstaw :)

Postprzez MaRCHeW » Cz lut 25, 2010 7:28 pm

Witam.

Dzięki. Czekamy na kolejne tutoriale :)

Pozdrawiam
Karol Marchewka
MaRCHeW
Member
 
Posty: 34
Dołączył(a): Śr wrz 12, 2007 6:07 pm

Re: [Tutorial] XAML od Podstaw :)

Sponsors

Sponsor
 


Powrót do Artykuły

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 1 gość