WPF pro začátečníky – 1.díl – Úvod do WPF a vytvoření projektu
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

WPF pro začátečníky – 1.díl – Úvod do WPF a vytvoření projektuWPF pro začátečníky – 1.díl – Úvod do WPF a vytvoření projektu

 

WPF pro začátečníky – 1.díl – Úvod do WPF a vytvoření projektu

Google       Google       26. 5. 2014       18 848×

Není tomu tak dávno, kdy se s aplikacemi pracovalo pomocí příkazového řádku. Dnes je však ve většině případů pro úspěch aplikace klíčové vytvořit jí přehledné a jednoduše ovladatelné grafické uživatelské rozhraní (GUI). V .NET jsou pro vytváření GUI připraveny dvě technologie - starší WinForms (WF) a modernější Windows Presentation Foundation (WPF). Tento seriál se věnuje právě druhému zmíněnému. 

Reklama
Reklama

Úvod

První díl seriálu bude věnován výkladu základních pojmů ve WPF. Založíme nový projekt a vytvoříme jednoduché okno, ve kterém bude napsáno "Hello World". 

Pokud chcete vytvářet WPF aplikace, je nutné mít nainstalované Visual Studio. Plnohodnotné aplikace lze však vytvářet i v express verzi (Visual Studio Express 2013 for Windows Desktop), kterou si můžete zdarma stáhnout například zde

Práce vám samozřejmě půjde lépe od ruky v případě, že máte alespoň minimální zkušenosti s programováním. Ideální je základní znalost C# a XML. Orientace v .NET je výhodou, ale alespoň pro prvních pár dílů není potřeba, stejně tak jako znalost vývojového prostředí Visual Studia.

Teoretický základ

Zkraje bych rád vysvětlil několik teoretických pojmů, ale jedná se opravdu jen o nezbytný základ. Do větších detailů se pustím až v některých dalších dílech. 

WPF

Jedná se o technologii umožňující vytvářet grafické uživatelské rozhraní. V .NET Frameworku je od verze 3.0 (původní název pro WPF byl Avalon). Ve WPF je připravena rozsáhlá zásoba nezbytných základních ovládacích prvků (tlačítko, textové pole, tabulka apod.) - nic vám však nebrání vytvořit si vlastní, do čehož se pustíme v některých pokročilých dílech tohoto tutoriálu. WPF používá k vykreslování knihovny Direct3D. Grafika v aplikaci je vykreslována vektorově, což s sebou nese nespočet výhod. Pro vytváření GUI lze využívat značkovací jazyk XAML (čti „zaml“), díky kterému lze oddělit funkčnost od vzhledu aplikace a tak i podstatně zefektivnit vývoj aplikací v týmu.

WPF vs. WinForms

WPF je konkurencí (či by se dalo říct nástupcem) starší technologie WinForms, oproti které se ale v mnoha aspektech velice liší. V krátkosti jen pár největších výhod WPF oproti WinForms:

  • Relativní pozicování - WF ukládá pozici ovládacích prvků absolutní pozicí v rámci formuláře. Což je sice jednodušší pro samotný návrh, ale velmi nešikovné pro vytváření složitějších a dynamických formulářů. Právě pozicování ve WPF bude věnován samostatný díl seriálu.
  • DataBinding - lepší oddělení dat/funkcí od samotné grafické interpretace. Ve spojení s návrhovým vzorem MVVM (Model, View, ViewModel) se jedná o velmi užitečný nástroj. DataBindingu bude věnován minimálně jeden celý díl.
  • XAML - cokoliv, co vytvoříte v designeru, má svou interpretaci v XAMLu. To přináší například efektivnější vývoj v týmu (jeden programátor dodá data/funkce a druhý vytvoří formulář v XAMLu). XAMLu se budeme věnovat v druhém dílu.
  • Není problém vytvořit aplikaci, která bude dobře vypadat a ovládat se jak na velkém monitoru (s velkým rozlišením) s klávesnicí a myší, tak i na tabletu či mobilu s dotykovým displejem. Ve WF je to mimo jiné problém díky slabší podpoře DPI. WPF zavádí svou jednotku délky DIP (Device Independent Pixel). Pro upřesnění - při nastavení DPI 96 (základní nastavení Windows) je jeden DIP roven právě jednomu pixelu.
  • Stylování – stylování ovládacích prvků probíhá podobně, jako když stylujete web pomocí CSS. Můžete si vytvořit nekonečné množství stylů, které pak jen využíváte dle potřeby. 
  • Hardwarová akcelerace GUI - podstatně rychlejší vykreslování.

Rozdílů a odlišností je samozřejmě více. Dalo by se téměř říct, že se jedná o naprosto odlišné technologie. I přesto však není problém hostovat ovládací prvek vytvořený ve WPF ve WF a naopak. Jak toho dosáhnout, bude taktéž řečeno v některém z pokročilejších dílů tutoriálu.

Nevýhodou WPF je především nutnost naučit se spoustu nových znalostí. Nějaký čas trvá, než se ho naučíte používat správně a efektivně. Ve WF je vytváření na první pohled intuitivnější, na druhou stranu je ale omezenější. Především tehdy, když chcete vytvořit moderní aplikaci.

Pokud se naučíte WPF, v budoucnu pro vás nebude problém vytvářet UI pro Windows Phone či Windows Store aplikace nebo pracovat s technologií Silverlight. Jsou zde sice jisté rozdíly, ale filozofie je velmi podobná.

Vytvoření WPF projektu

Založení nového WPF projektu

Začněte spuštěním Visual Studia (obrázky pracují s verzí VS Express 2013 for Windows Desktop). Založte nový projekt (File/New/Project…). Okno, které se vám zobrazí, by mělo vypadat přibližně takto (Obr. 1). V levém sloupečku vyberte Installed/Templates/Visual C#/Windows (Obr. 1 - 1), následně zvolte WPF Application (Obr. 1 - 2) a vyplňte název aplikace Name (Obr. 1 - 3) například „WpfTutorialHelloWorld“. 

Obr. 1: Založení nového WPF projektu

Práce s vývojovým prostředím

Po založení projektu by se vám měl automaticky otevřít soubor MainWindow.xaml v půleném okně s postranními panely (Obr. 2), kde v dolní části vidíte již zmíněný XAML (Obr. 2 - 2) a v horní části pak jeho grafickou intepretaci v designeru (Obr. 2 - 1). Pokud z nějakého důvodu nevidíte náhled na XAML a designer najednou, tak stiskněte prostřední tlačítko na ovládacím prvku (Obr. 2 - 5) nacházejícím se v pravém dolním rohu okna. Každopádně v prvním díle tutoriálu se nebudeme XAMLem jako takovým vůbec zabývat, k práci nám proto postačí pouze okno designeru. 

Obr. 2: Popis vývojového prostředí

V Solution Exploreru (Obr. 2 - 3) pak vidíte, že v našem projektu existují dva soubory s koncovkou xaml, a to App.xaml a MainWindow.xaml. MainWindow.xaml je ten, který byl automaticky otevřen po spuštění aplikace. To, k čemu slouží App.xaml, není v tuto chvíli důležité – časem se k tomu určitě dostaneme.

V pravém dolním rohu obrazovky byste měli vidět tabulku Properties (Obr. 2 - 4), která slouží k nastavování vlastností vybraného ovládacího prvku. Aktuálně by měla být prázdná, protože nemáme vybraný žádný ovládací prvek. S touto tabulkou budeme v tomto díle pracovat.

Pokud jakékoliv výše zmíněné okno/panel nevidíte, klikněte na položku VIEW v horní nabídce menu Visual Studia a zde byste měli být schopni dané okno/panel zobrazit.

Úprava vzhledu okna

Nyní upravíme základní vzhled okna (Window), které vidíme v designeru (Obr. 2 - 1). Změníme mu výchozí rozměry, přidáme nadpis do hlavičky okna a zakážeme změnu velikosti.

V okně designeru klikněte na hlavičku okna, které by v tuto chvíli mělo mít nadpis MainWindow. Pokud tak učiníte, mělo by se vám okno modře obtáhnout a v tabulce Properties byste měli mít přístupné jeho vlastnosti. V hlavičce panelu Properties byste měli v položce Type (Obr. 3 - 1) vidět text Window. Pokud tomu tak není, klikněte na okno ještě jednou a buďte si jisti, že neklikáte dovnitř okna – tím byste totiž vybrali obsah okna (v našem případě Grid).

Nyní změníme několik vlastností. Začneme se změnou nadpisu v hlavičce okna - najděte položku Title (Obr. 3 - 3) nacházející se v části Common a změňte ji například na „WPF Tutorial“. Vlastnost ResizeMode (Obr. 3 - 2) nastavte na NoResize – tím zakážete uživateli změnu velikosti okna. Následně rozklikněte sekci Layout a změňte šířku - Width (Obr. 3 - 4) na 300 a výšku - Height (Obr. 3 - 5) na 200.

Výslednou změnu byste měli vidět přímo v designeru. Všimněte si zmenšené velikosti okna a jiného nadpisu. Změnu velikosti okna lze samozřejmě provést i přímo v designeru táhnutím za kraj okna.

Obr. 3: Window – Tabulka Properties

Vložení textu

K vložení jednoduchého textu do vytvořeného okna použijeme ovládací prvek TextBlock. Pro pohodlné a rychlé vložení TextBlocku do vašeho okna aplikace v designeru si nejdříve rozklikněte sbalenou záložku Toolbox (Obr. 4 - 1), kterou naleznete v levém horním rohu okna VS. Následně rozklikněte sekci Common WPF Controls (Obr. 4 - 2). Zde byste měli vidět seznam základním ovládacích prvků WPF. Vyberte TextBlock (Obr. 4 - 3) a přetáhněte ovládací prvek na plochu vašeho okna v designeru. Po přetažení by se vám měl vytvořit nový grafický prvek v okně aplikace s textem TextBlock

Obr. 4: Toolbox - Přidání TextBlocku

Úprava TextBlocku

V designeru klikněte na TextBlock – při držení levého tlačítka myši můžete prvek libovolně přesouvat po ploše okna. Až budete hotovi s umístěním TextBlocku, přistupte ke změně textu na „Hello World“. Text je u tohoto prvku udán vlastností Text, přesuňte proto svou pozornost na panel Properties, v sekci Common nalezněte vlastnost Text a adekvátně jí změňte na „Hello World“. 

Další vlastnosti TextBlocku můžete libovolně měnit pomocí nastavení v dalších záložkách v panelu Properties. Například barva písma je daná vlastností Foreground, kterou naleznete v sekci Brush apod.

První spuštění

Nyní je čas vyzkoušet si, jak vypadá naše aplikace po spuštění. Aplikaci spustíte kliknutím na tlačítko Start umístěné v toolbaru VS nebo stiskněte klávesu F5. Projekt by se vám měl poměrně svižně zbuildovat a následně spustit. Pokud vše proběhlo bez chybového hlášení, měli byste vidět okno aplikace tak, jak jste ho viděli v designeru.

Obr. 5: Výsledná aplikace

Aplikaci lze následně zavřít klasickým kliknutím na křížek v aplikaci nebo přímo v toolbaru VS na tlačítko s ikonkou červeného čtverce (Stop Debugging) či klávesovou zkratkou Shift+F5 v prostředí VS. 

Závěr

To je vše pro tento úvodní díl WPF tutoriálu. Vysvětlili jsme si pár základních pojmů z WPF. Vytvořili jsme WPF projekt, upravili velikost a chování okna, do kterého jsme vložili TextBlock s textem „Hello World“. Pro vytvoření této mini aplikace stačilo pouze znát základy práce s VS. Příště se podíváme blíže na XAML, přidáme do okna tlačítko, na které navážeme akci, která změní text TextBlocku.

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

Hlasování bylo ukončeno    
9 hlasů
Google
(fotka) Jan VávraHonza je programátor s několikaletou praxí v .NET Framework, ve kterém si nejvíce oblíbil technologie WPF a ASP.NET (WebForms i MVC). Mezi jeho koníčky patří vedle sportu i skládání elektronické hudby pod aliasem John Waver či amatérské hrátky v programu Adobe Photoshop.
Web     Twitter     Facebook     LinkedIn    

Nové články

Obrázek ke článku Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Touto roční dobou, kdy je zem pokrytá barevným listím a prsty křehnou v mrazivých ránech, se obvykle těšíme na zbrusu novou verzi RAD Studia. Letos si však ale budeme muset počkat na Godzillu a Linux až do jara. Vezměme tedy za vděk alespoň updatem 2 a jelikož dle vyjádření pánů z Embarcadero se budou nové věci objevovat průběžně, pojďme se na to tedy podívat.

Reklama
Reklama
Obrázek ke článku Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Stále rostoucí zájem o cloudové služby i maximální důraz na pružnost, spolehlivost a bezpečnost IT vedou k výrazným inovacím v datových centrech. V infrastruktuře datových center hraje stále významnější roli software a stále častěji se lze setkat s hybridními přístupy k jejich budování i provozu.

Obrázek ke článku Konference: Mobilní technologie mají velký potenciál pro byznys

Konference: Mobilní technologie mají velký potenciál pro byznys

Firmy by se podle analytiků společnosti Gartner měly  rychle přizpůsobit skutečnosti, že mobilní technologie už zdaleka nejsou horkou novinkou, ale standardní součástí byznysu. I přesto - nebo možná právě proto - tu nabízejí velký potenciál. Kde tedy jsou ty největší příležitosti? I tomu se bude věnovat již čtvrtý ročník úspěšné konference Mobilní řešení pro business.

Obrázek ke článku Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres HCPP16 pořádá od 30. září do 2. října nezisková organizace Paralelní Polis již potřetí, a to ve stejnojmenném bitcoinovém prostoru v pražských Holešovicích. Letos přiveze na třídenní konferenci přes 40 většinou zahraničních speakerů – lídrů z oblastí technologií, decentralizované ekonomiky, politických umění a aktivismu. Náměty jejich přednášek budou také hacking, kryptoměny, věda, svoboda nebo kryptoanarchie.

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý