Hello, WPF!

Det första och mest klassiska exemplet för nästan alla handledda programmeringsexempel är ”Hello world!”, men i detta exempel är vi lite vilda och ändrar det till ”Hello, WPF!” istället. Målet är helt enkelt att få ut en text på skärmen för att visa hur enkelt det är att komma igång.

Den resterande delen av detta exempel förutsätter att du har installerat en utvecklingsmiljö, helst Visual Studio eller Visual Studio Community (se föregående artikel för instruktioner om hur man hämtar den). Om du använder en annan produkt får du själv anpassa givna instruktioner till din produkt.

I Visual Studio, börja med att välja New project från menyn File. Du ska nu få tre kategorier till vänster. Detta övningsexempel kommer att ha fokus på C# då kod är involverad, så du ska välja det alternativet i listan av mallar. Vidare kommer vi att skapa Windowsapplikationer så du ska även välja alternativet Windows. Dessa val ger dig en lista med möjliga typer av Windowsapplikationer till höger. Där du ska välja alternativet WPF Application. Jag namngav mitt projekt till ”HelloWPF” i textfältet Name. Försäkra dig om att övriga inställningar i dialogens nedre del är riktiga och tryck därefter på knappen Ok.

Ditt nya projekt kommer att innehålla ett antal filer, men nu lägger vi focus på en: MainWindow.xaml. Denna fil är applikationens primära fönster, det som visas först då applikationen startas om du inte själv uttryckligen har angett något annat. XAML-koden i filen (XAML diskuteras i detalj i ett annat kapitel i detta övningsexempel) borde likna detta:

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

Detta är den grundläggande XAML som Visual Studio skapar för våra fönster, vars samtliga delar kommer att förklaras i kapitlen om XAML och kapitlet ”The Window”. Du kan faktiskt exekvera applikationen nu (välj Debug -> Start debugging eller tryck F5) för att se ett tomt fönster som vår applikation består av just nu. Nu är det dock dags att få ut vårt meddelande på skärmen.

Detta gör vi genom att lägga till en kontroll av typen TextBlock till vår Grid med vårt tidigare omnämnda meddelande som innehåll:

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

Försök att exekvera applikationen nu (välj Debug -> Start debugging eller tryck F5) och betrakta det vackra resultatet av vår krävande arbetsinsats – din första WPF-applikation:

Som du ser har vi använt tre olika attribut till TextBlock för att få en anpassad placering (i fönstrets mitt) såväl som FontSize för att få en större font. Alla dessa koncept kommer att behandlas i senare artiklar.

Grattis till att ha klara det så långt. Fortsätt nu läsa resten av denne handledda övning så kommer du snart att bemästra WPF!