Windows Phone 7 programozás. Készítette: Major Péter

Windows Phone 7 programozás Készítette: Major Péter

Kezelőfelület A Windows Phone alkalmazások kezelőfelületének megtervezéséhez a mai kor elvárásainak megfelelően rendelkezésre áll vizuális (WYSIWYG) tervező és lehetőség van a felület programkóddal való definiálására is. A felület definiálása a WPF (Windows Presentation Fundation) és Silverlight programokhoz hasonlóan XAML (Extensible Application Markup Language) segítségével történik. Ennek felépítése, elve az XHTML-hez hasonlít leginkább. A felületet az XML szintaxisnak megfelelő formátumban írja le. Bár rendelkezésre áll vizuális, kézi kódolást nem kívánó módszer a kezelőfelület létrehozására, azonban számos esetben elkerülhetetlen a kód kézi módosítása, bővítése. Minden Windows Phone alkalmazás kezelőfelülete lapokra (PhoneApplicationPage) bontható, ezek megfelelnek a hagyományos alkalmazások ablakainak, azzal az eltéréssel, hogy a telefonon egyszerre csak egy lap jeleníthető meg. Az egyes lapok egymástól teljesen függetlenek, és azok között a navigáció és az adatcsere biztosított. A rendszer a lapokat futás közben hozza létre, amikor először rájuk navigálunk, és a működés közben a háttérben lévő lapok bizonyos esetekben eltávolítódnak a memóriából. Az ezzel kapcsolatos problémákat később tárgyaljuk. Egy üres laphoz tartozó lap a következő szerkezetet veszi fel:

Jól látható hogy a kód a következő formájú elemekből épül fel: <elemnév attribútum1=”érték1” attribútum2=”érték2”>tartalom

Ha nincs tartalom, akkor a következő rövidebb forma alkalmazandó: <elemnév attribútum1=”érték1” attribútum2=”érték2”/>

A tartalom helyére további elemek illeszthetőek, így egy rendezett rendszer kapható. Azt, hogy adott helyre milyen elemek írhatóak, az XML névterek döntik el, amelyek az xmlns (ns - namespace) attribútummal adhatóak meg. A fő névtér minden Silverlight program esetében a "http://schemas.microsoft.com/winfx/2006/xaml/presentation" ez minden fájlban szerepel, és a gyökér névteret jelelő xmlns attribútum adja meg. Az ez alá kapcsolt névterek az xmlns:névtérnév attribútumokkal adhatóak meg. Az összes XAML fájl tagja még az x névtér definíciója, ez biztosítja az

XAML és a mögöttes C# kód összekapcsolását. A phone és a shell a telefonhoz kapcsolódó névterek, amelyek a telefonra jellemző speciális kezelőelemeket tartalmaznak. A d névtér a vizuális szerkesztő számára fontos adatok megadására szolgál. Az mc egy az XML formátummal való kompatibilitást leíró névtér. A programozás során mi a főnévtér mellett az x, phone és shell névtereket fogjuk felhasználni. Mint már említettük a névterek adják meg, hogy milyen elemek használhatóak, ha egy elem nincs benne a főnévtérben, akkor az a névtérneve:elemneve módon hivatkozható meg. Kicsit zavaró első ránézésre, de jól látható, hogy a phone névteret egy elemének (PhoneApplicationPage) használata közben definiáljuk. Fontos megjegyezni, hogy az XML névterek nem feltétlen jelentenek egy C#-os névteret, hanem azok csoportjára is hivatkozhatnak. Az telefon alkalmazáslap (PhoneApplicationPage) főbb jellemzői: Attribútum x:Class

xmlns d:DesignWidth, d: DesignHeight

FontFamily FontSize Foreground SupportedOrientations

Orientation

shell:SystemTray.IsVisible

Funkció Az osztály neve a mögöttes C# kódban. Ez biztosítja a kezelőfelület és a működtető kód kapcsolatát. XML névterek definiálása Megadja a kezelőfelület méretét tervező nézetben, a program futása esetén nincs szerepe. Alapértelmezett betűtípus megadása Alapértelmezett betűméret megadása Előtérszín megadása Támogatott képernyőhelyzetek, lehet:  Portrait - álló  Landscape - fekvő  PortraitOrLandscape – álló vagy fekvő A fekvő helyzet esetén mindkét irányú (balra és jobbra döntött) használatot kezelni kell. A kijelző döntésekor a kezelőfelület tervezésénél ügyelni kell arra, hogy az elemek átméretezése megfelelően menjen végbe. Ha a kijelző elforgatása az OrientationChanged eseménnyel kezelhető. Alapértelmezett orientáció, ezzel le is kérdezhető az orientáció, lehet:  None: meg nem adott  Portrait: álló  Landscape: fekvő  PortaitUp: álló (felfelé)  PortaitDown: álló (fejtetőn), nem használt  LandscapeLeft: fekvő (balra forgatott)  LandscapeRight: fekvő (jobbra forgatott) Tálca láthatósága, ha be van kapcsolva, akkor a képernyő felső részén egy sáv nem használható. Az óra ettől függetlenül látható.

Kezelőfelület elemei Tárolóelemek A tárolóelemek legfőbb szerepe az, hogy más elemeket tárolnak, ők teszik lehetővé, hogy a kezelőfelület elemeit a kívánt formában tudjuk elrendezni. A főbb elemek a következők: Tároló elem Border

Funkció Ez az egyik legegyszerűbb tárolóelem, csak egy elemet tud magában foglalni és azt határolóvonallal tudja körülvenni. Canvas Olyan tárolóelem, amely több elemet is képes tárolni, melyek pozícióját derékszögű koordinátarendszer segítségével lehet megadni. ContentControl Egyszerű tárolóelem egy elemmel, elsősorban leszármaztatási alapként szolgál. Grid Táblázatos elrendezésre használható, az elemek egy vagy több cellában helyezhetőek el. Panorama A Windows Phone-ra jellemző tárolóelem, mellyel oldalirányban mozgatható, a kijelző méreténél szélesebb kezelőfelület valósítható meg. Pivot A Windows Phone-ra jellemző tárolóelem, mely leginkább az asztali Windows verziókban található fülekre hasonlít, általában azonos típusú elemek különböző nézeteihez használjuk, illetve lapok megjelenítésére. StackPanel Olyan tárolóelem, mellyel a tartalomelemek egymás mellé vagy alá, sorban helyezhetőek el. VirtualizingStackPanel Megegyezik az előzővel, de speciálisan arra tervezték, hogy igen hosszú listákat jelenítsen meg, ugyanis a kijelzőről lelógó részeket nem rajzolja ki, ezzel csökkentve a CPU terhelést. ScrollViewer Olyan tárolóelem, melynek tartalma görgethető.

Főbb attribútumok az objektumokon Attribútum Width, Height BorderThickness BorderBrush Margin

Padding HorizontalAlignment

Jellemzők Objektum szélessége, magassága, double. Ha megadjuk, akkor felülírja a méretet befolyásoló többi kényszert. Határolóvonal vastagsága, Thickness. Határolóvonal kitöltése, Brush. Ezen elem távolsága a határolóelemtől, Thickness. A határoló elem tartalom területének szélétől mérve megadja ezen elem külső szélének (ha van határolóvonal, akkor annak külső széléhez mérve) a távolságát. Ezen elem tartalmának távolsága a határolóvonaltól (annak belső szélétől), Thickness. Megadja, hogy hogyan helyezzük el ezt az elemet a tárolóelemében vízszintes irányban, HorizontalAlignment, lehet:  Left – balra igazítva, csak a bal oldali margót vesszük figyelembe, a jobb oldalit nem.  Right – jobbra igazítva, csak a jobb oldali margót vesszük figyelembe a bal oldalit nem.  Strecth – nyújtás, a bal és a jobb oldali margót is figyelembe vesszük, ez megadja az elem szélességét, csak akkor érvényesül ha a Width nincs megadva, különben középre igazít.  Center – középre igazítás, sem a bal, sem a jobb oldali margót nem

VerticalAlignment

Background Child, Children

CacheMode

Opacity

OpacityMask Clip Visibility

ZIndex IsHitTestVisible

Tag MaxWidth, MaxHeight, MinWidth, MinHeight Kapcsolt tulajdonságok

veszi figyelembe. Megadja, hogy hogyan helyezzük el ezt az elemet a tárolóelemében függőleges irányban, VerticalAlignment, lehet:  Bottom – lentre igazítás, a felső margót nem vesszük figyelembe.  Up – felfelé igazítás, az alsó margót nem vesszük figyelembe.  Center – középre igazítás, az alsó és a felső margót sem vesszük figyelembe, az elem középre kerül.  Strech – nyújtás, az alsó és felső margókat is figyelembe vesszük. Ez csak akkor működik ha a magasság még nincs megadva, különben középre igazít. Háttér kitöltésének megadása, Brush. A tartalmat képző objektum(ok). Típusuk tetszőleges lehet, amennyiben olyan tartalmat adunk meg, amely nem grafikus elem, akkor a ToString() metódusával kapott szöveget jeleníti meg a rendszer. Megadja az objektum pufferelésének módját, CacheMode. Ide jelenleg csak BitmapCache érték adható meg, ha ezt használjuk akkor a rendszer csak egy bitmap-ben letárolja a vizuális elem felületét, és ezt használja annak sorozatos kirajzolásakor. Ha az adott elemet animáljuk (görgetés is), akkor érdemes ezt bekapcsolni, mert jelentősen megnöveli a program teljesítményét. Mindig érdemes belegondolni mekkora egységeket éri meg pufferelni, hogy a legjobb CPU és memóriaigény párt kapjuk. Átlátszóság mértéke, double. Ha 0 akkor az elem nem látható, ha 1 akkor átlátszatlan. Ha az elem láthatósága 0, akkor érdemes inkább a Visibility tulajdonságot állítani, mert jobb teljesítmény érhető el. Átlátszóság maszk, Brush. Levágó geometria, Geometry. Megadja, hogy látható-e az adott objektum, Visibility, értékei lehetnek:  Visible: látható  Collapsed: összecsukott Az összecsukott állapotban az adott elem nem látható, nem vesz részt a beviteli események létrehozásában, nem fókuszálható, nem vesz részt az ütközés vizsgálatban és nem foglal el helyet. Ez azért nem egy sima bool, mert a rendszer alapját képező WPF ennél több állapotot is megenged, azonban a telefonon futó Silverlight nem. Az elemek kirajzolási sorrendjét határozza meg, int. Minél nagyobb az érték annál előbbre jelenik meg az elem. Megadja, hogy az objektum részt vesz-e az ütközés tesztelésben, bool. Ha értéke false, akkor az adott elem nem hoz létre a felhasználói bevitellel kapcsolatos eseményeket és nem fókuszálható. A vizuális elemmel társított tetszőleges típusú objektum, object. Általában az elemre való kattintás eseménykezelőjében szoktuk felhasználni. A maximális és minimális szélesség és magasság megadására szolgálnak, double típusúak.

Olyan jellemzők, amelyeket a szülő (befoglaló) elem hagy a benne lévőkre. megadási módja:

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

Az itt látható kódrészletben a Grid.Row tulajdonság valójában a befoglaló Grid-hez tartozik.

Vastagság struktúra Arra szolgál, hogy különböző vastagság típusú tulajdonságokat megadjunk, ilyen például a margó mérete, határolóvonal vastagsága. Megadás XAML-ben:

Attribútumok megadása Amikor meg akarunk adni egy attribútomot XAML-ben alapvetően két lehetőségünk van: 

Ha az attribútum egy rövid szöveggel jellemezhető, akkor egyszerűen, inline megadhatjuk: <Button>Start!



Ha ez nem lehetséges, akkor választhatjuk az alábbi megadási módot: <Button>Start!

Kitöltések <SolidColorBrush Opacity="0.5" Color="Blue"/>



Kitöltések típusai SolidColorBrush Ezzel egyszínű kitöltés adható meg. Általában úgy használjuk, hogy megadunk egy előre definiált színt, vagy hexadecimális ARGB kódot használunk (azaz az átlátszóság, piros, zöld, kék értékeket 00FF-ig terjedő hexadecimális számmal adjuk meg): <SolidColorBrush Opacity="0.5" Color="Blue"/>



LinearGradientBrush Két vagy több színből álló, egyenes menti színátmenet definiálható segítségével. Definiálásához szükség van kiinduló és végpontra (StartPoint, EndPoint), amelyeket megadhatunk relatív vagy abszolút koordináták segítségével (MappingMode). Ha a MappingMode értéke RelativeToBoundingBox (ez az alapértelmezett érték) akkor a 0,0 pont az objektum bal-felső sarkát az 1,1 pont annak jobb-alsó sarkát jelöli. Ha az attribútum értéke Absulute, akkor a koordináták pixelben adhatóak meg a bal-felső sarokhoz rendelt derékszögű koordinátarendszerben. A színátmenetet GradientStop elemek segítségével definiálhatjuk, ahol azok szín (Color + esetleg Opacity) és eltolás (offset) paraméter értékeit kell megadni. Az Offset érték adja meg hogy a színátmenet vonala mentén, hol milyen szín található, a kiindulópont Offset-je 0, a végponté 1. A Spread jellemzővel megadható, mi történjen az 1 Offset-en való túlhaladás esetén: a Pad beállítással a végső színt tarja a rendszer, a Reflect beállítással tükrözve, Repeat beállítással tükrözés nélkül ismétel.

RadialGradientBrush A RadialGradientBrush az előzőhöz hasonló funkciójú, de itt a színátmenet nem egyenes mentén, hanem radiálisan történik. Változás még, hogy az előzőekből fakadóan itt nem kezdő és végpont van, hanem ezek helyett a középpontot (Center), és az x és y irányú sugarakat (RadiusX, RadiusY) kell megadni. Megjegyzendő, hogy elforgatott ellipszis alak is létrehozható így, de erről majd a transzformációkkal foglalkozó részben beszélünk. A MappingMode az előzőekhez hasonlóan működik. A GradientStop-ok Offset-jénél ez esetben a 0 az ellipszis középpontját jelöli, míg 1 az adott irányú sugár végpontját.

ImageBrush A rendszer lehetővé teszi textúra kitöltés alkalmazását. Két fő attribútuma az ImageSource, amellyel megadható az alkalmazandó kép, illetve a Stretch, amely megadja a nagyítást. A Stretch értéke lehet:  None – nincs nagyítás  Fill – nyújtás, a képarány megváltozik



Unifrom – illesztés: a lehető legnagyobb kép, amely éppen érinti a rendelkezésre álló keret szélét  UniformToFill – kitöltés: a lehető legkisebb kép, amely teljesen lefedi a rendelkezésre álló helyet Megadható még az AlignmentX és AlignmentY paraméter is, amellyel a kép függőleges és vízszintes igazítása állítható be.

Erőforrások definiálása Sok esetben szükség van arra, hogy bizonyos elemeket (pl.: színeket, kitöltéseket) többször is felhasználjunk. Ezt megtehetjük úgy, hogy többször megadjuk ugyanazon értékeket, ez azonban nem célszerű, mert:  időigényes  nehezen átláthatóvá teszi a kódot  nehéz az összes helyen változtatni Ezért lehetőség van XAML-ben úgynevezett erőforrások (resource) definiálására. Erőforrás lehet tetszőleges típusú érték, melyre később azonosítójával hivatkozhatunk. Az erőforrásokat általában a fájl elején, az alábbi módon definiáljuk (ez közvetlenül a PhoneApplicationPage tartalmába illeszthető):

A felhasználás pedig a következő módon történhet:

Jól látható, hogy ilyenkor az adott paramétert {StaticResource ErőforrásAzonosító} stílusban adjuk meg. Egyébként az erőforrások tetszőleges elemben megadhatók, annak Resources jellemzőjével.

Stílusok Az erőforrások közé tartoznak a stílusok, amelyekkel összefoghatjuk adott típusú elemek attribútumainak beállításait: <Style TargetType="Border" x:Key="SajatStilus"> <Setter Property="Background" Value="Yellow"/> <Setter Property="BorderThickness" Value="12"/> <Setter Property="BorderBrush" Value="Red"/>

A Style fő jellemzője a TargetType, amellyel megadható milyen típusú elem tulajdonságait kívánjuk megadni. A Setter elemek segítségével adhatóak meg a jellemzők értékei, a Property-nél adjuk meg az adott jellemzőt, míg Value-val az érték definiálható. A megadott stílus alkalmazása:
Style="{StaticResource SajatStilus}">

A bevitelt itt is segíti a kódkiegészítés.

Beépített erőforrások Ahhoz, hogy programunk megfelelően jelenjen meg sokszor használunk beépített erőforrásokat. Ilyennel érhetjük el többek között a rendszer színtémájához tartozó színeket, vagy a standard betűtípusokat, méreteket stb. A beépített erőforrások használata ugyanolyan, mint az általunk definiáltaké. Néhány fontosabb előre definiált erőforrás: Név Típus Tartalom PhoneAccentBrush SolidColorBrush Kiemelő ecset PhoneForegroundBrush SolidColorBrush Előtér ecset PhoneBackgroundBrush SolidColorBrush Háttér ecset PhoneContrastBackgroundBrush SolidColorBrush Háttér ecset kontrasztos kiemeléshez PhoneContrastForegroundBrush SolidColorBrush Előtér ecset kontrasztos kiemeléshez PhoneDisabledBrush SolidColorBrush Letiltott háttér ecset PhoneSubtleBrush SolidColorBrush Finom előtérszín PhoneBorderBrush SolidColorBrush Határoló vonal ecset TransparentBrush SolidColorBrush 100% átlátszó ecset érintési célterületekhez PhoneSemitransparentBrush SolidColorBrush Részben átlátszó ecset képi háttérből való kiemeléshez PhoneChromeBrush SolidColorBrush Króm kitöltő ecset PhoneBackgroundColor Color Háttérszín PhoneForegroundColor Color Előtérszín PhoneDisabledColor Color Letiltott szín PhoneSubtleColor Color Finom jelölőszín PhoneAccentColor Color Jelölőszín PhoneContrastBackgroundColor Color Kontrasztos háttérszín PhoneContrastForegroundColor Color Kontrasztos előtérszín PhoneBorderColor Color Határolóvonal-szín PhoneChromeColor Color Króm szín PhoneSemitransparentColor Color Rászben átlátszó szín PhoneFontFamilyNormal FontFamily Normál betűtípus PhoneFontFamilyLight FontFamily Vékony betűtípus PhoneFontFamilySemiLight FontFamily Közepesen vékony betűtípus PhoneFontFamilySemiBold FontFamily Közepesen vastag betűtípus PhoneFontSizeSmall Double Betűméret: 18.667 PhoneFontSizeNormal Double Betűméret: 20 PhoneFontSizeMedium Double Betűméret: 22.667 PhoneFontSizeMediumLarge Double Betűméret: 25.333 PhoneFontSizeLarge Double Betűméret: 32 PhoneFontSizeExtraLarge Double Betűméret: 42.667 PhoneFontSizeExtraExtraLarge Double Betűméret: 72 PhoneFontSizeHuge Double Betűméret: 186.667 A teljes felsorolást lásd: http://msdn.microsoft.com/en-us/library/ff769552(v=vs.92).aspx

Border Ez az egyik legegyszerűbb tárolóelem, csak egy elemet tud magában foglalni és azt határolóvonallal tudja körülvenni.

Canvas Olyan tárolóelem, amely több elemet is képes tárolni, melyek pozícióját derékszögű koordinátarendszer segítségével lehet megadni. Kapcsolt tulajdonságok:  Canvas.Left, Canvas.Top: bal felső sarok X és Y koordinátája, double  Canvas.Width, Canvas.Height: szélesség és magasság, double

Grid Táblázatos elrendezésre használható, az elemek egy vagy több cellában helyezhetőek el. Jellemző tulajdonságok:  RowDefinitions: a sorok leírása (hány van, milyen magasak)  ColumnDefinitions: az oszlopok leírása



A magasság és szélesség megadása: * - arányos méret (ha a többi fix, akkor ez a maradék hely) Auto – automata méret, amekkora kell a tartalomnak Továbbá megadható fix méretként is pixelekben. Kapcsolt tulajdonságok:  Grid.Row: melyik sorba kerül az elem, int  Grid.Column: melyik oszlopba kerül az elem, int

StackPanel Olyan tárolóelem, mellyel a tartalomelemek egymás mellé vagy alá, sorban helyezhetőek el. Jellemző tulajdonságok:  Orientation: Vertical/Horizontal, függőleges/vízszintes elemelhelyezés

ScrollViewer Olyan tárolóelem, melynek tartalma görgethető. Ha tartalma túllóg a határain, akkor görgethető lesz. Jellemző tulajdonságok:  VerticalScrollBarVisibility, HorizontalScrollBarVisibility: függőleges/vízszintes görgetősáv láthatósága, lehet: Disabled (a görgetősáv nem látható, a tartalom nem nyúlhat túl a tároló határain), Auto (ha a tartalom nem fér el, akkor megjelenik a scrollbar), Hidden (a görgetősáv nem látható, a tartalom túlnyúlhat a tároló méretén), Visible (mindig látszik görgetősáv)

Panorama A Windows Phone-ra jellemző tárolóelem, mellyel oldalirányban mozgatható, a kijelző méreténél szélesebb kezelőfelület valósítható meg. A panoráma elem elsősorban heterogén adatok megjelenítésére szolgál, amelyek egyfajta tartalomjegyzékként jelentkeznek a program többi része felé. Jellemző tulajdonságai: 

 

Background: a panoráma háttérképe (Brush), amely felbontása 2000x800 méretű vagy kisebb kell legyen (teljesítmény), a háttérkép az előtérhez képest mozgási parallaxishoz hasonló hatást kelt. Title: a panoráma címe Items: a panoráma elemei, ItemCollection

Gyermek elemek: 

PanoramaItem: a panoráma kezelőfelületének egy „szelete”, a Header a cím, a Content-be megy a tartalom:

Pivot A Windows Phone-ra jellemző tárolóelem, mely leginkább az asztali Windows verziókban található fülekre hasonlít, általában azonos típusú elemek különböző nézeteihez használjuk, illetve lapok megjelenítésére. Főbb jellemzők:  

Title: az elem címe, a lapok címei fölött jelenik meg kis betűméretben Items: a pivot lapjai, ezek Header jellemzőjével adható meg címük

Elemek Button A jól ismert gomb kezelőelem. Fő jellemzők: 

Content: a gomb tartalma, általában a gombon lévő szöveg, de lehet tetszőleges típusú elem (kép, stb.)

Fő eseménykezelő: 

Click: kattintás, érintés eseménye

CheckBox A jelölőnégyzet kezelőelem. Fő jellemzők:   

Content: a jelölőnégyzet tartalma, általában szöveg, de lehet tetszőleges típusú elem (kép, stb.) IsChecked: be van-e pipálva, bool? (null ha nincs eldöntve) IsThreeState: három állapotú-e, ekkor lehet nem meghatározott értékű is

Eseménykezelők:    

Checked: bejelölés történt Indeterminate: megnemadott állapotba került Unchecked: meg nem jelölt állapotba került Click: kattintás, tapintás esetén

RadioButton Választógomb, ugyanúgy működik, mint a jelölőnégyzet, de itt egy közös szülővel rendelkező RadioButton csoport esetén csak egyik jelölhető be.

Slider Csúszka, egy minimum és maximum érték (double) közötti szám kiválasztására. Fő jellemzői:      

Minimum, Maximum: a minimum és maximum értékek Orientation: elhelyezkedés, Vertical/Horizontal – függőleges/vízszintes SmallChange: kis változás léptéke LargeChange: nagy változás értéke (ha rábökünk ez elemre) Value: a kiválasztott érték IsDirectionReversed: fordított irányú működés

Eseménykezelők: 

ValueChanged: érték megváltozása

ListBox Lista megjelenítésére, és az abból való választásra szolgál. Az Items jellemzőben megadott elemei sokféle típusúak lehetnek, de alapesetben csak a ListViewItem képes megjeleníteni a kijelölést.

Főbb jellemzők:    

Items: listaelemek SelectedIndex: kijelölt elem indexe SelectionMode: kijelölés módja, lehet: Single (egy elem jelölhető ki), Multiple (több elem is kijelölhető) SelectedItem(s): kijelölt eleme(ke)t adja vissza

Eseménykezelők: 

SelectionChanged: kiválasztás változása

ProgressBar Folyamatjelző csík, van végtelen verziója is (amikor a pöttyök mozognak). Fő jellemzők:  

Maximum, Minimum, Value IsIndeterminate: végtelenített-e

Image Kép megjelenítésére szolgál. Fő jellemzői:  

Source: a kép helye Stretch: a kép nyújtása, lehet: None (eredeti méret), Stretch (nyújtás), Uniform (Illesztés), UniformToFill (kitöltés)

Szövegmegjelenítés/bevitel TexBlock Ez az elem szolgál alapvető szövegmegjelenítésre, formázott és formázás nélküli esetben is.

Főbb jellemzők:   

Text: a megjelenítendő szöveg, formázatlan esetben Inlines: a megjelenítendő szöveg formázott esetben TextWrapping: hosszú sorok tördelése, lehet Wrap vagy NoWrap

Formázott szöveg megadása Formázott szöveget az Inline osztály leszármazottai segítségével lehet megadni:  

Run: folyamatos szöveg LineBreak: sortörés Helló világ ! Új sorba írok

A formázás minden Run-ban megadható.

Formázási lehetőségek      

Foreground: betűszín, Brush! FontFamily: betűtípus, FontFamily, (Seoge WP, Times New Roman…) FontWeight: betűvastagság, sok fokozata van (pl.: Normal, Bold, Light…) FontStyle: betűstílus, lehet Nomal vagy Italic (dőlt) FontSize: betűméret (pt), double TextDecorations: betűdíszítések, itt legfontosabb: Underline (aláhúzott)

TextBox Szövegbeviteli mező, ha fókuszba hozzuk előjön a billentyűzet (a billentyűzet a jelenlegi API-val az aktuális alkalmazáslap fókuszálásával tüntethető el egyszerűen.) Fő jellemzői:    

Text: a bevitt szöveg AcceptsReturn: Enter elfogadása InputScope: meghatározza a megjelenő billentyűzet tartalmát, pl.: Text, Search, Number, EmailUserName… IsReadOnly: csak olvasható

Fő események:  

TextChanged: szöveg megváltozott KeyDown, KeyUp: billentyűlenyomás/elengedés (pl. ENTER érzékeléshez)

PasswordBox Olyan mint a TextBox, csak jelszóbevitelre szolgál, a jelszókarakter a PasswordChar jellemzővel adható meg (alapból pont), a jelszó hossza korlátozható a MaxLength paraméterrel, a jelszó a Password paraméterrel kapható meg.

ApplicationBar Minden alkalmazáslap tartalmazhat egy ApplicationBar-t, amely a kijelző alján (vagy fekvő helyzetnél oldalán) megjelenő eszköztárként funkcionál. Az eszköztár max. 4 darab elemet tartalmazhat, valamint az ApplicationBar felnyitott helyzetében megjeleníthetők menüpontok is. A gombok piktogramjaiból több előgyártott is elérhető, illetve magunk is készíthetünk. A piktogramok mérete 48x48 pixel kell legyen, nem kell tartalmazniuk, a gombokat jelölő kört, azt az alkalmazás rajzolja ki. A piktogramok tartalmi része a kép közepén kell legyen és max. 26 px oldalhosszúságú négyzetben kell elférjen (a bekeretezéshez). A piktogramokat PNG formátumban kell elkészíteni, átlátszó háttérrel és fehér előtérrel. A színes piktogramok használata hivatalosan nem támogatott. A szabályos piktogramokat a rendszer a témabeállításoknak megfelelően átszínezi. Egy egyszerű példa: <shell:ApplicationBar> <shell:ApplicationBar.MenuItems> <shell:ApplicationBarMenuItem IsEnabled="True" Text="refresh"/> <shell:ApplicationBarMenuItem IsEnabled="True" Text="about"/> <shell:ApplicationBarIconButton IconUri="/icons/appbar.save.rest.png" IsEnabled="True" Text="save"/> <shell:ApplicationBarIconButton IconUri="/icons/appbar.back.rest.png" IsEnabled="True" Text="back"/> <shell:ApplicationBarIconButton IconUri="/icons/appbar.favs.addto.rest.png" IsEnabled="True" Text="favourites"/> <shell:ApplicationBarIconButton IconUri="/icons/appbar.feature.search.rest.png" IsEnabled="True" Text="search"/>

Amint látható az ApplicationBar elemei (Buttuns mező) az ApplicationBarIconButton osztály példányai, fő jellemzőik:   

IconUri: az ikon elérési útja IsEnabled: ezzel letiltható (kiszürkíthető) az adott gomb Text: a gomb alatt megjelenő magyarázat, amely általában egy-két szavas, mivel több nem fér ki

A menüpontok a MenuItems tulajdonsággal adhatóak meg, típusuk: ApplicationBarMenuItem, fő jellemzőik:  

Text: a menüpont szövege IsEnabled: engedélyezettség

Minden gomb és menüpont rendelkezik Click eseménnyel. A kijelző forgatásakor az ApplicationBar automatikusan felveszi a megfelelő helyzetet.

Eseménykezelők Ha az eddig elkészített kezelőfelületet megnyitjuk Visual Studioban, akkor könnyen hozzáláthatunk a kezelőfelületet használó kód előállításának. A kiinduló kód valahogy így néz ki: using using using using using using using using using using using using

System; System.Collections.Generic; System.Linq; System.Net; System.Windows; System.Windows.Controls; System.Windows.Documents; System.Windows.Input; System.Windows.Media; System.Windows.Media.Animation; System.Windows.Shapes; Microsoft.Phone.Controls;

namespace WindowsPhoneApplication1 { public partial class MainPage : PhoneApplicationPage { public MainPage() { InitializeComponent(); } } }

A MainPage az adott alkalmazáslapnak megfelelő osztály, ebbe kerülhet az alkalmazásunk adott laphoz fűződő kódja. Ahhoz, hogy a kezelőfelület elemeit elérhessük, annak x:Name tulajdonságát meg kell adni, ennek természetesen szabályos C# azonosítót kell használni. Az eseménykezelőket úgy hozhatjuk létre, hogy pl. egy gomb Click eseménykezelőjéhez, a gomb Click attribútumában megadjuk az eseménykezelő nevét, majd megírjuk a függvényt (a Visual Studio maga is elkészíti nekünk az eseménykezelő törzsét, ha szeretnénk): <Button x:Name="BStart" Click="BStart_Click" Content="Button" Height="92" VerticalAlignment="Top"/>

A kapcsolódó kód: namespace WindowsPhoneApplication1 { public partial class MainPage : PhoneApplicationPage {

public MainPage() { InitializeComponent(); } private void BStart_Click(object sender, RoutedEventArgs e) { BStart.Content = "Rám kattintottak!"; } } }

Navigáció A Windows Phone ill. Silverlight alkalmazások navigációs modellje elsőre furcsának tűnhet a „desktop” alkalmazásokhoz képest: egy alkalmazás több alkalmazáslapból épül fel, ezek között a navigáció URL-ek segítségével történik (nagyjából úgy, mint a weben). Ez a modell több előnnyel jár, azonban kényelmetlenségeket is okoz: 

 

Az alkalmazás különböző lapjaihoz tartozó URL-ek lehetővé teszik például az alkalmazásban történő navigálás egyszerűsítését. Például, ha vissza gombot nyomunk, akkor a program megkapja az előző alkalmazáslap URL-jét, és azt megjeleníti. Létrehozható deep linking, azaz egy alkalmazáson belül adott lapra hivatkozhatunk. A nem multi-tasking alkalmazások visszaállításkor megkapják a régi URL-t. Az URL segítségével célszerű (és ajánlott) adatokat, paramétereket átadni, ami bár a webes környezetben megszokott, itt furcsának tűnhet (ez az ajánlás persze megkerülhető).

A navigáció a System.Windows.Navigation.NavigationService osztállyal, pontosabban az adott oldal Page.NavigationService mezőjével érhető el. Lehetőségünk van adott oldalra lépni a Navigate metódussal, ahol a lapok linkje „/MainPage.xaml” formában adható meg, a „/” a projekt gyökérkönyvtára, amelyben helyet foglalnak a különböző lapok. A GoBack és GoForward metódusokkal lehetséges vissza és előre menni (a vissza hardvergomb is a GoBack-et hívja meg alapesetben). Ezen utasítások kivételt dobnak abban az esetben, ha nincs hova vissza/előre menni. Ha tudni szeretnénk lehet-e előre vagy visszafelé menni, akkor ezt megadják a CanGoBack és CanGoForward mezők.

Adatátvitel lapok között „URL” módszer Ha paramétert adnánk át az megtehető a webes get lekérések formájában pl.: „/Search.xaml?subject=BME&sender=neptun”. A fogadó oldalon ezt elérhetjük a NavigationContext.QueryString szótár szerkezeten keresztül (pl.: a TryGetValue metódussal). Figyelem! Ha felhasználó által beírt szöveget viszünk át, akkor az Uri.EscapeDataString metódussal kódoljuk a stringet (pl.: a felhasználó megadja subjectnek, hogy C&C: Tiberian Sun és az ’&’ jel miatt a subject csak a C lenne!).

private void BPage1_Click(object sender, RoutedEventArgs e) { //Átmenés a SecondPage.xaml lapra NavigationService.Navigate(new Uri("/Page1.xaml?param="+Uri.EscapeDataString(TBText.Text), UriKind.RelativeOrAbsolute)); } private void BBack_Click(object sender, RoutedEventArgs e) { //Előző lapra menés if (NavigationService.CanGoBack) NavigationService.GoBack(); }

A fogadó oldalon az OnNavigatedTo metódus felüldefiniálásával érzékelhetjük a navigációt, és lekérdezhetjük az üzenetet: protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e) { base.OnNavigatedTo(e); string param; if (NavigationContext.QueryString.TryGetValue("param",out param)) { PageTitle.Text = param; } }

Szükségünk lehet a lapról való eltávozás érzékelésére (memória felszabadítás, animáció stb.): ezt az OnNavigatingFrom és az OnNavigatedFrom metódusokkal, vagyis azok felülírásával érhetjük el. Előbbi a navigáció megkezdésekor, utóbbi annak végeztével fut le.

„Statikus” módszer Bár az itt bemutatott adatátviteli forma számos esetben jól alkalmazható, sokszor szükség lehet objektumok közvetlen átadására. Ehhez szükség van arra, hogy az adott objektumpéldány referenciáját továbbítsuk. Mivel a lapok létrehozását a keretrendszer irányítja, így nincs arra biztosíték, hogy egy adott lap (nem az amin állunk) ép létezik-e. Ez probléma nagyon egyszerűen megkerülhető statikus osztályok és mezők használatával. A statikus osztályok mindig léteznek, és ha megfelelően helyezzük el őket, valamint láthatóságukat beállítjuk, akkor bárhonnan elérhetők és módosíthatok a bennük tárolt adatok.

Alkalmazás életciklus Elméleti bevezető A Windows Phone alkalmazások életciklusa eltér az asztali Windows alkalmazásokétól, ennek egyik fő oka a telefonokon elérhető szűk erőforráskészlet (memória, akkumulátor) és az elvárt reszponzív működés. Míg az asztali Windows programok esetében egy program elindul, fut majd leáll, addig a telefonon ez a hármas több állapottal bővül. Mikor a telefonon futó programból átváltunk egy

másikra a program deaktivált állapotba kerül, ilyenkor a program összes szála megállításra kerül, azonban a program a memóriában marad. Ha a memória az újabb programok megnyitása közben elfogyna, akkor a deaktivált programokat a legrégebbitől indulva a rendszer ún. tombstone (sírkő) állapotba rakja. Ilyenkor a program kikerül a memóriából, azonban annak navigációs előzményei és állapotjelzői elmentődnek. Ha a programot újra aktiváljuk (addig lépünk vissza, vagy kiválasztjuk a vissza gomb hosszan nyomásával [Mango]), akkor annak új példánya indul el, de a felhasználó ideális esetben max. a hosszabb töltési időből gyanakodhat erre, ugyanis az alkalmazás állapotát az elmentett adatokból visszaállíthatjuk. Jelenleg maximum 5 alkalmazás lehet a memóriában, azok a deaktivált vagy sírkő állapotba került programok, amelyek nem férnek bele az 5 helybe teljes leállításon esnek át, állapotuk nem hozható vissza. Ez a módszer egyszerre biztosítja, hogy jelentős erőforrások maradjanak az éppen futó program részére, ne fogyasszunk feleslegesen sok energiát, ugyanakkor mégis gyorsan visszaállítható legyen a program eredeti állapota.

Eseménykezelők Ezen eseménykezelők a Microsoft.Phone.Shell.PhoneApplicationService.Current objektumban vannak.

Launching Ez az esemény akkor jön létre, amikor elindítjuk az alkalmazást. A programnak ilyenkor célszerűen úgy kell viselkednie, hogy a felhasználó lássa: új példány indult. Az indítási eseménykezelőben nem szabad I/O műveleteket alkalmazni, mert alkalmazásbetöltés lelassulhat.

Deactivated Ez az esemény akkor jön létre, amikor az alkalmazásról egy másikra váltottunk (vagy a start képernyőre mentünk stb.). Ilyenkor az alkalmazás állapotát el kell menteni, ugyanis nem garantálható, hogy az valaha reaktiválva lesz.

Activated Ez az esemény akkor jön létre, ha az alkalmazást reaktiválták. Ilyenkor ellenőrizni kell, hogy közben sírkő állapotba került-e, ami az IsApplicationInstancePreserved (event args) mezőből kapható meg. Ha ez igaz, akkor az alkalmazás végig teljesen a memóriában maradt, nem kell visszaállítani, ellenkező esetben visszaállítás szükséges.

Closed Ha a felhasználó az alkalmazás első lapjánál visszafele navigál, akkor az alkalmazás az állapot mentése nélkül bezárásra kerül. Ebben az esetben még mindig sor kerülhet olyan információk elmentésére, amelyek felhasználandók az alkalmazás következő elindítása esetén. Erre csak 10 másodperc áll rendelkezésre, ha ez alatt nem végzünk, akkor az alkalmazás erőltetett bezárásra kerül.

Állapot eltárolása Az adatok eltárolására több mód adódik: a rendszer biztosít szótárszerkezeteket az adattárolásra valamint fájlba is írhatjuk ezeket. Az előbbi előnye, hogy innen gyorsan visszaállítható a sírkő állapotba került alkalmazás tartalma, hiszen ez a memóriában marad. Hátrány, hogy az adatoknak szerializálhatóaknak kell lennie. A fájlba írás rugalmasabb, azonban lassú.

Globális állapot Vannak olyan adatok, melyek a teljes alkalmazásban használatban vannak, ezek tárolására szolgál a PhoneApplicationService.Current.State szótár.

Lokális állapot Adott oldalra jellemző információk tárolására a PhoneApplicationPage.State szótár használható.

Fájlkezelés A Windows Phone alkalmazások egymástól elkülönített módon kerülnek tárolva a telefon fájlrendszerében, így nem tudják ilyen módon károsan befolyásolni a telefon működését. Az adattárolásra két formában van lehetőség:  

Egy szótárban tárolunk szerializálható adatokat (háttérben tárolás XML fájlban), vagy Saját fájlok írása/olvasása

Ezen műveletekhez szükséges osztályok a System.IO.IsolatedStorage névtérben vannak.

Beállítások mentése A beállítások tipikusan kis méretű, egyszerű változókkal írhatóak le, ezek könnyen eltárolhatók/előhívhatók az IsolatedStorageSettings.ApplicationSettings szótárban/ból.

Fájlok kezelése Ez gyakorlatilag megegyezik a sima .Net fájlkezeléssel, de itt a System.IO.File helyett a System.IO.IsolatedStorage.IsolatedStorageFile –t használjuk. Amelyet a IsolatedStorageFile.GetUserStoreForApplication() metódussal kell létrehozni. A fájlok kezelése ezután az IsolatedStorageFileStream osztállyal történik.