Stílusok I.

A stílusok szerepe:  A témák kialakításának egy nagyon fontos építőköve.  Például panelek esetén közös háttérszín. A stílusokra legegyszerűbben úgy érdemes gondolni, hogy azok valójában nem mások, mint tulajdonság halmazok. Fogunk egy köteg közös jellemzőt, és azokat egyetlen stílusba rakjuk. A stílus objektumot helyezzük el erőforrásként.  A stílusokat a Silverlightban a Style objektum segítségével lehet definiálni, miközben a TargetType tulajdonságot beállítjuk arra a típusra, amelyre a stílus készül. A stílusok esetében az egyes tulajdonságok beállítása a Setter-ek segítségével történik. Nézzünk erre egy példát is, hogy érthetőbb legyen:

Ha a tulajdonságokhoz tartozó érték komplex és így nem lehet azt egyetlen stringben leírni, akkor a Setter elem Value értéke 1-es, azaz attribútum helyett XML elemként használható. A Style tulajdonságot a FrameworkElement ősosztály definiálja, így például minden vezérlő és panel rendelkezik vele. A stílus alkalmazására nézzünk egy példát :

Stílusok öröklődése:  Nem kell mindig minden stílust a nulláról építeni. Számos esetben építkezhetünk valamilyen alapstílusból kiindulva, amelyből később leszármaztatva specifikusabb stílusokat lehet készíteni. A Silverlight 3 óta a Style objektum rendelkezik a BasedOn attribútummal, amely lehetővé teszi a hivatkozást egy ősstílusra, így szolgáltatva közös alapot más stílusok számára.

Ez a stílus rendelkezik, minden olyan tulajdonsággal, amivel a myBorderStyle, de felüldefiniálja a BorderBrush értéket, ami itt most piros szín lesz. Az ősstílus tulajdonságait felülírják a leszármazott stílusok tulajdonságai. Bármely stílus beállítását felüldefiniálja a közvetlenül a vezérlőn definiált, lokálisan meghatározott érték.

A következő alkalommal szintén a stílusokkal fogunk foglalkozni.

Stílusok és testreszabhatóság a Silverlightban II.

Az előzőleg félbehagyott erőforrásokkal foglalkozunk, majd ha lesz még idő, akkor áttérnénk a stílusokra.

Az erőforrások használata:

Az erőforrást a következő kódrészlettel tudjuk definiálni:

<UserControl.Resources>

<SolidColorBrush x:Key=”bgColor” Color=”Blue” />

…

</UserControl.Resources>

A fenti UserControl-on belül ez az erőforrás minden objektum számára látható és elérhető. Hivatkozni az x:Key attribútum értékén keresztül lehet rá a StaticResource nyelvi kiterjesztés használatával. Szemléltessük ezt egy példán keresztül, hogy érthetőbb legyen:

<Objektum PropertyNev=”{StaticResource resourceKey}” />

<Grid Background=”{StaticResource bgColor}” >

….

<Grid/>

SolidColorBrush brush = this.Resources[“bgColor”] as SolidColorBrush;

A this kulcsszónak itt a UserConrol-ra kell vonatkoznia. A resources gyűjtemény értéke mindig object típusú, ezért van szükség a típuskonverzióra (as operátor). A key attribútum értékének egyedinek kell lennie. Ezt az erőforrás lekötést Expression Blend-ben is meg tudjuk valósítani az Advanced Property Options segítségével.

Az erőforrás fájlok:

Az alkalmazáshoz épített stílusok újrafelhasználhatósága előbb – utóbb fontos cél lesz. Ezekre a problémákra megoldás a ResourceDictonary. Ezt az objektumot egy külső XAML fájlban definiáljuk, és a felhasználás során meghivatkozzuk. Egy ilyen xaml fájlra nézzünk is egy példát:

Ezt az erőforrás – könyvtárat használó App.xaml tartalma az alábbi módon nézhet ki, amennyiben az xaml fájlunk neve ResourceDictionary1.xaml:

Application szintre emeltük be a ResourceDictionary1.xaml és a ResourceDictionary2.xaml tartalmát. Így a fenti bgColor erőforrás az alkalmazás tetszőleges pontján meghivatkozható. Ezek az XAML fájlok átvihetők más projektekbe is. A ResourceDictionary objektumok létrehozását és kezelését az Expression Blend is támogatja.

Következő alkalommal áttérünk a Stílusokra.

Stílusok és testreszabhatóság a Silverlightban I.

 A mai világban rendkívül magasak az elvárások az alkalmazásokkal szemben. Ez alól nem kivétel a felhasználói élmény sem. Egy szoftver felhasználói élményét sok tényező együttes működése és hatása határozza meg. Az egyik legfontosabb és egyben legszembetűnőbb felhasználói felület a GUI (graphical user interface). Ebben a fejezetben megismerhetjük, hogy a silverlight miként támogatja az egységes felhasználó felület kialakítását.

Erőforrások a Silverlightban:

Az erőforrások szerepe: Először is ismerjük meg az erőforrás pontos definícióját. Az erőforrások olyan tetszőleges típusú objektumok, melyeket nem csak lokálisan, hanem egymástól független helyen is fel kívánunk használni. Egy ilyen erőforrás objektum lehet akár egy szín is.

Például, ha kiválasztunk egy Brush objektumot, és ezt több helyen is szeretnénk szerepeltetni. Mindenhová begépelhetjük,de gondban leszünk, ha később cserélni szeretnénk. Ebből az esetből kiindulva adódik a szituáció,hogy ezt a Brush objektumot el tudjuk eltárolni, és bármikor fel tudjuk alkalmazni.

Silverlightban egy statikus erőforrás a StaticResource. Azért statikus, mert jelen állás szerint a silverlightban nincs dinamikus erőforrás. Ez az erőforrás azt jelenti,hogy már forduláskor belekötésre kerül a hivatkozott objektum, és futás közben nem cserélhető le.

 Az erőforrások hozzáfélhetősége: Felvetődik a kérdés, hogy ezeket pontosan hol is definiáljuk? A válasz egyszerű: a Resources szekcióban. A resources tuljadonság a FrameworkElement ősosztályban került definiálásra, értéke egy IDictionary <string, object> típusú objektum. Az erőforrásokat több szinten is lehet definiálni:

• Application szint
• UserControl szint
• Vezérlő szint

Azt, hogy az adott erőforrást melyik szinten definiáljuk, egyértelműen meghatározza, hogy mely objektumok számára lesz elérhető. Ha pl. az Application objektum Resources gyűjteményében helyezünk el egy erőforrást, akkor az az alkalmazásban mindenhol hivatkozható lesz. Egyfajta öröklődési láncról beszélhetünk.

Következő alkalommal megnézzük az erőforrások használatát, az erőforrás fájlait és rátérünk a stílusokra.

Silverlight Vezérlők a gyakorlatban

Mielőtt ezzel jobban megismerkedhetnénk, fel kell telepíteni a Silverlight Toolkit-et. Ezt nagyon egyszerűen letölthetjük a silverlight oldaláról, majd a referenciához hozzá kell adni a System.Windows.Controls.Toolkit.dll-t. Névtérnél is hozzá kell adni: xmlns:toolkit=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit” sor beírásával.

ContentControl:

Osztályból származó vezérlők a Content tulajdonságukon keresztül jelenítik meg a tartalmat. Object tipusú. A ContentControl érdekes vonása,hogy önmagában is használható. Összetett objektumokat is képes fogadni.

Button:

A legismertebb ContentControl vezérlők a különböző nyomógombvariánsok. A ButtonBase osztályból származnak.

RepeatButton:

Lényegében nem különbözik a hagyományos gombtól, egy fontosabb tulajdonság kivételével. Nyomva tartásával folyamatosan küldi a Click eseményeket.

HyperlinkButton:

Nevéhez híven átjárót biztosít egy külső weboldalra vagy valamilyen tartalomra.

CheckBox és RadioButton:

Ez a két vezérlő a ToggleButton osztályból származnak. Háromféle állapota lehet: jelölt (checked), nem jelölt (unchecked) és határozatlan (undetermined). A harmadik állapot akkor létezik, ha az adott vezérlőn az IsThreeState tulajdonságot igazra állítjuk. Az alapállapot minden esetben unchecked lesz.

Label:

Funkciója hasonlít a TextBlock-ra, annál jelentősen több lehetőséget biztosít. Valódi vezérlő. Segítségével informatív űrlapokat hozhatunk létre, amivel az adatok érvényességét is képes jelezni. Ez a vezérlő az SDK részét képezi. A SilverlightTools telepítésekor automatikusan hozzáadódik. A label erősen épít az adatkötésre.

ToolTip:

Segítségével információt köthetünk egy-egy vezérlőelemhez. Önmagában is használható, ekkor úgy viselkedik, mint egy label. A leggyakrabban egy másik vezérlőhöz kötjük hozzá, a ToolTipService osztály tulajdonságaival. A ToolTipService objektum Placement tulajdonsága jelöli, hogy a ToolTip a vezérlőhöz képest milyen pozícióban jelenjen meg.

ItemsControl:

Az ItemsControl osztályból származó vezérlők, lehetővé teszik egyszerre több elem megjelenítését. Hasonlóan a ContentConrol-hoz ez is használható önmagában. Ez az elemek kiválasztásának a rovására megy, ugyanis onnantól kezdve ez a lehetőség megszűnik. Az ItemsControls leszármazottak az ItemsSource tulajdonságon keresztül kapják meg a megjelenítendő listára hivatkozó referenciát. Összetett objektumok is lehetnek a lista elemei, ekkor meg kell adnunk, hogy mit akarunk megjeleníteni. Ha nem adunk meg neki semmit, akkor az osztály neve jelenik meg.

ListBox:

A ListBox az ItemsControl-ból eredő Selector osztályból származik. Lehetővé teszi, hogy elemeket válasszunk ki a megjelenített listából. A ListBox minden elemének egy-egy ListBoxItem objektum feleltethető meg, amely a ContentControl osztályból származik. Az elemek kiválasztásának módját a SelectionMode tulajdonsággal állíthatjuk be. Alapértelmezett módon csak egy elemet választhatunk ki. A Multiple és Extended értékek megengedik több elem kiválasztását is. A SelectChanged eseménnyel kezelhetjük a kiválasztott elemek listáját, ennek az eseménynek az eseménykezelője SelectionChangedEventArgs típusú paramétert kap. AddedItems illetve RemovedItems tulajdonságai tömbben tárolják az aktuálisan vagy az előzőleg kiválasztott elemeket.

ComboBox:

A ComboBox vezérlő valójában két részből áll. Egy TextBox-ból és egy lenyíló ListBox-ból. Egy elemet tudunk kiválasztani. Az elemeket a ComboBoxItem jelenítni meg. A ComboBox eseményei és tulajdonságai megegyeznek a ListBox jellemzőivel.

TreeView:

Ez a vezérlő fa-struktúrában képes megjeleníteni az elemeket. Minden eleme TreeViewItem típusú, amely maga is ItemsControl leszármazott, vagyis tartalmazhat több elemet, beleértve további TreeViewItem objektumokat is. A TreeViewItem osztály a HeaderedItemsControl osztályból származik, ezért a tartalmazott listán kívül egy fejléccel (Header) is rendelkezik. A TreeView működése hasonló a ListBox-éhoz, a SelectedItemChanged esemény mutatja a kiválasztott elem változását, amelyet a SelectedItem tulajdonság segítségével kérhetünk le.

TabControl:

A TabControl vezérlő segítségével az alkalmazás ugyanazon területét oszthatjuk szét több elem között. Ez a vezérlő is saját típust használ gyermekei leírására (TabItem), amely a HeaderedItemsControl osztályból származik, és a Header tulajdonság értéke jelenik meg az egyes lapok tetején.  A TabControl kiválóan alkalmas a Silverlightban nem támogatott MDI (Multiple Document Interface) megjelenítési. A TabControl eseményeinek és tulajdonságainak használata megegyezik a többi ItemsControl leszármazottéval.

Osztályhierarchia: A legtöbb fejlesztői környezetben egyértelműen azonosíthatók a vezérlőelemek. A silverlight-ban nem elég egyértelmű, ugyanis sok elemet is kezelhetünk vezérlőként. A hierarchia legalján a DependencyObject osztály áll. Fő feladata az adatkötés. Második szinten a UIElement áll. Ez felel a vizuális megjelenítésért. UIElement-ből származik a FrameWorkElement, ami lényegében kiterjeszti a fölötte lévők képességeit. Ilyen például a TextBlock osztály. Erre nem vonatkozik a VerticalAligment és a HorizontalAligment tulajdonságok. Csak a Control osztályból közvetlenül származhatnak. A FrameWorkElement-ből származik a Panel osztály is. A hierarchia legalján található a Control osztály. A vezérlők őse.

Amikor Layout Management-ről beszélünk, akkor az alkalmazásunk felhasználói felületén megjelenített vezérlőelemek elrendezéséről beszélünk.

Pozicionálás: Az abszolút és a dinamikus pozicionálást támogatja. Leíró kód áttekinthető. Minden silverlight program egy konténer elemre építkezik. A konténerek a vezérlőelemeket tárolja. Több féle vezérlőelem létezik pl.: Canvas,Grid. Amennyiben nem adunk meg neki paramétereket, akkor kitöltik a rendelkezésükre álló teret, ez alól egy kivétel van, mégpedig ha a konténer elem a canvas. Pozíciók finomhangolására is lehetőség van. Minden vezérlőben másképpen történik. Létezik egyszerűbb módszer is. A VerticalAligment és a HorizontalAligment tulajdonságpáros.

Grid: A legsokoldalúbb és a leggyakrabban használt konténer. Tetszőleges számú sor és oszlop definiálását. Alapértelmezés szerint egy oszlop és sor van definiálva. Többet szeretnénk, akkor a RowDefinition és ColumnDefinition objektumot kell elkészíteni.A ShowGridLines segítségével láthatóvá tehetjük az oszlopok és sorok elválasztó vonalait.

Canvas: lehetővé teszi, hogy explicit módon koordináták segítségével pozicionáljuk vezérlőinket. Nem veszi figyelembe a böngésző méretét. Az x/y koordinátákat a Canvas.Left illetve a Canvas.Top attached propertykkel állítjuk be. Itt különféle beállításokat végezhetünk el. ZIndex segítségével beállíthatjuk például,hogy a vezérlő eltakarhat-e egy másikat.

Silverlight animációk létrehozásának egyik legegyszerűbb módja a blend segítségével lehetséges. A blend erőssége az animációkban rejlik. Próba képpen megpróbálok animálni egy négyzetet, amely kék színből szürkévé váltzik. A négyzet kirajzolása viszonylag egyszerű feladat. Kitöltése is. Aki használt már Adobe Falsh-t annak nagyon ismerős kinézet, működés. Itt is megtalálható az idővonal, amelyben létrehozunk egy storyboardot. A z idővonalon beállíthatjuk az időkorlátokat valamint találhatunk az idővonal felett nyilakat amelyekkel elindíthatjuk az animációt, illetve ugrálhatunk a különböző storyboardok között.A feladatunk annyi volt scupán, hogy egy storyboard beszúrása után a négyzet színét olyan változtattam, amilyenre szerettem volna, helyben megtekintettem az eredményt és a szín sikeresen megváltozott. Ha sikerült megváltoztatni a színt, akkor próbálkozzunk meg mondjuk, hogy a négyzetből kört animáljon. Amennyiben ezzel is kész vagyunk próbáljunk olyan animációt létrehozni, amelyben gombbal indíthatjuk el az animációnkat. Hozzunk létre a button eszköz segítségével egy nyomógombot, melynek adjuk az “animáció indítása” nevet. Hozzunk létre egy ellipszis. Majd a timeline-on hozzunk létre storyboardot. 3-mat vagy akár többet is. Hozzunk létre egyet az 1ms-nél és húzzuk oda az ellipszis, majd a 2ms-hez is húzzuk oda.Elindítjuk az animációt láthatjuk ,hogy a kis ellipszisünk a megadott útvonalon mozog. Ekkor még semmi köze a gombhoz. Jelöljük ki a gombot, majd a kis villám ikonra kattintva előjön a gombhoz tartozó események megadása. Kattintsunk kétszer a Clickre. Előjön egy forráskód. Ennek a kódnak a “private void Button_Click(object sender, System.Windows.RoutedEventArgs e)” sora után írjuk be, hogy : sbAnim.Begin(); . Ezután, ha lefuttatjuk gombnyomásra indíthatjuk az animációnkat. A mai napba sajnos csak ennyi fért bele, de hamarosan újra jelentkezek!