screenshot1

Layout Containerek

máj 26th

Írta: rockbag Kategória: Általános

Nincs hozzászólás

Mint azt a legelső tutorialomban említettem, Silverlightban több különböző Layout Container áll rendelkezésünkre, mindegyik a maga sajátosságával. Ebben a cikkben ezek közül a legfontosabbakat fogom részletezni, példával bemutatni.

Elmélet: a Layout Container egy olyan egység, amiben különböző UI elementeket tudunk elhelyezni.

Az itt bemutatásra kerülő Layout Containerek:

  • Grid
  • Canvas
  • StackPanel
  • ScrollViewer

Grid: a Gridet úgy kell elképzelnünk, mint egy táblázatot. Alapjáraton egy sorral és oszloppal rendelkezik, azonban beállíthatunk neki tetszőleges értéket is. Ha ezt megtettük, a felhelyezett UI elemeket könnyedén pozícionálhatjuk abba a cellába, amelyikbe szeretnénk.

Nyissunk egy új projektet.
Töröljünk ki mindent a MainPage.xaml állományban, ami a ‘  <!–LayoutRoot is the root grid where all page content is placed–>’ és ‘<!–Sample code showing usage of ApplicationBar–>’ rész között van.

 

1. ábra

A toolboxból vagy XAML kódból tegyünk fel egy Gridet a számunkra megfelelő helyre, majd méretezzük át:
<Grid x:Name=”myGrid” Width=”480″ Height=”800″></Grid>
Nem véletlen hoztam úgy létre, hogy nem zártam le rögtön a tag-et, mivel a nyitó és záró tag-ek között szükségünk lesz kifejteni egy-két dolgot.
Mint említettem, a Gridet egy táblázatként kell elképzelnünk. Állítsuk be, hogy legyen két sorunk. Ezt a következőképp tehetjük meg:
A nyitó és záró tag-ek közé írjuk a következőt:

<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>

Amint láthatjuk, létre is jött a két sor a Gridünkben. Ezeknek adhatunk abszolút vagy relatív magasságot. Abszolút magasságot egy egyszerű érték beírásával tehetjük meg, pl. <RowDefinition Height=”300″/>, relatívat pedig * használatával. Ez annyit fog takarni, hogy hány ‘egység’ méretűre szeretnénk az adott sor magasságát tenni. Tehát ha pl.: <RowDefinition Height=”3*”/> <RowDefinition Height = “2*”/> értékeket használjuk, akkor az első sor 3/5 magas lesz, a második sor pedig 2/5.

Oszolopokat is hasonlóan lehet megadni és méretezni, a különbség csak annyi, hogy ColumnDefinitions-t használunk:

<Grid.ColumnDefinitions>
<ColumnDefinition Width= “4*” />
<ColumnDefinition Width= “2*” />
<Grid.ColumnDefinition>

 

2. és 3. ábra – sorok és oszlopok

Hogyan tudjuk elhelyezni az adott sorban/oszlopban a feltett UI elemeket? Egyszerűen. Nézzünk egy példát:

Hozzunk létre egy TextBlock-ot és egy Button-t a már megtanult módon, XAML-ből és adjuk hozzájuk a következő propertyket:
Grid.Row = “0″ vagy Grid.Column = “0″
Grid.Row = “1″ vagy Grid.Column= “1″ – attól függően, hogy sorban vagy oszlopban akarunk pozicionálni. (Row = sor, Column = oszlop)

Tudnunk kell, hogy az indexelés itt is 0-tól kezdődik, tehát a 0 valójában az első oszlop, az 1 a második, stb.  Alapértelmezett érték a 0.


4. ábra – pozicionálás oszlopokban

Ilyen egyszerű! Menjünk tovább a Canvas-re.

Canvas: magyarul vászon. A neve meg is magyarázza a szolgáltatását, egy rajzvászont kell elképzelnünk, ahol mindennek, amit felpakolunk rá, ki tudjuk nyerni a pozícióját a (0,0) ponthoz képest.

Elmélet: Silverlightban a (0,0) pont a bal felső sarok alapértelmezetten.

 Töröljük ki a Gridünket és hozzunk létre egy Canvast. Ezt a következőképpen tehetjük meg:

<Canvas x:Name = “myCanvas” Width = “480″ Height = “768″></Canvas>

Majd helyezzünk fel egy gombot a toolboxunkból bárhova a felületen. Ha ez megtörtént, akkor láthatjuk, hogy egy ilyen sor keletkezett a Canvas tag-ek között:

   <Button Canvas.Left=”129″ Canvas.Top=”309″ Content=”Button” Height=”71″ Name=”button1″ Width=”160″ />

A Canvas.Left a bal oldaltól számított távolság, a Canvas.Top pedig a vászon tetejétől számított távolság. Természetesen az érték attól függően változik, hogy hol van az adott elemünk.

Miért jó ez nekünk? Nos, gondoljunk bele, egy egyszerűbb játéknál az objektumaink jobbára folyamatosan mozogni fognak, így szeretnénk tudni majd a jelenlegi helyzetüket. Ezt Canvas használatával tudjuk kinyerni. C# kódból a következőképpen működik:

Pozíció kinyerése:

X: (double)objektum.GetValue(Canvas.LeftProperty);

Y: (double)objektum.GetValue(Canvas.TopProperty);

Fontos: mivel ez egy DependencyProperty értéket fog visszaadni, ezért typecastolni kell double-re, hogy használni tudjuk. 

Pozíció megadása:

X: objektum.SetValue(Canvas.LeftProperty, X);

Y: objektum.SetValue(CanvasLeftProperty, Y);

ahol X és Y egy-egy double típusú változó.

5. ábra – pozíció kinyerése/megadása

Most, hogy megismerkedtünk a Canvas-szel, továbbmehetünk a StackPanelre.

StackPanel: a StackPanel egy olyan LayoutContainer, ami a hozzáadott elemeket – beállítás szerint – egymás alá vagy mellé pakolja.

Töröljük ki a Canvas-t és hozzunk létre helyette egy StackPanelt.

<StackPanel x:Name = “myStackPanel” Width=”480″ Height=”768″ Orientation = “Vertical”> </StackPanel>

megjegyzés: az Orientation alapértéke Vertical, most csak a szemléltetés céljából írtam ki külön. 

Ha ezzel megvagyunk, XAML-ből adjunk hozzá három különböző elemet: TextBlock, TextBox, Button.

 <StackPanel x:Name = “myStackPanel” Width=”480″ Height=”768″ Orientation = “Vertical”>

<TextBlock x:Name =”myTextBlock” Width = “200″ Height=”50″ Text = “Stack”/>

<TextBox x:Name = “myTextBox” Width = “200″ Height=”100″ Text = “Panel”/>

<Button x:Name =”myButton” Width = “200″ Height=”150″ Content=”Tutorial”/>

</StackPanel>

Amint láthatjuk, a három elem szépen egymás alá lett helyezve. Ha ugyanezt megcsináljuk egy Canvas-en vagy egy Griden, úgy hogy nem adunk meg pozíciókat, akkor a Controljaink egymás tetején lennének.

6. ábra – Vertikális StackPanel

Ha az Orientationt átírjuk Horizontal-ra, akkor TextBlock, TextBox és Button szépen egymás mellé kerülnek.

7. ábra – Horizontális StackPanel

Ezzel is megvagyunk. Menjünk tovább a ScrollViewerre.

ScrollViewer: előfordulhat, hogy több tartalmunk van, mint amennyit egy oldalon képesek lennénk megjeleníteni. A teendőnk ilyenkor annyi, hogy fogunk egy ScrollViewert, és helyezzük el a kívánt tartalom köré.

Fontos: a ScrollViewer egyetlen egy elemet képes tárolni! Ez azt jelenti, hogy ha több elemünk van, akkor a kívánt tartalomnak mindenképp egy másik LayoutContainerben kell lennie!

Fontos: a ScrollViewernek, amikor csak tehetjük, a szélessége/magassága legyen automatikus, mivel ha megadunk neki egy értéket, akkor maximum addig a pozícióig lesz képes elgörgetni!

Hogyan működik?

Létrehozása a következő módon történik:

<ScrollViewer x:Name = myScrollViewer” ScrollViewer.VerticalScrollBarVisibility=”Auto” ScrollViewer.HorinztalScrollBarVisibility=”Auto”> … tartalom … </ScrollViewer>

megjegyzés: a VerticalScrollBarVisibility és a HorizontalScrollBarVisibility négy értéket vehetnek fel:

  • Auto – a program megpróbálja magától beállítani, hogy mikor van szükségünk a tartalom scrollolási lehetőségére
  • Hidden – a ScrollViewer le van rejtve, ergo nem fog görgetni, ha nagyobb a tartalom, mint ami elfér
  • Visible – a ScrollViewer mindig jelen van, akkor is, ha a tartalom kisebb, mint ami elfér
  • Disabled – majdnem ugyanaz, mint a Hidden.

Adjunk hozzá a már létrehozott StackPanelünkhöz tetszőleges számú és típusú elemet, illetve állítsuk át a szélességét Autora, valamint az Orientationt Horizontalra, ha még nem tettük meg. Ha ezzel megvagyunk, futtassuk le a programot és vegyük észre, hogy nem tudjuk elérni azt a tartalmat, ami már nem fért el a képernyőn.

Helyezzünk egy egy ScrollViewert a StackPanelünk köré a fentebb mutatott módon. Futassuk le a programot, és az egér bal gombját nyomva tartva, húzzuk el a kurzort jobbról balra az emulatoron. Amint láthatjuk, a tartalom szépen elcsúszik balra.

8. ábra – ScrollViewer

Mit tanultunk ebből?

  • Hogyan és mire használjuk a különböző LayoutContainer típusokat
  • LayoutContainereket egymásba tudunk ágyazni
  • Mi a teendő, ha több tartalmat szeretnénk megjeleníteni, mint ami elfér

Köszönöm, hogy végigcsináltad a tutorialt.

További jó fejlesztést!

picture1

Alap eseménykezelés – Gomb és Back Key

máj 9th

Írta: rockbag Kategória: Általános

Nincs hozzászólás

Most, hogy már tudunk némi elméletet, illetve sikeresen megírtuk Hello World programunkat, lássuk a második alap tudnivalót: az eseménykezelést (event handling).

Elmélet: Windows Phone 7-en, ahogy más operációs rendszereken is, események (event) “irányítják” a programunkat. Ezek az események fogják megmondani, hogy ha a felhasználó csinál valamit, akkor mi is történjen. Minden egyes Controlunknak különböző eseményei vannak, egy Control esetén több ilyenre is feliratkozhatunk. 

Ebben a tutorialban két különböző eseménykezelést fogok bemutatni:

  • Egyszerű gombra kattintás
  • A készüléken levő Back Key felülírása

Kezdjünk is neki!

1. Hozzunk létre egy új Silverlight for WP projektet.

2. Tegyünk fel egy TextBlockot és egy Buttont valahova a felületre.

3. Írjunk egy függvényt, ami gombnyomáskor megváltoztatja a TextBlockba írt szöveget.

4. Adjunk a projektünkhöz egy új Windows Phone page-et.

5. Tegyünk fel egy új gombot a felületünkre.

6. Írjunk egy függvényt, ami gombnyomáskor átnavigál minket az újonnan hozzáadott page-hez.

7. Nézzük meg mi történik a Back Key megnyomásakor.

8. Írjuk felül a Back Key eseményét és nézzük meg újra, hogy mi történik.

 

1. Ezt nem írom le részletesen, az előző tutorialban kifejtettem, hogyan lehet új WP7 projektet létrehozni. Ezeket a lépéseket kell itt is követni. :)

2. Tetszés szerint helyezzünk el egy TextBlockot és egy Buttont a ContentPanel nevű grideünkre. Akár a Toolbox-ból, akár XAML-ből is feltehetjük. Én XAML-ből fogom felhelyezni. Feltétlenül adjunk egy nevet a szövegmezőnknek és a gombunknak, ugyanis a kódunkban ezekre fogunk hivatkozni. Ez a <TextBlock x:Name=”myTextBlock”…/> és a <Button x:Name = “myButton”…/> rész. Így a szövegmezőm neve az lett, hogy myTextBlock, a gombomé pedig az, hogy myButton. Ezen felül a gombunkhoz hozzá kell rendelni a Click eseményt, ez akkor hajtódik végre, hogyha rákattintunk. Ezt is pofonegyszerűen megtehetjük XAML-ből, az ábrán láthatjuk, a következő részt: <Button … Click=”myButton_Click”/>. Ezzel létre is hoztuk a megfelelő eseményt a gombunk számára. Ugyanezt megtehetjük, ha a properties ablakunkban felül átváltunk az Events fülre és kikeressük a számunkra fontos eseményt.

1. ábra – TextBlock és Button felhelyezése

3. Klikkeljünk duplán a gombunkra, vagy kattintsunk a <… Click=”myButton_Click” …/> propertynkre jobb gombbal és válasszuk a “Navigate to Event Handler” opciót. Be is töltődik a MainPage állományunkhoz tartozó code-behind, a MainPage.xaml.cs. Itt tudunk C# nyelven (már ha úgy hoztuk létre a projektet, ugyanis lehetséges Visual Basicben is programot írni WP7-re) kódokat írni, eseményeket kezelni. Láthatjuk, hogy már rendelkezésünkre is áll a myButton_Click nevű függvény. Ez akkor jött létre, amikor megadtuk a myButton-nek, hogy a Click event legyen “myButton_Click”. Ennek a függvénynek a törzsében tudjuk megadni, hogy mit szeretnénk csinálni, amikor a felhasználó megnyomja a gombunkat.
Itt jön elő, hogy miért is volt fontos a TextBlockunknak nevet adni. Kattintsunk a függvénytörzsbe, és írjuk be a következőt:

myTextBlock.Text = “Megváltozott!”;

2. ábra – MainPage.xaml.cs

Futtassuk le a programot, nyomjuk meg a gombot és nézzük meg mi történik!

4. Ahhoz, hogy hozzáadjunk egy új oldalt a projektünkhöz, nem kell mást tennünk, mint a Solution Explorerben rákattintani a projektünk nevére, jobb klikk -> Add -> New Item… (vagy Ctrl + Shift + A) és kiválasztani a számunkra megfelelő oldaltípust. Nekünk most a Windows Phone Portrait Page-re van szükségünk. Válasszuk ki, adjunk neki valami nevet és kattintsunk az OK gombra. A többi sémáról egy másik tutorialban írok majd részletesen.

 Elmélet: Amint láthattuk, alapjáraton csak egy XAML fájl kerül legenerálásra, ez pedig a MainPage. Ha azt szeretnénk, hogy az alkalmazásunkban több oldalunk is legyen, akkor több XAML fájlra van szükségünk. Minden ilyen fájlnak különböző kinézetet adhatunk, különböző eseményeket tudunk rajtuk lekezelni. (Pl.: szeretnénk, hogy a felhasználónknak legyen lehetősége különböző beállításokat módosítani, de nem akarjuk telezsúfolni a főképernyőnket mindenféle controllal. Ekkor célszerű hozzáadni egy új page-et a projektünkhöz, mondjuk Options néven, ahol lehetőséget adunk neki, hogy az ő általa választott beállításokat használja.) Kicsit hasonlít ez a HTML-hez, ahol több állománnyal dolgozunk és mindig azt töltjük be, amire épp szükségünk van.

 

3. és 4. ábra – új oldal hozzáadása

5. Betöltődött, illetve a Solution Explorerünkben megjelent az újonnan hozzáadott oldal. Egyelőre menjünk vissza a MainPage.xaml-ünkre (dupla katt a Solution Explorerben). Miután betöltődött a grafikus felületünk, adjunk hozzá egy új gombot a ContentPanelünkhöz. Nevezzük el és rendeljük hozzá a Click eseményt. Az enyém neve az lett, hogy myNavigationButton.

5. ábra – új gomb

6. Kattintsunk kettőt a gombra és máris kezelhetjük az eseményét. Adjuk hozzá myNavigationButton függvényünkhöz a következő sort:

 NavigationService.Navigate(new Uri(“/myNewPage.xaml”, UriKind.Relative));  ahol a myNewPage.xaml annak az oldalnak a neve, amit az előbbiek során hozzáadtunk a projekthez.

Ahhoz, hogy át tudjunk navigálni egy másik oldalra, a NavigationService áll rendelkezésünkre. Ennek az osztálynak a Navigate függényére van szükségünk, ami egy Uri-t vár paraméterül. Az Uri-nak meg kell adni egy elérési utat, illetve azt, hogy relatív vagy abszolút-e az. Én a relatívot használom, hogy kevesebbet kelljen gépelni.

6. ábra –  MainPage.xaml.cs

7. Futtassuk a programot és nézzük meg, hogy mi történik, ha megnyomjuk az új gombunkat! Láthatjuk, hogy betöltődött az a xaml állomány, amit megadtunk. Most nyomjuk meg a Back (<-) gombot az emulatoron vagy a készüléken. Ez visszanavigál minket az előző oldalra. Miért jó ez nekünk? A válasz egyszerű: nem kell külön foglalkoznunk vissza gomb felrakásával és lekezelésével, hiszen ez a rendelkezésünkre áll.

8. Előfordulhat azonban, hogy nem szeretnénk visszanavigálni ennek a gombnak a megnyomására, vagy visszanavigáláskor szeretnénk, ha történne még valami más is.

Megjegyzés: ha szeretnénk feltölteni applikációnkat a Marketplace-be, akkor a Back gombot TILOS úgy felülírni, hogy az korlátozza eredeti célját, azaz a visszanavigálást. Más esemény lefuthat, de appunknak muszáj visszamennie az előző oldalra. Kivétel ez alól, ha Silverlightban valamilyen játékot fejlesztünk, ugyanis ebben az esetben PAUSE lehetőséget kell biztosítani, ha a felhasználó éppen játékban van. 

Ehhez meg kell nyitnunk új oldalunkat, ami nálam a myNewPage nevet viseli. Keressük ki a következő sort a XAML kódunkban:
shell:SystemTray.IsVisible=”True”>  és változtassuk meg erre:
shell:SystemTray.IsVisible=”True” BackKeyPress=”PhoneApplicationPage_BackKeyPress”>

Amint ez megvan, jobb klikk a  ”BackKeyPress=”PhoneApplicationPage_BackKeyPress” részre és válasszuk a “Navigate to event handler” opciót. Ezzel betöltődik a myNewPage.xaml code-behindja. Láthatjuk, hogy legenerálódott a PhoneApplicationPage_BackKeyPress függvény. Ennek a törzsébe írjuk be a következőt:

e.Cancel = true;

 

7. és 8. ábra – myNewPage.xaml és myNewPage.xaml.cs

Futtassuk le a programot, navigáljunk át az új oldalunkra, kattintsunk a Back gombra és nézzük meg, mi történik!

Kész is vagyunk! :)

primaryImage

Virtual Bubble Level

máj 7th

Írta: rockbag Kategória: Általános

Nincs hozzászólás

Virtual Bubble Level programunk egy versenyen született, ahol Horváth Attilával indultam egy csapatban. Az app egy virtuális vízmérték, négy különböző kinézettel. Fokban mutatja, hogy mennyire ferde az adott felület amire kíváncsiak vagyunk.  A témaválasztó menü eltüntethető, ha valakit nagyon zavar.

 

Screenshotok:

   

Link:

http://www.windowsphone.com/hu-HU/apps/05622e84-0a3a-433f-8b32-10fa1b1843ca

Large_Tile

Bubble Popper

máj 7th

Írta: rockbag Kategória: Általános

Nincs hozzászólás

 

 

 

 

A Bubble Popper második teljesen elkészült játékom Windows Phone 7-re, melynek lényege, hogy a játékos buborékokat pukkaszt ki az ujjával. Természetesen a játék idővel egyre nehezedik, minél később járunk, annál többször kell ujjunkkal a képernyőre nyomni. Ha ügyesek vagyunk, akkor plusz pontot kapunk.

Tervbe van véve egy adatbázis a felhőben, ahova a játékosok feltölthetik egy algoritmus által kiszámolt pontszámukat. Ez az algoritmus figyelembe veszi a játékban elért összpontszámot, a kipukkasztott buborékok számát, a pontosságot, a játékban eltöltött időt, illetve hogy mekkora volt a legnagyobb pukkasztási-szériánk.
Formulában valami ilyesmi:  R = 1000 + ( 1.1*(A/100) + 0.25T + 0.5St + 0.6N + 0.05Sc) ahol R a kiszámított pontszám, A a pontosság, T a játékban eltöltött idő, St a pukkasztási-széria, N a kipukkasztott buborékok száma és Sc a játékban elért pontszám.

Screenshotok:

   

 

Link:
http://windowsphone.com/s?appid=83414a4f-76bc-4e81-955e-8b3e368597eb

Maze Madness

máj 7th

Írta: rockbag Kategória: Programok

Nincs hozzászólás

Első Windows Phone 7-es játékom, amely kötelező programként indult, és egy egész pofás kis projektként zárult. A lényege az, hogy egy golyó szerű képződményt kell végigvezetnünk az adott pályán. A játék folyamán pénzt és pontokat gyűjtünk. A pénzen különböző kinézeteket, úgynevezett skineket tudunk vásárolni magunknak, ezzel is bővítve a játékélményt. Húsz különböző pálya áll rendelkezésünkre, melyek folyamatosan nehezednek. A háttérzene (a szerző beleegyezésével) David MeShow  Unfinished Dream című alkotása.

Screenshotok:

    

 

Link:
http://www.windowsphone.com/hu-HU/apps/0704fe76-a99e-46e6-a8c7-b57a95808df0

Hello Windows Phone World!

máj 3rd

Írta: rockbag Kategória: Tutorialok

Nincs hozzászólás

Hello Windows Phone World!

A Visual Studio és a Windows Phone SDK sikeres telepítése után, lássuk, hogyan készíthetünk el egy egyszerű Hello World applikációt WP7 rendszerre.

Indítsuk el a Visual Studio példányunkat, majd kattintsunk a “New project” gombra (File -> New Project).
Itt válasszuk a Visual C# fület, nyissuk le, majd keressük ki a Silverlight of Windows Phone lehetőséget.
Amint láthatjuk, elég sok séma adott, nekünk most a Windows Phone Application a lényeges. (A többiről a későbbiek folyamán…)
Adjunk meg egy nevet (nálam Hello World) és egy elérési útvonalat.

 

1. ábra – új projekt

Egy oké gomb után a VS legenerálja a számunkra fontos állományokat. Ez fog fogadni minket:

2. ábra – MainPage.xaml

Ez az úgynevezett MainPage.xaml, az alapértelmezett belépési pontja a programunknak. Ezt a WMAppManifest.xml állományunkban átállíthatjuk (3. ábra).
Nálam az elrendezés úgy néz ki, hogy bal oldalt van a Solution Explorer, ahol a Solution állományai vannak felsorolva. Egy solution több projektet is tartalmazhat, de nálunk jelenleg csak egy van kéznél, ez pedig a Hello World. Eggyel jobbra a megnyitott page grafikus megjelenítése, mellette pedig a XAML leírása látható.
Tudnunk kell, hogy hogyan is működik egy ilyen WP7-es program. Minden amit látunk, az egy XAML (Extensible Application Markup Language) állomány, ez felel a grafikus interfész leírásáért, megvalósításáért. Ez mögött van egy C# kód (code-behind), ami a különböző események lekezeléséért felelős. Amikor navigálunk egy applikácóban, akkor a különböző XAML oldalakat töltjük be. Ennyi elmélet elegendő, hogy el tudjunk indulni.
Tovább haladva láthatjuk a Properties ablakot, itt az oldalon létrehozott UI elemenetek tulajdonságait módosíthatjuk pofonegyszerűen.

Láthatjuk, hogy alapértelmezetten két TextBlock (szövegmező) is generálásra került. Módosítsuk ezeket:

  1. Kattintsunk a page name TextBlockra, majd oldalt a Properties-ben változtassuk meg a Text property-t arra, hogy “Ez a főoldal”.
  2. Kattintsunk a  MY APPLICATION TextBlockra, majd a XAML leírásban írjuk át a Text=”MY APPLICATION” propertyt Text=”HELLO WORLD!”-re.

Amint láthatjuk, mindkét módszer ugyanazt eredményezte, csak más megközelítésben. Teljesen mindegy, hogy melyiket használjuk, a végeredmény ugyan az lesz.

  

3. és 4. ábra – WMAppManifest.xml és MainPage.xaml

 A szemfülesek észrevehették, hogy ez a két TextBlock egy <StackPanel> nevű containerbe van elhelyezve. Újabb elmélet:

Minden WP Controlt úgynevezett Containerekbe kell elhelyeznünk. Több ilyen egység is létezik:

  • Grid – egy egyszerűen kezelhető felület, táblaként is használhatjuk. Megadhatjuk, hogy hány sora és oszlopa legyen, és hogy melyikbe milyen Control kerüljön.
  • Canvas – mezei rajzvászon tulajdonképpen. Nem lehet sorokat és oszlopokat adni neki, viszont le tudjuk kérdezni egy adott Control pozícióját egyszerűen.
  • StackPanel – Egy lista, mehet lefele vagy oldalra. Ha beletszünk egy Controlt, akkor a  beállításnak megfelelően szépen beilleszti a megfelelő helyre.
  • ListBox – Hasonló mint a StackPanel, de nagyon jól lehet Template-ezni, ennek köszönhetően, ha olyan adatot szeretnénk megjeleníteni, ami több dologból is áll (pl.: profil, ahol van kép és név), akkor célszerű ezt használni

Nagyon fontos, hogy figyelni kell rá, hogy mit hova helyezünk el a XAML fában. Kívülről befele haladunk, tehát ami a fában lentebbi elem, az alárendeltje a fában fentebbinek. Erről részletesen később.

Ezt tudván, láthatjuk, hogy alapjáraton egy Windows Page a következőképpen épül fel:

<Grid x:Name=”LayoutRoot” Background=”Transparent”>
<Grid.RowDefinitions>
<RowDefinition Height=”Auto”/>
<RowDefinition Height=”*”/>
</Grid.RowDefinitions>

<!–TitlePanel contains the name of the application and page title–>
<StackPanel x:Name=”TitlePanel” Grid.Row=”0″ Margin=”12,17,0,28″>
<TextBlock x:Name=”ApplicationTitle” Text=”HELLO WORLD” Style=”{StaticResource PhoneTextNormalStyle}”/>
<TextBlock x:Name=”PageTitle” Text=”Ez a főoldal” Margin=”9,-7,0,0″ Style=”{StaticResource PhoneTextTitle1Style}”/>
</StackPanel>

<!–ContentPanel – place additional content here–>
<Grid x:Name=”ContentPanel” Grid.Row=”1″ Margin=”12,0,12,0″></Grid>
</Grid>

Tegyünk hát egy TextBlock-ot a ContentPanel nevű Gridünkbe. Ezt megtehetjük akár úgy, hogy ráhúzzuk a Toolbox-ból (ctrl + alt +x, ha nincs kint alapból, vagy felül View ->Toolbox), vagy kézzel beírjuk a XAML kódunkba. Én az utóbbit választom.

5. ábra – Szövegmező létrehozása

Ezek után nincs más dolgunk, mint futtatni a programot. Nyomjunk Ctrl + F5-öt, vagy simán F5-öt (fent Debug -> Start With/Without Debugging) és már indul is az Emulatorunk a Hello World appunkkal!

6. ábra – Az emulator

Gratulálok! Elkészültél az első Windows Phone 7 programoddal!
Ha hasznosnak találtad a bejegyzést, vagy megjegyzésed lenne a tutorial felépítésével kapcsolatban, kérlek hagyj egy kommentet!

Minden jót,
Bálint

WP7 – Kezdjünk neki!

máj 2nd

Írta: rockbag Kategória: Tutorialok

Nincs hozzászólás

Mire van szükségünk ahhoz, hogy tudjunk Windows Phone 7 platformra fejleszteni?

- Windows Phone 7 (vagy 7.5) SDK

- Microsoft Visual Studio Express Edition (ingyenes)

- Silverlight Toolkit

 

Milyen ismeretekre van szükségünk?

Kevés C#

Kevés XAML

 

Emlékezeteim szerint a Windows Phone SDK telepíti magával mind a Visual Studiot, mind a Toolkitet. Arra figyeljünk telepítés előtt mindenképp, hogy legyen elég hely a C meghajtón, ugyanis telepítési útvonalat nem tudunk választani, illetve arra, hogy az ingyenes Visual Studio nem fog települni, ha már van telepített bármilyen más VS a gépünkön.

Hasznos linkek: 

http://create.msdn.com/en-US/ - Ide tölthetjük fel már elkészült programjainkat.

http://create.msdn.com/en-us/home/getting_started - Angol tutorial, lépésről lépésre

http://www.microsoft.com/click/services/Redirect2.ashx?CR_EAC=300031561 - Az SDK letöltési útvonala

Bemutatkozás

máj 2nd

Írta: rockbag Kategória: Általános

Nincs hozzászólás

Sziasztok!

 

Ki vagyok én?

A nevem Biró Bálint és jelenleg a Szegedi Tudományegyetem Természettudományi és Informatikai Karán vagyok másodéves Programtervező Informatikus (Bsc) hallgató.

 

Mi ez a blog?

Ez a blog az általam készített programokat, kódrészleteket, tutorialokat fogja tartalmazni.
Jelenleg a mobil alkalmazásfejlesztésbe, azon belül is a Windows Phone 7 platformban vagyok viszonylag jártas. Ezen felül szeretnék a későbbiekben Windows 8-ra, Androird-ra, esetlegesen iOS-re fejleszteni.

Milyen gyakran várható frissítés?

Tanulmányaim mellett folyamatosan fejlesztek valamit. Ezekről mindig fogok feltenni anyagot, tehát várhatólag napi szinten lesz frissítve a blog.
Jó böngészést kívánok!