Co je Blend a k čemu se používá

Možná jste zaregistrovali Chrastyho články o adresáři ve WPF nebo o malování. Příklady jsme dělali ve Visual Studiu 2008, ale hlavní „tahák“ WPF a Silverlightu je bohaté uživatelské rozhraní. Možná vás napadla otázka „Kam se podělo?“. Vždyť Visual Studio poskytuje minimální možnosti upravení formuláře (resp. okna, podle názvosloví WPF), nedej bože kdybychom chtěli udělat nějakou animaci. A tady přichází ke slovu aplikace Blend od Microsoftu.

Blend není nic jiného než XAML WYSIWYG (What You See Is What You Get – „Co vidíš, to dostaneš“) editor. Umožňuje snadno vytvářet barevné přechody, animace, upravovat stávající kontroly, prostě vše, co vás může okolo návrhu GUI aplikace vůbec napadnout. Samozřejmě obsahuje i přímý editor XAML kódu, jen C# (nebo VB.NET) kód musíte upravovat externě, třeba ve Visual Studiu. Spoustu Silverlight ukázek vytvořených v Blendu naleznete na Community webu Expression produktů, případně i na hlavním webu Silverlightu .

Klikni pro zvětšení

V době psaní článku existují tři verze Blendu, jedna je prodávaná jako součást balíku Microsoft Expression (build 1083), druhá se jmenuje Blend 2, do prodeje vyšla jako součást Expression Studio 2, a třetí je Preview verze z června 2008 (Blend 2.5 June 2008 Preview). Třetí jmenovaná vám bude legálně fungovat i bez jakéhokoliv sériového čísla do ledna 2009, i to je jeden z důvodů, proč nás bude seriálem provázet tato verze. Důvod číslo dva je i podpora Silverlight 2 beta 2, ke kterému se určitě v budoucnu dostaneme. Sám používám tuto verzi už od chvíle, co se objevila na Internetu, je naprosto stabilní a není nijak omezená ve funkčnosti. Než se podíváme na samotný Blend, ještě zmíním, že celá aplikace je udělaná pomocí WPF (Windows Presentation Foundation).

Blend 2.5 June 2008 Preview stáhneme ze stránek Microsoft , pro instalaci budete potřebovat .NET Framework 3.5 .

První spuštění

Po prvním spuštění Blendu na vás vykoukne okno podobné tomu na obrázku, jen na záložce Projects nebudete mít historii otevřených projektů.

Klikni pro zvětšení

Dovolím si malou odbočku: na záložce Help naleznete odkaz na stránku s online tutoriály, kde můžete najít výborné video tutoriály na Blend, ale i na ostatní aplikace z balíku Expression. Za zmínku stojí i záložka Samples, pod kterou se ukrývá několik ukázkových WPF aplikací jako třeba piáno, nebo fotoalbum.

Klikni pro zvětšení

Na záložce Projects klikneme na New Project…, otevře se nám nové okno, kde máme možnost výběru z několika možností, WPF Application (.exe), WPF Control Library, Silverlight 1 Site, Silverlight 2 Application. Vybereme WPF Application (.exe), zadáme jméno aplikace, vybereme umístění, dále určíme, v kterém jazyce budeme náš program dělat. Na výběr máme C# a Visual Basic. Já použiju můj velmi oblíbený C#. Jako poslední zvolíme verzi .NET Frameworku.

Klikni pro zvětšení

Po kliknutí na tlačítko OK se před námi zobrazí okno s naším projektem.

Klikni pro zvětšení

Pracovní plochu Blendu můžeme rozdělit na čtyři části.

1. Panel nástrojů
   

   Klikni pro zvětšení
2. Interakce (Spouštěče (Triggers), Seznam prvků a časových os (Object and Timeline))
   

   Interakce
3. Samotný designér aplikace
   

   Klikni pro zvětšení
4. Pravý panel, který se dělí na 3 záložky
   • Projects ("Solution Explorer", Správce dat (Data))
   • Properties
   • Resources
   

   Pravý panel

Nástrojový panel

V této poslední části úvodního dílu seriálu si popíšeme nástrojový panel.

Klikni pro zvětšení

Selection (Výběr)

Tenhle nástroj budeme používat asi nejvíce, název mluví sám za sebe. Krom výběru použijeme tento nástroj pro posun prvků na správnou pozici, změnu jejich velikosti, rotaci a zakulacení rohů obdélníkovitých těles.

Selection (Výběr)

Direct Selection (Přímý výběr)

Tento nástroj oceníme v případě, kdy pracujeme s vektory (což je v Blendu většina času). Pomocí přímého výběru se dá snadno a rychle upravit jakýkoli obrazec.

Direct Selection (Přímý výběr)

Pan (Posun)

Slouží k posouváním celým oknem v momentech, kdy máme přiblíženou určitou část našeho formuláře. Za zmínku stojí, že pokud 2× poklepeme na tento nástroj, formulář se vrátí zpátky na střed obrazovky.

Klikni pro zvětšení

Zoom (Lupa)

K tomu to nástroji není potřeba psát žádná další komentář. Upozorním vás jen na to, že pokud na tento nástroj 2× poklepeme, přiblížení se vrátí na výchozí hodnotu.

Klikni pro zvětšení

Camera Orbit (Posun kamery)

Pro pohyb kamerou při vytváření 3D aplikací.

Eyedropper (Kapátko)

Myslím, že tuto funkce není potřeba popisovat, ale pro jistotu – slouží pro získání určité barvy, u které neznáme RGB kód. Zajímavé a velmi užitečné ale je, že náhled barvy funguje v reálném čase a i mimo pracovní okno Blendu!

Paint Bucket (Plechovka)

Slouží k vyplnění dané oblasti námi zvolenou barvou.

Brush Transform (Přechod)

Tento nástroj slouží k úpravě přechodů.

Klikni pro zvětšení

Malý trik

Po letmém seznámení se základními nástroji, se zbylými nástroji Vás budu seznamovat postupně, si ukážeme jeden trik. Tímto malým trikem určitě potěším majitele ne zrovna velkých monitorů s malým rozlišením. Těmto lidem jistě v Blendu nezbývá moc veliká plocha pro samotnou práci. Pomocí stisku klávesy F4 nebo TAB schováte jak pravý, tak levý panel a pro práci Vám zůstane luxusně veliká plocha.

Klikni pro zvětšení

Závěr

Jsme rádi, pokud čtete tyto řádky a neunudili jsme vás malou dávkou nezábavných informací. V příštím díle vytvoříme takové malé „Hello world“ ve WPF, ale již teď vás mohu ujistit, že se máte na co těšit.

• Microsoft Expression Blend - hrajeme si v 3D
• Expression Blend - Úprava šablony tlačítka, 2. díl
• Expression Blend - Úprava šablony tlačítka, 1. díl