Ahoj, WPF!

První program, který obvykle programátor v novém jazyce vytváří, je "Hello World", čili "Ahoj, Světe!", a má za úkol zobrazit právě tuto hlášku uživateli. My to povýšíme a zobrazíme text "Ahoj, WPF!". Je to velice jednoduché.

Pro zbytek tohoto tutoriálu se předpokládá, že máte nainstalované IDE, nejlépe Visual Studio nebo Visual Studio Community (v předchozí kapitole najdete návod na instalaci). Používáte-li jiný program, pak si musíte přizpůsobit některé popsané instrukce tak, abyste dospěli ke stejnému výsledku ve svém programu.

Ve Visual Studiu založte nový projekt stisknutím volby New project (Nový projekt) z menuFile (Soubor). Na panelu vlevo vidíte několik otvíracích záložek. V tomto tutoriálu budeme zdrojový kód psát v jazyce C#, takže jej vyberte v rozkliknutím záložky Templates (Šablony). Budeme tvořit aplikace pro systém Windows, takže dále zvolte Windows v otevřené záložce C#. Tím vám Visual Studio nabídne seznam možných typů projektů, které odpovídají kritériím - jazyk C# a aplikace pro Window. Vyberte WPF Application (Aplikace ve WPF). V kolonce Name vyplňte jméno, my jsme zvolili "HelloWPF". Přesvědčte se, že i zbylá nastavení ve spodní části okna vyhovují a stiskněte Ok.

Váš nový projekt obsahuje několik souborů, nás však v tuto chvíli zajímá tento: MainWindow.xaml. Toto je primární okno aplikace, při jejím startu se ukáže jako první, pokud to nezměníte. Soubor obsahuje kód v jazyce XAML (o kterém je řeč v pozdějších kapitolách tohoto tutoriálu), který vypadá asi takto:

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

Toto je základový kód v jazyce XAML, který Visual Studio vytvoří při vložení okna aplikace do projektu. Veškeré části tohoto kódu jsou vysvětleny v kapitole XAML. Již nyní můžete aplikaci spustit (zvolte menu Debug -> Start debugging nebo stiskněte klávesu F5). Zobrazí se prázdné okno, což je zatím to jediné, čím naše aplikace disponuje. Nyní do něj dosadíme kýženou zprávu.

To uděláme tak, že do panelu typu Grid (mřížka) vložíme kontrolku TextBlock (textová oblast), do jehož obsahu vepíšeme naši zprávu.

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

Zkuste nyní aplikaci spustit (zvolte menu Debug -> Start debugging nebo stiskněte klávesu F5). Uvidíte nádherný výsledek své tvrdé práce - svou první aplikaci ve WPF:

Jak můžete vidět, předali jsme TextBlocku tři atributy, abychom dosáhli jednak vlastního rozložení v okně (tzv. alignment - v tomto případě uprostřed okna) a jednak většího textu - vlastnost FontSize. Veškeré popsané postupy více vysvětlíme v dalších článcích.

Gratulujeme, že jste dočetli tutoriál až sem. Pokračujte ve čtení a brzy z vás bude opravdový WPF mistr!