Vítejte na blog.vyvojar.cz Přihlásit | Registrovat | Pomoc

Syndication

Štítky

    Žádné štítky nebyly definovány nebo použity.
Jak využít ExpressionStudio a WPF pro vývoj moderního uživatelského rozhraní

S vydáním WPF se nám doslaly do ruky velmi silné nástroje pro vytváření uživatelského rozhraní. Zde bych chtěl vývojáře seznámit s některými pravidly a postupy, které by měly přispět k vývoji ergonomičtějšího a uživatelsky přívětivého rozhraní.

Na tomto webu je k dispozici přehledný popis WPF, který bych doporučil k přečtení vývojářům, kteří se s WPF seznamují.

Úvod

Vzhled a ovládání uživatelského rozhraní (UI) má velký vliv na spokojenost a produktivitu uživatelů. Bohužel s nástupem webových aplikací se této části vývoje nevěnuje dostatečná pozornost – hlavně s ohledem na omezené možnosti webového rozhraní. To byl také důvod k uvedení platformy WPF / Silverlight – nejenže teď máme k dispozici skvělý UI framework, ale můžeme s ním využívat všech ostatních vlastností .NETu.

Po seznámení s vlastnostmi WPF, se podíváme na nástroje, které nám pomohou při jeho návrhu a tvorbě. Zde soustředíme na dvě aplikace z Expression Studia.

Expression Design

WPF aplikace se zásadně liší od těch ostatních v tom, že veškeré ovládací prvky a grafika jsou zaznamenány ve vektorovém formátu. Právě pro úpravu a vytváření vektorové grafiky je z balíku Expression Studia určen Expression Design.

Než se pustíme do kreslení, je třeba si řádně rozmyslet, jakou grafiku budeme potřebovat a zda chceme vytvářet nový styl ovládacích prvků. Zde bych chtěl vývojářům poradit, aby si pro kreslení v Expression Designu sjednali profesionálního grafika, nebo aby se seznámili alespoň se základy designu a typografie.

Přeci jen práce s Expression Designem už spadá do kategorie grafického designu. Tomu odpovídají i možnosti importu a exportu – Expression Design se neomezuje jen na formáty WPF (XAML), ale dokáže uložit kresbu i jako různé typy bitmap a např. PDF nebo PSD (Adobe Photoshop).

Import – a to je důležité – je možný také z profesionálních nástrojů, např. Adobe Illustratoru. To oceníme v případě, že náš grafik je na tento nástroj zvyklý, nebo máme již grafiku v tomto formátu připravenu. Mimo to jsou k dispozici také konverzní programy z formátu SVG do XAML, který se hodí v případě použití volně šiřitelných grafik.

Pro WPF vývojáře jsou nejdůležitější exporty do XAMLu: tady máme dvě možnosti. Canvas a Resource. Z následující ukázky vidíte, že se výsledný XAML podle dané volby výrazně liší.

Canvas

image

  1: <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  2: 		xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="Document"
  3: 		Width="351.89" Height="151" Clip="F1 M 0,0L 351.89,0L 351.89,151L 0,151L 0,0">
  4: 	<Rectangle x:Name="Rectangle" Width="179.177" Height="151"
  5: 		Canvas.Left="7.62939e-006" Canvas.Top="0.000408173"
  6: 		Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000"
  7: 	 	Fill="#FF00FF00"/>
  8: 	<Ellipse x:Name="Ellipse" Width="156.581" Height="151"
  9: 		Canvas.Left="195.309" Canvas.Top="-1.90735e-005" Stretch="Fill"
 10: 		StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFF0000"/>
 11: </Canvas>

Resource

image

  1: <?xml version="1.0" encoding="utf-8"?>
  2: <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  3:   <DrawingBrush x:Key="Layer_1" Stretch="Uniform">
  4:     <DrawingBrush.Drawing>
  5:       <DrawingGroup>
  6:         <DrawingGroup.Children>
  7:           <GeometryDrawing Brush="#FF00FF00" Geometry="F1 M 0.500008,0.500408L 178.677,0.500408L 178.677,150.5L 0.500008,150.5L 0.500008,0.500408 Z ">
  8:             <GeometryDrawing.Pen>
  9:               <Pen LineJoin="Round" Brush="#FF000000"/>
 10:             </GeometryDrawing.Pen>
 11:           </GeometryDrawing>
 12:           <GeometryDrawing Brush="#FFFF0000" Geometry="F1 M 273.599,0.499981C 316.562,0.499981 351.39,34.0787 351.39,75.5C 351.39,116.921 316.562,150.5 273.599,150.5C 230.637,150.5 195.809,116.921 195.809,75.5C 195.809,34.0787 230.637,0.499981 273.599,0.499981 Z ">
 13:             <GeometryDrawing.Pen>
 14:               <Pen LineJoin="Round" Brush="#FF000000"/>
 15:             </GeometryDrawing.Pen>
 16:           </GeometryDrawing>
 17:         </DrawingGroup.Children>
 18:       </DrawingGroup>
 19:     </DrawingBrush.Drawing>
 20:   </DrawingBrush>

Jak asi tušíte, Resource vygeneruje XAML obsahující kreslící brush – ten dostane jméno podle vrstvy, na které se grafika nachází v Expression Designu. Tato forma je určena pro vyplňování ploch, většinou si pak XAML ještě poupravíme podle potřeby, např. změníme jméno nebo způsob kladení brushe (Stretch).

Naproti tomu Canvas obsahuje objekty (v tomto případě Rectangle a Ellipse), které jsou vloženy – včetně své pozice – na WPF kontejner Canvas, kde s nimi můžeme provádět veškeré dostupné operace, animace, efekty, a také je můžeme snadno použít jako interaktivní součást UI. Je jasné, že tento formát je náročnější na zpracování frameworkem, takže pro čistě dekorativní zobrazení použijeme formát Resource, který nám vyexportuje Brush.

Optimalizace grafiky

Už při vlastním kreslení grafiky můžeme výrazně ovlivnit nároky na její vykreslování ve WPF. Pokud se v naší aplikaci bude zobrazovat větší množství grafických symbolů (např. ikony, toobary aj.), dodržíme následující pravidla:

  • Minimalizujeme počet řídících bodů v obrazci (jednoduché objekty)
  • Nebudeme používat bitmapové efekty – i když se ve verzi .NET 3.5 SP1 vykreslování bitmapových efektů zrychlilo - bitmapové efekty se dají nahradit, např. stín se dá udělat barevným přechodem do transparentní barvy
  • Na ikony použijeme Brush a nikoliv Canvas
  • Pokud budou kresby v aplikaci zobrazeny spíše v menším rozměru, nenakreslíme malé detaily (kresbu navrhneme tak, aby vypadala dobře i ve čtyřnásobném zvětšení oproti standardní velikosti – připravíme tak aplikaci na větší displeje)
  • Na ladění výkonu můžeme použít nástroj WPFPerf, který nám řekne, které části grafiky jsou nejnáročnějčí na vykreslování, a které nejsou eventuálně vůbec hardwarově akcelerovány

Expression Blend

Jak název tohoto nástroje dobře vystihuje, používá se na propojení čistě grafických a designových prvků s vlastnostmi a chováním UI.

S technologií Silverlight a Moonlight se naše aplikace dostanou i k uživatelů MacOS X a Unixových OS (Linux). Pokud se podíváme, jaké ovládací prvky a jaké UI tyto OS poskytují, zjistíme, že se jejich dnešní podoba se liší jenom minimálně.

Máme tedy společnou sadu prvků UI, které můžeme ve WPF velmi zásadně změnit, a to co do vzhledu, tak i chování. Je třeba ovšem zachovat základní principy, na kterých již několik let fungují a na které jsou uživatelé zvyklí. Na druhou stranu je dobré naše UI nějak oživit a odlišit .

Zásady pro použitelné UI

  • Každý prvek musí být lezce rozpoznatelný
  • Chování by se nemělo příliš lišit od chování nativního prvku z OS
  • V rámci aplikace by měly být prvky jednoté
  • Vzhled UI by měl měl „ladit“
  • Vzhled by měl být přiměřený nasazení (eShop se skateboardy si může dovolit méně konzervativní vzhled, než bankovní aplikace)

Co se týká vizuální podoby, můžeme pověřit grafika, aby na ní pracoval paralelně s vývojem – díky konceptu šablon a stylů lze pak jednoduše tento vzhled aplikovat na UI aplikace, která je už rozpracovaná.

Příklad úpravy ovládacího prvku

WPF umožňuje snadno změnit chování ovládacích prvků – to je, ještě důležitější, než pouhá vizuální změna. Vizuální změny byly možné do určité míry i před WPF (např. témata Windows).

Podívejme se na jeden z tradičních ovládacích prvků UI – posuvník (Scrollbar).

image

Na obrázku je scrollbar z Windows 1.01 z roku 1985. Pro srovnání, scrollbar z roku 2008, vidíte kdekoliv na své ploše. Rozdíl je pouze ve vzhledu, chování a ovládání je shodné.

Scrollbar se zkládá ze dvou tlačítek pro pohyb dolů a nahoru, posuvníku, který označuje polohu v dokumentu a většinou i poměr okna vůči délce dokumentu.

Chceme-li upravit funkci tohoto prvku, zamyslíme se nad jeho funkcí tehdy a nyní:

Stará verze - pokud táhneme posuvníkem, dokument se neposouvá, až v okamžiku puštění posuvníku se nastaví do nové polohy

Nová verze - pokud tahneme posuvníkem, dokument se posouvá spolu s ním

Rozdíl je daný výkonností počítačů před 15 a více lety a v současnosti. Jedinou možností, jak posouvat dokumentem bylo klikat na tlačítko se šipkou. Táhnutí posuvníkem bylo jen velmi přibližné, bez zpětné vazby. Další rozdíl najdememe u myší – tehdy neexistovalo posouvací kolečko, bez kterého se už dnes žádná myš neobejde.

Pokud tedy ze šablony <ControlTemplate x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}"> smažeme právě ona dvě tlačítka se šipkami, prvek se zjednoduší a funkcionalita zůstane prakticky zachována. Jako příklad to dobře vypovídá o tom, jak flexibilní je WPF a jak jednoduše se dá stávající chování prvků měnit.

Závěr

Vývoj uživatelského rozhraní ve WPF pomocí nástrojů Expression Studio je teď snazší, než kdykoliv dřív. Je nutné ovšem zapojit do celého procesu také profesionální designéry nebo použít již hotové ovládací prvky třetích stran. Dá se říci, že vývoj se pohnul kupředu stejným směrem, jako například u vývoje počítačových her – to, co dříve zvládnul jeden člověk, je nyní záležitostí týmu, kde má každý člen na starost svoji specializaci.

Posted 3. října 2008 16:03 by steelspace | 0 Comments

Vyvojar.cz na prodej!