Jan Vávra - Osobní stránky

WPF Tutorial Díl 1. - Hello World ve WPF

Když jsem před několika lety začínal tvořit ve WPF záhy jsem zjistil, že na českém webu o této technologii není příliš článků. Nyní je situace o něco lepší, ale stále si myslím, že není nikdy na škodu také něčím přispět. Proto jsem se rozhodl začít psát seriál o WPF – a to formou praktických ukázek s co možná nejjednodušším popisem funkce. Do větších podrobností začnu zabíhat možná časem. Seriál předpokládá, že čtenář má určité zkušenosti s programováním. Ideálně alespoň základní znalost C# a XML, orientace v. NET je výhodou, ale alespoň pro prvních pár dílu není potřeba.

Úvod

V prvním dílu seriálu si vytvoříme okno zobrazující Hello World. Vytvoříme jednoduché okno, které lehce upravíme a vložíme do něj jeden prvek – Label, ve kterém bude napsáno Hello World. Nic složitého ani časově náročného. Proto se do toho pustíme hned.

Vytvoření WPF projektu

Začněte spuštěním Visual Studia – v mém případě VS 2013. Založte nový projekt (File/New/Project…), v levém sloupečku vyberte Templates/Visual C#/Windows/WPF Application, název aplikace(Name) například WpfTutorial. Okno by mělo vypadat přibližně následovně.

wpf dil1 01

Po založení projektu by se vám mělo otevřít okno MainWindow.xaml. To co nyní vidíte je XAML (eXtensible Application Markup Language). V krátkosti XAML(čteno zaml) popíši.

XAML

Jedná se o značkovací jazyk založený na XML, které slouží k vytváření uživatelského rozhraní. Grafické rozhraní ve WPF se nejlépe píše právě v XAML, není problém GUI psát přímo v kódu, ale to je velice nešikovné a nepřehledné. XAML tedy odděluje programovou část od GUI. Každý XAML má svůj Codebehind (s koncovkou .cs v případě využití C#).

Upravení vzhledu okna

Vraťme se zpět k MainWindow.xaml. Když se podíváte do XAML vidíte kořenový element Window, který obsahuje několik atributů. Pro nás je v tuto chvíli zajímavý pouze Title, Height, Width.

  • Title – Nadpis okna, zobrazující se v hlavičce okna
  • Height – Výška okna
  • Width – Šířka okna

Změňte Title například na „WPF Tutorial“, Height a Width můžete natavit například na hodnoty 250.

Vložení Labelu

V obsahu elementu Window je vložen element Grid. Tento element pro tuto chvíli smažte. Co je Grid se budeme věnovat v nějakém dalším díle. Do obsahu elementu Window vložte následující element.

<Label Content="Hello World" />

Vložit Label lze též pomocí Toolboxu(View/ToolBox), kde můžete vidět přehled všech dostupných základních prvků WPF. 

Váš MainWindow.xaml by měl vypadat následovně: 

<Window x:Class="WpfTutorial.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Wpf Tutorial" Height="250" Width="250">
        <Label Content="Hello World" />
</Window>

 Nyní zkuste spustit aplikaci (Debug/Start Debbuging) nebo zmačknutím klávesy F5. Po krátkem načítání by se mělo zobrazit okno s nadpisem „WPF Tutorial“ a uvnitř okna byste měli vidět text „Hello World“.

wpf dil1 02

Závěr

Gratuluji, vytvořili jste WPF aplikaci! Nebylo to těžké že? No počkejte na další díly. WPF je velice šikovná technologie skrývající spoustu zajímavých zákoutí. Příště se pravděpodobně rozepíši o tom, co prvkem Label lze dále dělat a také o „záhadném“ Gridu, který jsme v tomto díle tak nenápadně přeskočili. Dále se krátce rozepíši o Designeru.

Pokračovat na Díl 2.

 

Vítejte

Mé jméno je Jan Vávra a jsem člověk s mnoha tvůrčími koníčky. Již od dětství jsem byl fascinován tvořením téměř čehokoliv. Ať už to bylo vymýšlení vlastních melodií, textů, vytváření úrovní do starých konzolových či PC her, natáčení, focení, programování textových her a mnoho dalších kreativních aktivit. Bohužel čas je neúprosný a není neomezený, a mé koníčky se tak nakonec ustálily na tom, co zveřejňuji na tomto webu. Primárně se teď zaměřuji na programování v .NET a hudební tvorbou pod aliasem "John Waver".