Hallo, WPF!

Det første og mest klassiske eksempel i stort set en hvilken som helst tutorial for et programmeringssprog er "Hallo, verden!" (Hello world på Engelsk), men i denne tutorial skejer vi lidt ud og laver det om til "Hallo, WPF!" i stedet. Målet er ganske enkelt blot at få dette stykke tekst op på din skærm, for at illustrere hvor let det er at komme i gang.

I resten af denne tutorial antager vi at du allerede har et IDE installeret, helst Visual Studio eller Visual Studio Community (se en af de forrige artikler for instruktioner om hvordan du får fat i VS Community). Hvis du bruger et andet IDE/en anden editor, så skal du selv tilpasse instruktionerne i denne tutorial så de passer til dit valg af IDE/editor.

I Visual Studio skal du starte med at vælge New project fra File menuen. I den dialog der dukker op finder du til venstre en liste over projekt-kategorier. Denne tutorial vil fokusere på C# når der ellers er kode involveret, så vælg "Visual C#" fra listen over skabeloner, og eftersom at vi vil arbejde med Windows applikationer, skal du vælge Windows Desktop fra træ-strukturen. Dette vil give dig en liste over mulige Windows applikationer til højre i dialogen, hvor du skal vælge WPF App. Jeg har kaldt mit projekt for "HelloWPF" i Name feltet. Tjek herefter de resterende indstillinger i bunden af dialogen og når du er tilfreds skal du trykke på Ok knappen.

Dit nye projekt vil have et par forskellige filer, men vi vil fokusere på blot en af dem lige nu: MainWindow.xaml. Dette er applikationens primære vindue, det der vises først når applikationen køres, med mindre du specifikt ændrer på dette. XAML koden som du finder i denne fil (hvad XAML er skal vi nok komme til senere) skulle gerne se nogenlunde således ud:

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

Dette er blot den mest basale XAML der skal til for at lave et vindue, som Visual Studio har oprettet for os. Det vil blive forklaret i en af de senere artikler omkring XAML og "Vinduet". Du kan rent faktisk køre dit program nu (vælg Debug -> Start debugging eller tryk på F5) for at se det tomme vindue som lige nu er hele vores applikation. Det skal vi dog lave om på, for nu er det tid til at få noget tekst på skærmen.

Det gør vi ved at tilføje en TextBlock kontrol til Grid panelet, med førnævnte hilsen til verdenen som indhold:

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

Prøv at køre applikationen nu (vælg Debug -> Start debugging eller tryk F5) og se det smukke resultat af dit hårde arbejde - din første WPF applikation:

Læg mærke til at vi bruger tre forskellige attributer på TextBlock kontrollen for at få centreret teksten (horisontalt og vertikalt), samt FontSize for at få teksten gjort større. Alt dette vil blive forklaret senere i denne tutorial.

Tillykke med at have klaret den så langt. Nu kan du roligt gå i gang med resten af denne tutorial og snart vil du være en sand WPF-mester!