Czym właściwie jest XAML?

Gdy w Visual Studio tworzysz projekt typu WPF (Windows Presentation Foundation), wita Cię plik z dziwnym rozszerzeniem .xaml. Co to jest? Dlaczego nie piszemy okien w czystym C#? I czy Twoja wiedza z HTML-a z kwalifikacji INF.03 do czegoś się tu przyda?

1. Czym właściwie jest XAML?

Skrót XAML rozwija się jako Extensible Application Markup Language (Rozszerzalny Język Znaczników dla Aplikacji).

W skrócie: to stworzony przez Microsoft deklaratywny język, który służy do projektowania wyglądu aplikacji. Zamiast męczyć się i pisać w C#: „stwórz okno, dodaj przycisk o współrzędnych X, Y, dodaj tekst, zmień kolor...”, po prostu opisujesz strukturę interfejsu za pomocą znaczników, a system robi resztę za Ciebie.

💡 Dlaczego nie piszemy interfejsu w C#?
Chodzi o separację odpowiedzialności. XAML odpowiada wyłącznie za wygląd ("jak aplikacja ma wyglądać"), a C# za logikę ("co aplikacja ma robić po kliknięciu"). Taki podział to fundament profesjonalnych wzorców architektonicznych, takich jak MVVM.

2. XAML a HTML – brat czy daleki kuzyn?

Jeżeli tworzyłeś już strony internetowe w HTML-u, na pierwszy rzut oka XAML wyda Ci się znajomy. Używamy tu ostrych nawiasów < >, zagnieżdżeń i atrybutów. Uważaj jednak - pod maską to dwa zupełnie inne światy!

Cecha HTML XAML (WPF)
Baza technologiczna Standard hipertekstu WWW Ścisły standard XML
Wielkość liter Ignorowana (<button> = <BUTTON>) Kluczowa! (<Button> zadziała, <button> wywali błąd)
Tolerancja błędów Duża (przeglądarka naprawia niedomknięte tagi) Zerowa! Brak cudzysłowu lub zamknięcia = błąd kompilacji
Czym jest element? Elementem dokumentu na stronie WWW Prawdziwym obiektem w pamięci RAM

3. Złota zasada XAML: Pod maską to wciąż C#!

To najważniejsza rzecz na dziś: XAML to tak naprawdę sprytny zapis obiektów języka C#.

Zapamiętaj tę regułę:

Spójrz na ten przykład:

<!-- Zapis w pliku MainWindow.xaml -->
<Button Content="Zaloguj się" Width="120" Height="40" />

Kiedy kompilujesz projekt, kompilator zamienia ten znacznik na równoważny kod w C#:

// To dzieje się pod maską!
Button btn = new Button();
btn.Content = "Zaloguj się";
btn.Width = 120;
btn.Height = 40;

Nie uczysz się nowego języka programowania - uczysz się po prostu nowego, wygodniejszego sposobu powoływania do życia obiektów .NET!

4. Przestrzenie nazw (xmlns) czyli „using” w wersji XML

W nagłówku każdego okna XAML zobaczysz długie, skomplikowanie wyglądające linki z dopiskiem xmlns. Spokojnie, to nic strasznego!

xmlns to skrót od XML Namespace (przestrzeń nazw). Działa dokładnie tak samo jak linijka using System; na początku pliku w C#:

  • xmlns="..." (bez dwukropka) - to domyślna przestrzeń nazw kontrolek WPF. To dzięki niej możesz napisać po prostu <Button> czy <TextBox>, a kompilator wie, o jakie klasy chodzi.
  • xmlns:x="..." (z przedrostkiem x:) - to przestrzeń nazw samego silnika XAML. Daje Ci dostęp do specjalnych komend kompilatora, takich jak nadawanie kontrolkom unikalnej nazwy (x:Name="MojPrzycisk"), którą potem wykorzystasz w kodzie C#.

5. Drzewo elementów: Logiczne vs Wizualne

Interfejs w WPF nie jest płaskim rysunkiem - to zhierarchizowana struktura przypominająca drzewo:

Window (Korzeń)
 └── Grid (Kontener nadrzędny)
      └── Button (Przycisk)
           └── TextBlock (Tekst wewnątrz przycisku)

Wyróżniamy dwa spojrzenia na tę strukturę:

  1. Drzewo logiczne (Logical Tree): To, co piszesz i widzisz w kodzie XAML. Prosta relacja rodzic–dziecko: w oknie mamy siatkę, w siatce przycisk.
  2. Drzewo wizualne (Visual Tree): To, co silnik graficzny WPF faktycznie rysuje na ekranie. Jeśli spojrzysz na przycisk przez mikroskop, okazuje się, że to nie jest zwykły prostokąt, lecz cała orkiestra mniejszych elementów: ramka (Border), tło (ContentPresenter) oraz triggery reagujące na najechanie myszką.

🎓 Pytanie na egzamin INF.04: Po co istnieje drzewo elementów?
Dzięki niemu działa tzw. propagacja zdarzeń - gdy klikniesz myszką w przycisk, zdarzenie może „powędrować” w górę drzewa aż do okna głównego!

6. Szkielet pustego okna - rozbicie na czynniki pierwsze

Oto minimalny, poprawny szablon pustego okna w WPF. Zwróć uwagę na komentarze:

<Window x:Class="KursWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Pierwsza Aplikacja" Height="300" Width="400">
    
    <!-- Pamiętaj: plik XAML musi mieć dokładnie JEDEN główny kontener nadrzędny! -->
    <Grid>
        <!-- Znacznik samozamykający - zwróć uwagę na ukośnik na końcu! -->
        <Button Content="Kliknij mnie!" 
                Width="120" 
                Height="35" />
    </Grid>
    
</Window>