Hallo, WPF!

Het eerste en klassieke voorbeeld in vrijwel elke programmeerhandleiding is "Hallo, wereld!", maar in deze tutorial doen we lekker gek en veranderen dat in "Hallo, WPF!". Het doel is om dit stukje tekst op het scherm te krijgen, om je te laten zien hoe eenvoudig het is om te beginnen.

De rest van deze handleiding neemt aan dat je een IDE geïnstalleerd hebt, bij voorkeur Visual Studio of Visual Studio Community (zie het vorige artikel voor instructies om deze te bemachtigen). Als je een ander product gebruikt, zul je de instructie aan moeten passen aan jouw product.

In Visual Studio begin je met het selecteren van Nieuw project (eng: 'New project') in het menu Bestand (eng: 'File'). Aan de linkerkant zie je een boom van categorieën. Deze tutorial zal zich richten op C# wanneer er code in het spel is, dus selecteer je dit best in de lijst met sjablonen. Aangezien we Windowsapplicaties gaan maken, moet je Windows selecteren uit de boom. Dit geeft aan de rechterkant een lijst met mogelijke Windowsapplicatietypen, waar je een WPF-Applicatie (eng: 'WPF Application') moet selecteren. Ik heb mijn project de naam "HelloWPF" gegeven in het Naam (eng: 'Name') tekstveld. Zorg ervoor dat de overige instellingen in het onderste gedeelte van het dialoogvenster in orde zijn en druk dan op de knop Ok.

Je nieuwe project zal een aantal bestanden hebben, maar voorlopig focussen we op slechts eentje: MainWindow.xaml. Dit is het primaire applicatievenster, het eerste dat getoond wordt wanneer de applicatie gestart wordt, tenzij je dit specifiek verandert. De XAML-code die je hierin kan vinden (XAML wordt in een ander hoofdstuk van deze handleiding besproken) zou er ongeveer zo moeten uitzien:

<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>

Dit is de basis XAML die Visual Studio voor ons venster maakt, alle delen ervan worden uitgelegd in de hoofdstukken over XAML en "Het Venster". Je kunt de toepassing daadwerkelijk uitvoeren (selecteer Debug -> Start debugging of druk op F5) om het lege venster te zien waar onze toepassing momenteel uit bestaat, maar nu is het tijd om onze boodschap op het scherm te krijgen.

We doen het door een TextBlock besturingselement toe te voegen aan het Grid paneel, met ons eerdergenoemde bericht als inhoud:

<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>

Probeer de toepassing nu uit te voeren (selecteer Debug -> Start debugging of druk op F5) en bekijk het prachtige resultaat van je harde werk - je eerste WPF-toepassing:

Je zult zien dat we drie verschillende attributen op het TextBlock hebben gebruikt om een aangepaste uitlijning te krijgen (in het midden van het venster), evenals de eigenschap FontSize om een grotere tekst te krijgen. Al deze concepten zullen in latere artikelen worden behandeld.

Gefeliciteerd om zover te komen. Als je de rest van de handleiding leest, zul je spoedig op weg zijn om een echte WPF-meester te worden!