Hello, WPF!

Prvi i klasični primjer u bilo kojem tutorialu za programiranje je "Hello, world!", ali u ovom tutorialu ćemo biti divlji i umjesto toga napraviti ćemo "Hello, WPF!" primjer. Cilj je prikazati ovaj tekst na ekranu, da vidite kako je jednostavno započeti.

Ostatak ovog tutoriala pretpostavlja da imate instaliran IDE, poželjno Visual Studio ili Visual Studio Community (pogledajte prethodno poglavlje za upute kako ga nabaviti). Ukoliko koristite drugi proizvod, morat ćete prilagoditi upute vašem proizvodu.

U Visual Studiu, započnite odabirom New Project iz izbornika File. Na lijevoj strani, trebali biste imati stablo kategorija. Ovaj tutorial će se fokusirati na C# svugdje gdje je uključen kod, stoga biste trebali izabrati to iz liste predložaka i budući da ćemo raditi Windows aplikacije, trebali bi izabrati Windows iz stabla. Ovo će vam dati listu mogućih tipova Windows aplikacija na desnoj strani, odakle biste trebali odabrati WPF Application. Ja sam svoj projekt nazvao "HelloWPF" u tekstualnom polju Name. Provjerite da su ostale postavke u dnu prozora u redu te stisnite gumb OK.

Vaš novi projekt će imati nekoliko datoteka, ali zasad ćemo se fokusirati samo na jednu od njih: MainWindow.xaml. Ovo je primarni prozor aplikacije, onaj koji će prvi biti prikazan prilikom pokretanja aplikacije, ukoliko to eksplicitno ne promijenite. XAML kod koji se ovdje nalazi (XAML će biti detaljnije objašnjem u sljedećem poglavlju ovog tutoriala) bi trebao izgledati ovako:

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
    <Grid>

    </Grid>
</Window>

Ovo je osnovni XAML koji je Visual Studio napravio za naš prozor, svi dijelovi će biti objašnjeni u poglavljima o XAMLu i poglavlju "Prozor". Aplikaciju možete zapravo i sad pokrenuti (odaberite Debug -> Start debugging ili stisnite F5) te ćete vidjeti prazan prozor koji sačinjava trenutno našu aplikaciju, ali sada je vrijeme da stavimo našu poruku na ekran.

To ćemo napraviti dodavanjem TextBlock kontrole na Grid panel, sa prije spomenutom porukom kao sadržajem:

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
    <Grid>
        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="72">
            Hello, WPF!
        </TextBlock>
    </Grid>
</Window>

Pokušajte sada pokrenuti vašu aplikaciju (odaberite Debug -> Start debugging ili stisnite F5) i pogledajte prekrasan rezultat vašeg mukotrpnog rada - vašu prvu WPF aplikaciju:

Primjetit ćete da smo koristili tri različita atributa na TextBlock kontroli da prilagodimo poravnanje (u sredinu prozora), te FontSize svojstvo da dobijemo veći tekst. Svi ovi pojmovi će biti objašnjeni u kasnijim člancima.

Čestitamo što ste došli ovako daleko. Sada krenite čitati ostatak tutoriala i uskoro ćete biti majstori za WPF!