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

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

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vytvořte si vlastní webové stránky. Snadno, rychle a levně přes Saywebpage.com
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Laser Game Ostrava

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

Google       Google       26. 5. 2014       30 921×

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 V přechodu na DVB-T2 tápou především senioři. Přeladit jim pomáhají vnoučata, zapojí se i stát

V přechodu na DVB-T2 tápou především senioři. Přeladit jim pomáhají vnoučata, zapojí se i stát

Už na konci měsíce může zůstat část Čechů bez televizního signálu. Vypínání stávající sítě začne již 27. listopadu v Praze a středních Čechách a do poloviny roku 2020 čeká přechod na nový standard pozemního digitálního televizního vysílání DVB-T2 celou republiku. K naladění nového televizního vysílání musí řada lidí nakoupit modernější zařízení, upravit antény nebo přejít na kabelové či internetové vysílání. 

Reklama
Reklama
Obrázek ke článku Zavádění Master Data Management v praxi

Zavádění Master Data Management v praxi

Předchozím článku jsme si vysvětlili, co jsou to Master Data, kdy je firma obvykle začíná řešit, v jakých krocích postupovat a jak nám může pomoci zvláštní nástroj pro evidenci Master dat. V tomto článku se podíváme na dvou příkladech, jak prakticky začít Master data řešit.

1. Nová Master Data, která potřebujeme někde spravovat
2. Zmapování existujících Master dat a určení jejich vlastníků

Obrázek ke článku 5 nesprávných důvodů, proč dělat vlastní mobilní aplikaci

5 nesprávných důvodů, proč dělat vlastní mobilní aplikaci

Myslíte si, že máte skvělý nápad na byznys apku a znáte všechno, co potřebujete? Možná vám vývoj software na míru rozmluví Vláďa Skoumal, z firmy studio SKOUMAL vyvijející mobilní aplikace 5.11. 2019 v 18:00 v Impact Hub Praha nebo tento jeho článek.


 

Obrázek ke článku Ericsson ConsumerLab Report: rozšířená realita je další úrovní gamingu

Ericsson ConsumerLab Report: rozšířená realita je další úrovní gamingu

Celkem 66 % uživatelů zajímá rozšířená realita v oblasti gamingu. Mezi nimi je i 35 % těch, kteří jinak hry nehrají.
Pro téměř 50 % respondentů by bylo zajímavé zapojení virtuální objektů do reálného světa. Objekty by zůstaly tam, kde je při hře „umístili“.
Až 43 % uživatelů láká využití rozšířené reality ve sportu

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032019 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý