Matrakci Calculator – my new Windows Phone app

Find this application on Windows Phone Marketplace at this location:

If you want to play online this calculator right now, check this link. It is described all you want to know about Matrakci and Lattice multiplication as well.


During holidays I was working on a small Windows Phone app. The application simulates how people performed multiplication more than 500 years ago. Before 500 years, people didn’t have devices we have today, so it was pretty complicated to calculate how much is e.g. 2345*6542. Those days, one of the discovered devices was Napier Bones, which could perform multiplication of pretty big numbers (with 2 or more digits). The device uses very clever method for multiplication, discovered 50 years before Napier constructed his Abacus. A recent study of  the book, “Support of arithmetic in propositions of all magnitudes” (org. “Umdet-ul Hisab”) revealed an unknown fact that Matrakci had invented this genuine multiplication method. Nasuh Maktrakci was 16th century Ottoman mathematician, teacher, historian, geographer, cartographer, swordmaster, and miniaturist of Bosniak origin.
Currently application is preparing for sumbiting to marketplace, but there is a web silvelright version of the application which you can taste now. Just go to and taste this very clever method for multiplication.

CrossNumber- puzzle with numbers for WP7, Silverlight, Android and Win8 metro game

Recently I decided to start with implementation of my first game which is going to be CrossNumber  puzzle.


CrossNumbers is puzzle game which can be played from 7 year old children to mans in late year who like puzzle and math. The game is going to be for fun as well as for education propose which you can train your brain with math and problem solving. The game will be ported in Silverlight, WP7, Win8 Metro and Android.

Game contains originally designed problems which need to be solved in measured time, with penalty points for failed attempts. The game starts with simple cross number problems and rising its difficulties as you passing levels.

How to enter the number

clip_image004Each game needs input number provided by the player. The numbers are entered by special InputKeyboard showed on the left picture.

Before you input the number you need to select cell by clicking or taping grayed (hidden) cell. Picture left shows selected cell which holds sum of 2 and 6. By clicking on the clip_image005key you enter the correct value. If the value is incorrect the red rectangle will appear.

If you need to enter number greater than 9, you need to use combination of key clip_image006 and certain number.



Type of Games

Currently there are two kind of games (curreently on two variant are implemented in alpha version):

· HDV Sum

· Sum to 11


HDV Sum stands for Horizontal, Vertical and Diagonal summation. This is classic CrossNumber puzzle. The simple problem is depicted below:

Suppose we have 4×4 grid (yellow area), with random numbers in cells. Red bottom and right row/column hold sum of the yellow cell in Horizontal, Vertical and Diagonal (right and left) direction .


If we want to sumthe first yellow column the sum is equal to 7. On the same way we are having sums for the next 2 columns and they are 6 and 8 respectively.

Now we are going to sum in horizontal direction. So, for the first, second and third row we have 4,6 and 13 respectively.

Now remain part is diagonal summation from the top-left to the right-bottom corner and left-bottom to the right-top. The values are 12 and 7.

This type of game will have 3 different grids: 2×2, 3×3 and 4×4 grids.

Sum to 11

The next type game is Sum to 11. This is game which is real ultimate brain puzzle and is not easy as you may think.

The picture below shows the rules for this game. This is math intensive game and represents real challenge for players.


On the upper part there is a 4 of 4by4 grids, which are indexed for constructing the equations bellow. You need to follow equation below in order to solve puzzle successfully. This game will also have some variants probably for summation of 11, 21, 33 and 55.

The game is already in alpha stage of Silverlight and WP7 platform, and it is accessed by very limited number of people. But very soon it will be opened to all who is interesting in game.

WPWidgetLibrary presentation at CodeCamp 11(MkNET User Group)

This year too, MkNET UG (Macedonian User group) is organizing CodeCamp 11. This is one of the most popular UG event on Blakan. Very huge number of attendees and speakers. The CodeCamp is organizing in to 5 tracks: Red, Yellow, Green, Blue and Student tracks.

This year I got the invitiation from the  INETA and MkNET to speak at CodeCamp 11.

WPWidgetLibrary – HTML5 Widgets for WP7 Mango will be presentation which I am goint to present at Yellow track. I can say I am very exciting about this event.

As I have written the WPWidgetLibrary is announced at MobilityDay, and published at codeplex month before. We got very positive feedback from the dev community and the Mk Code Camp will also be a chanse to present our open source solution to the Macedonian .NET community.

More information about Code Camp 11 can be found at, and my speach will be at Yellow track from 11:00 to 12:00.

The more information about sessions and agenda can be found here.

Meet you there!

Customization of WPWidgetLibrary

In only 12 days WPWidgetLibrary reach more that 800 page views and over 50 downloads. This is good start of the library since building HTML5 apps in Windows Phone is coming. We have also got several feedbacks and questions about the library, and we can say the WPWidgetLibrary is indeed solution for developing hybrid mobile applications for Windows Phone 7.
One of the question about WPWIdgetLibrary is how to customise some features. For example default library no support avi file format. For that reason we have opened Discussion section of the library and put some answers. Here is one of them Damir has posted:
WpWidgetLibrary installs HTML app by calling:

InstalHTMLContent(string htmlFolder, string[] htmlDirs) ;

where htmlFolder is the folder in solution which contains all required web files. In other words this is the root of web-application which will be executed from isolated storage. Because you are free to use any kind of extension like “myfile.tiff” the framework can either copy any file in your project or specific files. We decided to copy specific files only.
Here is how we do it:

protected virtual bool IsWebExtension(string ext)       {
bool res = false;
switch (ext.ToLower())
 case "htm":
 case "html":
 case "js":
 case "jpg":
 case "jpeg":
 case "png":
 case "css":
 res = true;
return res;

If your HTML mobile app requires other file formats eg. “abc.avi”, just derive the WPWIdgetLibrary class and override this method like the following sample.

public class MyWPWidgetLibrary: WPWidgetLibrary{
protected override bool IsWebExtension(string ext){
bool res = false;
 switch (ext.ToLower())
 case "avi":
 return true;
 return base.IsWebExtension(ext);

Now WPWidgetLibrary supports custom avi files.
On similar way you can implement support of any file format you want.

In only 12 days WPWidgetLibrary reach more that 800 page views and over 50 downloads. This is good start of the library since building HTML5 apps in Windows Phone is coming. We have also got several feedbacks and questions about the library, and we can say the WPWidgetLibrary is indeed solution for developing hybrid mobile applications for Windows Phone 7.

One of the question about WPWIdgetLibrary is how to customise some features. For example default library no support avi file format. For that reason we have opened  Discussion section of the library and put some answers. Here is one of them Damir has posted:

WpWidgetLibrary installs HTML app by calling:

 InstalHTMLContent(string htmlFolder, string[] htmlDirs) ;

where htmlFolder is the folder in solution which contains all required web files. In other words this is the root of web-application which will be executed from isolated storage. Because you are free to use any kind of extension like “myfile.tiff” the framework can either copy any file in your project or specific files. We decided to copy specific files only.

Here is how we do it:

protected virtual bool IsWebExtension(string ext)       {
bool res = false;
switch (ext.ToLower())
 case "htm":
 case "html":
 case "js":
 case "jpg":
 case "jpeg":
 case "png":
 case "css":
 res = true;
return res;

If your HTML mobile app requires other file formats eg. “abc.avi”, just derive the WPWIdgetLibrary class and override this method like the following sample.

public class MyWPWidgetLibrary: WPWidgetLibrary{
protected override bool IsWebExtension(string ext){
bool res = false;
switch (ext.ToLower())
 case "avi":
 return true;
return base.IsWebExtension(ext);

Now WPWidgetLibrary supports custom avi files.

On similar way you can implement support of any file format you want.

Announcing WpWidgetLibrary – HTML Widgets for Windows Phone

WpWidgetLibrary - HTML Widgets for Windows Phone

-Do you want to implement apps for cross-browser support?
-Do you want to have HTML5 Widget App which can be published through Windows Phone Marketplace, with ability to be updatable?
-Do you want to develop hybrid app in Windwos Phone 7?

Is so and if you are Windows Phone developer this is the right project for you.

Daenet team is proud to announce the first version of the WpWidgetLibrary – HTML Widget for Windows Phone – library for building HTML5 apps on Windows Phone mango.  The latest update for WP 7 enables the usage of HTML5 content via the Marketplace. These Applications always need to be hosted on a webserver so they are not useable offline. Even for Microsoft itself this issue was a problem without solution. With this library you can build HTML 5 Widgets app as a native WP7 app, which you can publish on the windows phone  marketplace and  easily make update for the app. Widgets for WP also tries to solve problems of running HTML page in offline mode on  Windows Phone. Library works so that on the first time installs the HTML5 content in isolated storage by simulating the real hard disk, and paths of the HTML pages, scripts, images etc.

With Widget library you can build cross –platform jQueryMobile HTML5 apps for Windows Phone, and other kind of HTML mobile apps.

More info about this open source project can be found on codeplex site

Inspiration about this library and problems handling HTML5 apps in WP7 you can read on Damir’s blog series HTML5 for Windows Phone 7.1+ – Episode I : HTML5 Support and HTML5 for Windows Phone 7.1+ – Episode II : Browsing HTML content.

Feel free to contact us for any problems you may have, or send us feedback about the library.

Pregled razvojne platforme za Windows Phone 7 II DIO

Članak objavljen na, Aprila 2011.

U prethodnom dijelu vidjeli smo da se Aplikacijski framework za Windows Phone 7 sastoji iz dva dijela, a jedan od njih je razvoj Silverlight aplikacija. Silverlight za Widnows Phone 7 baziran je na Silverlightu 3, što znači da Silverlight za Windows Phone 7 i Silverlight 3 imaju isti skup baznih klasa odnosno dijele isti BCL. Izmjene koje su urađene da se Silverlight 3 integrira na Widows Phone 7 sastojao se u modifikaciji određenih dijelova čisto da se postignu bolje performanse sistema, bolja integracija sa hradwerskim komponentima, kao i integracija sa operativnim sistemom. Pored ovog bilo je potrebno da se uskladi i skup posebnih API-a, specifičnih samo za telefone kao što su GPRS, GPS, razni akceleratori, flesh i slično.
Gledajući Silverlight 3 i novosti koje su stigle s njim, možemo kazati da je tehonlogija Out-of-browser najznačajnije proširenje. Tehnologija out-of-browser predstavlja mogućnost pokretanja Silverlight aplikacije i izvan web browsera. Ova tehnologija dosta je zainteresirala korisnike, jer pruža mogućnost da se jednom implementacijom omoguće dva načina korištenja aplikacije. Upravo out-of-browser je način na koji se Silverlight aplikacije izvršavaju na Windows Phone 7, te ne postoji Silverlight in-browser modul u Windows Phone 7.

METRO dizajn

Da bi razvijali aplikacije u Silverlightu na Windows Phone 7, nije potrebno posebno znanje osim što je već potrebno pri razvoju običnih Silverlight 3 aplikacija. Međutim, sa Windwos Phone 7 dolazi novi dizajn korisničkog interfacea popularno nazvanog METRO. METRO je skup dizajnerskih normi prilagođenih razvoju korisničkih iskustava na Windows Phone 7 platformi. Inspiracija za naziv METRO nađena je u znakovima koji se nalaze po metroima velikih gradskih četvrti. Znakovi koji se većinom predstavljaju nekom jednostavnom grafikom postavljenom u krug, sa često monohromatskim bojama savršeno se uklapa u novi Windows Phone 7.
Skup kontrola koje se koriste u razvoju Windows Phone 7 aplikacija sa Silverlightom 3, ipak se razlikuju od standardnog skupa kontrola klasičnog Silverlight 3. Neke od kontrola jednostavno ne pristaju ovom operativnom sistemu, poput ScrollBar kontrole koja ima drugčiji smisao na ovoj platformi. Pored navedene kontrole skup kontrola koje nisu podržane u Windows Phone 7 su: Open i Save dijalog, Label kontrola,Kalendar, DataGrid, DatePicker GridSPlitter , Tab i ComboBox kontrola. Obzirom da Windows Phone 7 ne podržava Page i Frame kontrolu, ovaj mobilni operativni sistem uvodi specifične verzije tih kontrola i naziva ih PhoneApplicationFrame te PhoneApplicationPage kontrole. Za svaku kontrolu koja nije podržana sa Windows Phone 7 postoje i praktični razlozi, prvenstveno zbog mobilne platforme, ili se uvode zamjenske kontrole.

Novi koncept korisničkih iskustava Pivot i Pano

METRO uvodi dva nova koncepta korisničkih iskustava i to koncept panoa i pivota. Nova korisnička iskustva daju ovom operativnom sistemu originalan dizajn i jedinstveno korisničko iskustvo. METRO dizajn predviđa da aplikaciju ne treba ograničavati na širinu i dužinu ekrana telefona, nego da se prikazuje u orginalnoj veličini koja je skoro uvijek veća od dimenzija telefona. To znači da se cijeli sadržaj prikaže u memoriji telefona, a dok se dio prikazuje shodno hardwarskim dimenzijama telefona. Pomjerajući kursor lijevo ili desno otkriva se ostatak pregleda.Pivot i pano korisnička iskustva imaju dosta sličnosti i predstavljaju najbolji izbor pri razvoiju aplikacija na Windows Phone7. Oba korisnička iskustva cijepaju podatke u misaone, fizičke i logičke cjeline te ih prikazuju pojedinačno. Na ovakav način moguće je prikazati veću količinu podataka nego uobičajeno, a koja je istovremeno podjeljena na cjeline nad kojim se mogu vršiti interakcije od strane korisnika. Oba korisnička iskustva imaju standardne gesture lijevo, desno, natrag i sl, te su po prirodi ciklični, što znači kada se dođe do kraja s lijeve ili desne strane sadržaj se započinje prikazivati od početka.

Suštinska razlika izmeđi pivota i panela je da je pivot više namijenjen prikazu tabelarnih podataka grupisanih u cjeline kojih maximalno može biti do 7. Pivot korisničko iskustvo može predstavljati aplikacijski ili podatkovni upravljač za prikaz sličnih podataka u pivotu. Primjer pivot korisničkog iskustva može biti prikaz meteroloških podataka o određenoj lokaciji na više načina, sličan prikazu na slici 2. Pivot kontrola u ovom slučaju na različite načine prikazuje podatke o vremenu za određenu lokaciju.Isto tako, pivot može prikazivati u različitim cjelinama različite podatke što sve zavisi od namjene u kojoj upotrebljamo ovu kontrolu.

Panorama predstavlja horizontalni prikaz podataka, raspoređenih u cjeline. Cjeline predstavljaju skupove kontrola s kojim se vrši interakcija s korisnikom. Panorama je većinom ograničena do 4 cjeline, i kod kojih se ne zahtjeva implementacija aplikacijskog bara sa dodatnim opcijama. Panoramom se prikazuju određene radnje koje korisnik može uraditi u jednoj aplikaciji.
Ukoliko bi sumirali prednosti i mane oba korisnička iskustva imali bi sljedeću situaciju. Pivot je više efektivan i štedi memoriju u odnosu na panoramu koja je memorijski zahtjevnija. Ukoliko korisničko iskustvo treba aplikacijski bar sa dodatnim opcijama, tada se preporuča korištenje pivota. U release verziji Developer Tools za Windows Phone ovi koncepti dolaze kao kontrole i moguće ih je koristiti u razvoju aplikacija.

Novi koncept navigacije

Silverlight 3 i Silverlight za Windows Phone 7 definišu novi koncept navigacije u odnosu na prethodne verzije. Naime, u klasičnom modelu Back dugme svojom aktivacijom resetuje cijeli sadržaj stranice, što u Silverlight 3 to nije slučaj. Silverlight 3 uvodi pojam navigacijske aplikacije u kojoj se umjesto kontrole za prikaz sadržaja implementira kontrola Frame, u koji je moguće postaviti stranicu(Page), a Back dugme izmjenjuje prikaz različitih stranica i pritom ne resetuje podatke. Na ovaj način hardwaresko dugme koje mora sadržavati svaki uređaj sa Windows Phone 7 OS sada ima smisla i potpuno se uklapa u koncept Silverlight Navigacijskog tip aplikacija.
Pri razvoju Windows Pone 7 Silverlght aplikacija na raspolaganju su nam kontrole koje imaju vrlo istančan izgleda i prilagođen Windows Phone 7, odnosno dizajnirane su po METRO dizajn standardu. Kontrole predstavljaju originalne Silverlight 3 kontrole koje imaju stil definisan po METRO normama.

Visual Studio, Expression Blend razvojni alati za Windows Phone 7

Kao što smo prethodno naglasili , razvijati Windows Phone 7 aplikacije možemo dodatnim alatom koji se integrira u Visual Studio okruženje. Pri formiranju Silverlight Windows Phone 7 aplikacija kroz Visual Studio 2010 na raspolaganju su nam 5 šablona i to: Windows Phone Application, Windows Pone List Appliction i Windows Phone Class Library, te dva nova šablona koja su se pojavila te u release verziji alata i to: Windows Phone Panorama Application i Windows Phone Pivot Application . Prva dva šablona koristimo za razvoj Silverlight aplikacija, dok treći šablon koristimo za razvoj komponenti koje se mogu iskorištavati u više od jedne Silverlight Window Phone 7 aplikacije. Zadnja dva šablona koristimo pri razvoju aplikacija koje koriste nove koncepte panoa i pivot korisničkih iskustava.
Svaki početni projekat za Windows Phone 7 aplikacije sadrži dodatne dvije reference u odnosu na klasični projekat i to: Microsoft.Phone, te Microsoft.Phone.Interop. Kako Silverlight Windows Phone 7 aplikacije ne podržavaju In-browser modul, to je i izostavljena referenca na System.Windows.Browser, preko koje je upravo omogućen ovaj modul.
Dvije su osnovne datoteke svakog početnog projekta generiranih VS2010 dizajnerom i to: App.xaml datoteka aplikacije u kojoj su deklarisani osnovni događaji aplikacije te podijeljeni resursi, stilovi, šabloni podataka i sl., te MainPage.xaml- datoteka predstavlja implementaciju osnovnog prozora aplikacije odnosno osnovna stranica aplikacije sa jednim okvirom, preko koje se dodaju dodatne stranice po potrebi, odnosno različiti pogledi (Views) podataka koji se korisniku aplikacijom želi prikazati.

Pored osnovnih xaml datoteka pri formiranju novog Windows Phone 7 Silverlight projekata nalaze se još i nekoliko početnih grafičkih biblioteka.
Novi Silverlight za Windows Phone 7 projekat možemo fomirati i iz Exprssion Blend 4 za Windows Phone, dodatak koji dolazi u paketu razvojnog alata. Na gotovo identičan način možemo formirati novi projekat. Kolaboracija između developera i dizajnera i na Windows Phone 7 je također obezbjeđena, te predstavlja nastavak Microsoftove koncepcije razvoja aplikacija sa bogatim korisničkim iskustvima.

Silverlight Demo za Windows Phone 7

Na kraju ovog članka pokazaćemo jednostavnu demo aplikaciju preko koje je moguće pregledavati Twitter račune, jednostavnog naziva TwitterAccounBrowser. U tu svrhu otvorimo VS2010 i formirajmo novu Windows Phone 7 Silverlight aplikaciju, izabirući Windows Phone Application šablon.
Na samom početku potrebno implementirati GUI aplikacije koji se sastoji od: TextBox, Button te ListBox kontrole koja će sadržavati listu statusnih poruka. Raspored kontrola naslova aplikacije prikazana je na narednoj slici. U prostor aplikacije odvucite TextBox, Button kontrolu, te ListBox kontrolu ispod. Krajnji raspored kontrola trebao bi biti sličan kao na narednoj slici.

Nakon definisanja rasporeda slijedi implementacija logike aplikacije. Da bi mogli izlistati statusne poruke određenog korisnika, potrebno je definisati posebnu klasu odnosno tip podataka koja implementira jedan Tweet ili statusnu poruku, odnosno klasu koja u sebi sadrži članove naziva, teksta te datuma objavljivanja teksta odnosno detalja.
Na narednom listingu prikazana je implementacija klase Tweet:

//Klasa za generiranje statusnih poruka twittera
public class Tweet
    public string NazivRacuna { get; set; }
    public string Poruka { get; set; }
    public string Avatar { get; set; }
    public string DetaljiPoruke { get; set; }

Kada smo definisali klasu Tweet, sada je potrebno implementirati događaj za izlistavanje poruka. Dva puta brzo kliknite na dugme prikaži, VS vas prebacuje u code-behind datoteku. Korištenje Twitter servisa je vrlo jednostavno i više informacija možete dobiti na oficijelnoj stranici twittera. Naredni listing prikazuje implementaciju događaja prikaži.

private void button1_Click(object sender, RoutedEventArgs e)
    WebClient twitter = new WebClient();
    twitter.DownloadStringCompleted +=new
        new Uri("" + textBox1.Text));

Implementacija događaja sastoji se od formiranja objekta web klijenta, te prosljedjivanje upit preko web klijenta Twitter servisu. Obzirom da web servis pozivamo asihrono, potrebno se pretplatiti na događaj DownladStringCompleated da bi preuzeli sadržaj koji nam je servis vratio. U tom smislu implementacija se sastoji u tome da se preko LINQ to XML izvuku detalji koji su nam potrebni. Sljedeći listing predstavlja implementaciju popunjavanja liste sa porukama korisnika.

void  twitter_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
        XElement element = XElement.Parse(e.Result);
        listBox1.ItemsSource = element.Descendants("status").
                                new Tweet
                                    NazivRacuna = x.Element("user").Element("screen_name").Value,
                                    Poruka = x.Element("text").Value,
                                    Avatar = x.Element("user").Element("profile_image_url").Value,
                                    DetaljiPoruke = DateFormat(x.Element("source").Value, x.Element("created_at").Value)
        PageTitle.Text = textBox1.Text;
    catch (Exception ex)
private string DateFormat(string source,string val)
    string format = "ddd MMM dd HH:mm:ss zzzz yyyy";
    DateTime dt = DateTime.ParseExact(val, format, CultureInfo.InvariantCulture);
    return dt.ToString("hh:mm d MMM") + " via " + Regex.Replace(HttpUtility.HtmlDecode(source), @"]*>", "");

Ovdje smo kao posebnu metodu izbacili formatiranje detalja poslane poruke, tako da nam listing izgleda kao na klasičnim twitter klijentima. Kako koristiti LINQ to SQL i šablone podataka kao i općenito WPF možete pogledato useriji blog postova o WPF i LINQ to SQL na Na kraju ovog jednostavnog dema potrebno je još implementirati šablon podataka listBox kontrole.
Implementacija šablona podataka list box kontrole dat je na sljedećem listingu:

<ListBox Height="518" 
         VerticalAlignment="Top" Width="444" >
        <StackPanel Orientation="Horizontal">
            <Image Source="{Binding Avatar}" 
                   Height="73" Width="73" 
                   VerticalAlignment="Top" Margin="0,10,8,0"/>
            <StackPanel Width="370">
                <TextBlock Text="{Binding NazivRacuna}" 
                           Foreground="#FF2276BB" FontSize="28" />
                <TextBlock Text="{Binding Poruka}" 
                           TextWrapping="Wrap" FontSize="24" />
                <HyperlinkButton Content="{Binding DetaljiPoruke}" 
                                 Height="30" HorizontalAlignment="Left" 
                                 VerticalAlignment="Top" FontSize="18" 
                                 Foreground="#FF999999" />

Kada smo sve prethodno implementirali pokrenimo aplikaciju pritiskom na tipku F5, i dobijamo na ekranu windows Phone 7 emulator. U text box kontrolu ukucajmo račun of twittera, te kliknimo na dugme Pretraži. Nakon nekoliko trenutaka pojavljuju se poruke dotičnog korisnika. Naredna slika pokazuje naš demo u akciji.

Šablon podataka list box kontrole mogli smo i dizajnirati preko Expression Blend 4 for Windows Phone aplikacije, te sa pravim dizajnerskim alatom dizajnirati našu aplikaciju, te na taj način osjetiti svu žar u dizajniranju i implementaciji Windows Phone 7 aplikacija.
Izvorni kod za ovaj članak možete skinuti ovdje.


Windows Phone 7 izlazi u periodu kada su iPhone i Android na vrhuncu i usponu. Moglo bi se reći u nezgodno vrijeme, međutim novi mobilni OS ima što ponuditi i zasigurno će zauzeti svoje mjesto na tržištu, te vrlo brzo postati konkurencija i mobilni operativni sistem koji obećava. Izlaskom prve verzije Windows Phone 7 neće imati multitasking, i to će mu biti najveći nedostatak, unatoč drugim prednostima koje ima u odnosu na pomenutu konkurenciju. Ono što Windows Phone 7 stavlja u vodeće mobilne OS-ove, je zasigurno vrlo kvalitetan razvojni alat koji smo pokušali predstaviti u ovoj seriji članaka. Visual Studio 2010 kao primarni razvojni Microsoftov proizvod, predstavlja danas najsofisticiraniji i najpopularniji developerski alat, koji će ovim potezom biti obogaćen novom platformom. Razvijati aplikacije za Windows Phone 7 preko Visual Studia 2010 i Expression Blend 4 znači imati u rukama pravi alat, s kojim je moguće razvijati visokokvalitetna grafička rješenja, sa visokim performansama kako video igara tako i cijeli spektar aplikacija u Silverlightu, od korištenja Cloud servisa do bussiness aplikacija. Windows Phone kao ni jedan mobilni operativni sistem do sada pruža bezbroj mogućnosti, potpuno novi koncept upravljanja i rada sa mobilnim aplikacijama, te inovativna korisniča iskustva. Sa pivot i panel novim konceptom komunikacije korisnika i uređaja otvara se novi spektar razvoja aplikacija, te prikaza podataka. Silverlight tehnologija koja je tehnologija broj 1 korištena u Windows Phone 7 predstavlja još jedan korak naprijed ka unifikaciji i objedinjavanju razvoja aplikacija za različite platforme.

Pregled razvojne platforme za Windows Phone 7- I dio

Članak objavljen na Januara 2011. god.

sl1Već smo najavili izlazak Windows Phone 7 novog microsoftovog operativnog sistema za mobilne telefone, koji bi, kako se priča, u oktobru ove godine trebao biti objavljen. Prije svega, Windows Phone 7 se drastično razlikuje od svog prethodnika Windows Mobile 6.5, kako po tehnologiji tako i platformi. Mjenjajući platformu te prelazak na Silverlight i DirectX (XNA), Microsoft nastavlja popularizaciju svoje uspješne strategije koju je počeo razvijati zadnjih nekoliko godina, te svakako želi sto više dati primat deklarativnom načinu razvoja grafičkih iskustava preko svoje XAML tehologije sa tradicionalno dobrim razvojnim alatima Visual Studio 2010 i Expression Blend 4. S druge strane, Microsoft ima za cilj da tehnologiju na kojoj se razvijaju aplikacije unificira i smanji vrijeme učenja i adaptaciju programera, što je definitivno ostvario zadnjim izlascima Visual Studio 2010 i Expression Bland 4, odnosno pojavom WPF, Silverlight te nadolazećeg Windows Phone 7. Danas razvijati aplikacije za Windows Phone 7 nije ništa drugo do razvijati aplikacije u Silverlightu, što za jednu novu platformu poput WP7 je zaista fenomen. Developeri koji su već razvijali aplikacije za Silverlight nemoraju savladavati novu logiku ni arhitekturu, niti učiti nove dizajnerske komponente u Visual Studiu i Expression Blendu, dovoljno je da se upoznaju sa Windows Phone 7 i uputama za razvoj korisničkih iskustava i odmah mogu početi razvoj aplikacija. Zvuči naivno ali i istinito.

Hardwarsko i Softwarska arhitekture Windows Phone 7 uređaja

Prije samog pregleda razvojne platforme pogledajmo, koje hardwerske komponente će vrtiti Windows Phone 7. Svaki ekran telefona imaće 480×800 QVGA ili 320×480 HVGA rezoluciju, sa multitouchom većem od 4 kontaktne tačke. Senzori koji će biti ugrađeni imaće A-GPS, Accelometar, Kompas te flash. Kamera će imati najmanje 5 megapiksela, te tačno 3 hardwarska dugmeta Start, Search i Back. Grafika mora posjedovati DirectX 9 akcelerator, te 256 RAM-a i najmanje 8GB flash memorije. Jedna od najzanimljivijih stvari svakog mobilnog telefona sa Windsows Phone 7 je to da procesor mora biti najmanje ARMv7 Cordex/Scorpion sa 1Gz takta. Zaista se može štošta vrtiti na ovakvoj impresivnoj mašini. Samo 10-tak godina ranije ovakva desktop mašina prestavljala je pravu zvijek na tržištu.


Kada govorimo o softverskoj arhitekturi Windows Phone 7 uređaja onda prvenstveno moramo govoriti o nekoliko slojeva koji tu athitekturu čine. Gledajući odozdo prema gore vidimo da arhitekturu čine podrška za hardver u obliku raznih drivera, servisa, podrška za mreže, sigurnost, a koje zajedničkim imenom zovemo Kernel. Iznad tog sloja dolazi: Aplikacijski i UI Model, te Cloud integracija. Aplikacijski model obezbjeđuje načine instalacije, pokretanja, te sistem licenciranja i nadogradnje softvera. Dok UI model čini sistem upravljanja sesijama aplikacije, te navigacije među stranicama, preko navigaciskog sistema implementiranog u operativni sistem. Treći i nemanje važan model predstavlja Cloud integracija, kojim se obezbjeđuje povezivanje na razne microsoftove servise: Live, XboxLive i druge, te povezivanje na servise društvenih mreža, lokacijske GPS servise i sl.

Iznad svih navedenih modela nalazi se Aplikacijski runtime zasnovan na mogućnosti iskorištavanja svih resursa, servisa i modela uređaja, a razvijen je na .NET – CLR tehnologiji i posjeduje aplikacijski framework za razvoj kastomiziranih aplikacija.


Aplikacijaki framework za WP7 može razvijati dvije vrste aplikacija i to:

  1. XNA applikacije – predstavljaju moderne 2D i 3D video igre koje se mogu vrtiti i na Xbox 360, Windows 7 i Zune uređajima.
  2. Silverlight aplikacije – predstavljaju XAML aplikacije bazirane na Silverlight 3 tehnlogiji.

WP7 XNA Aplikacije


Današnje tršište video igrama zauzima značajno mjesto u ukupnom IT tržištu te stoga je vrlo važno omogućiti razvoj ovih vrsta aplikacija na nadolazećoj platformi. Upravo it tog razloga Microsoft proširuje svoj XNA razvojni framework i na Windows Phone 7. XNA predstavlja enkapsulaciju tehnoloških detalja niskog nivoa u razvoju video igara i koncentrira developera na to kako video igru učinite zabavnijom od toga na koji način implementirati pojedine detalje. Ovim je Microsoft udario temelje unifikaciji razvoja video igara na svojim platformama Xbox 360, Windows i Windows Phone 7.

XNA Framework je dio .NET Frameworka, a čine ga skup alata i biblioteka za brzi razvoj video igara na Windows, Xbox 360 i WP7 platformi. Integrirana razvoijna platforma za XNA objedinjena je kao XNA Game Studio do sada razvijena sa 3 verzije. Naredni XNA Game Studio 4.0 podržavaće razvoj video igara i na WP7 platformi, sadržavaće pojednostavljeni grafički API, nove konfiguracijske efekte, te poboljšani audio efekti. Međutim, još uvijek nema podrške za ostale .NET programske jezike osim C#, što jedin dijlom ograničava ovu platformu. Kako nova verzija Game Studio 4.0 dolazi integrirana u Visual Studio 2010, tako će se i kompletan razvoj video igara moći razvijati na ovom moćnom developerskom alatu.

Osnovni koncepti razvoja XNA video igre


U cilju pojednostavljenja API-a, te integracije sa Visual Studio 2010, razvoj video igara za ove 3 platforme pojednostavljen je i definisan specifičnim fazama razvoja. Početak razvoja XNA video igre sa Game Studio započinje definisanjem početnog projekta koji je šabloniziran već viđenim Visual Studio šablonima.

U ovoj fazi na raspolaganju nam je 8 predefinisanih šablona s kojim dobijamo početne postavke za razvoj. Pored dosadašnjih šablona za Xbox 360, naredna verzija XNA Game Studio 4.0 sadržavaće i šablone za Windows Phone 7 i to Windows Phone Game i Windows Phone Game Library. Drugi šablon predstavlja projekat koji može dijeliti komponente sa više Windows Phone Game projekata.

U koliko smo odabrali prvi šablon dizajner visual studia formira C# klasu izvedenu iz Game klase, implementirane u XNA biblioteci, što predstavlja prvi korak u implementaciji XNA video igre. Osim implementacije izvedene klase, dizajner je formirao dva projekta unutar Visual Studia. Prvi projekat sadrži Windows Phone 7 implementaciju video igre, dok drugi projekat posjeduje dijeljene resurse (datoteke) koji se koriste u razvoju igre, a mogu se iskorištavati i na drugim platformama: Xbox 360, Windows 7 i Zune.

U drugoj fazi razvoja igre definiše se i pridružuje sadržaj za buduću video igru. Ova faza sastoji se u dodavanju grafičkih, audio i video datoteka. Resursi (datoteke) se dodaju na standardan način, onako kako se to radi u Visual Studiu 2010. Kao što je rečeno, dodavanje sadržaja radi se u posebnom projektu, da bi mogli iste datoteke dijeliti sa druigm platformama, osim Windows Phone 7.

Treća faza razvoja je logička implementacija, koja je je podjeljena u nekoliko globalnih metode preko kojih se implementira cjelokupni proces video igre. Stoga je važno kazati da svaka video igra razvijana sa Game Studio prolazi faze Inicijalizacije, Učitavanja resursa i sadržaja igre preko metode LoadContent.


Kada se u memoriju učitaju resursi i sadržaj igre preko metoda za iscrtavanje Draw i osvježavanje Update implementirana je dinamika igre. Nakon završetka resursi se oslobađaju iz memorije i završava rad.

XNA Demo za Windows Phone 7

Na vrlo jednostavnom demo primjeru pokazaćemo, kako se implementiraju osnovne komponente XNA video igre. Za ovaj demo potrebno je posjedovati Visual Studio 2010, te Windows Phone 7 Developer Tool Beta, koji se može skinuti sa ovog linka.


Nakon što pokrenimo Visual Studio 2010, te formiramo novi Windows Phone Game 4.0 Projekat kojeg ćemo nazvati XNASimpleDemo, dizajner nam formira dva solucijska projekta i to: projekat video igre, te Game Content projekat koji sadrži neophone datoteka za video igru, a čine ga razne video, audio, te grafičke datoteke. Ovakva arhitektura obezbjeđuje jednostavan način razvoja iste igre i na drugim platformama Xbox 360 ili Windows 7.

Novoformirani projekat pored ostalog sadrži implementaciju klase Game1 izvedenu iz Microsoft.Xna.Framework.Game. U klasi Game1, dizajner je već formirao nekoliko pomoćni varijabli poput GraphicsDeviceManager varijabla koja upravlja hardwerskim uređajem, te SpriteBatch –pomoćna varijabla za iscrtavanje tekstura direktno na ekran.

Pored postojeći deklarišimo varijablu tipa Texture2D – varijabla koja će sadržavati bitmapu, te varijablu tipa Vector2- vektor s kojim će biti definisan položaj bitmape na ekranu. Nakon što smo deklarisali varijable za upravljanje grafičkom datotekom, sada je potrebno istu učitati u projekat. Desnim klikom na XNASimpleDemoContent izaberimo opciju Add Existing Item, te učitajmo u projekat grafičku datoteku koju želimo prikazati. Kada je datoteka učitana u projekat, potrebno je implementirati metodu LoadContent na način da prvo učitamo datoteku i onda je pozicioniramo u centar ekrana našeg telefona. Iz implemetacije se vidi da se datoteke učitavaju po njihovim asset imenima, upravo zbog portabilnosti sa drugim platformama. Sljedeći listing prikazuje učitavanje datoteke i pozicioniranje na ekranu.

protected override void LoadContent()


// Create a new SpriteBatch, which can be used to draw textures.

spriteBatch = new SpriteBatch(GraphicsDevice);

imageTexture = Content.Load("logo");

Viewport viewport = graphics.GraphicsDevice.Viewport;

imageVector = new Vector2((viewport.Width-imageTexture.Width)/2,



Nakon definisanja početne pozicije teksture, sada je moguće implementirati logikuvideo igre sa Update i Draw metodama. Implementacija Update metode sastoji se u tome da ažurira poziciju teksture očitavajući tekuću poziciju prsta ili kusora telefona što je prikazano u narednom listingu.

protected override void Update(GameTime gameTime)


// Allows the game to exit

if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)


TouchCollection touchCollection = TouchPanel.GetState();

if (touchCollection.Count > 0)


TouchLocation tl = touchCollection[0];

double x = tl.Position.X - (imageVector.X + (imageTexture.Width / 2));

double y = tl.Position.Y - (imageVector.Y + (imageTexture.Height / 2));

double speed = Math.Sqrt(x*x+y*y)/10;

double angle = (float)Math.Atan2(y,x);

imageVector.X += (float)(speed * Math.Cos(angle));

imageVector.Y += (float)(speed * Math.Sin(angle));




Dok Draw metoda iscrtava teksturu na ekranu telefona definisanu pozicijom, brzinom, i uglom. Na taj način dobijamo fade efekat pri pomjeranju teksture.

protected override void Draw(GameTime gameTime)



spriteBatch.Begin(SpriteSortMode.Immediate, BlendState.AlphaBlend);





Ako pokrenemo aplikaciju, i ako šetamo mišem (u koliko se radi o emulatoru) ili prsto (u koliko se radi o uređaju) po ekranu, vidimo da se naša tektura kreće za njim. Na ovaj način implementirali smo jednostavnu XNA video igru. Izvorni kod za ovaj demo može se skinuti sa ovog linka.


Na internetu se već može vidjeti nekoliko igara koje se vrte na WP7, na kojima možemo osjetiti draž igranja na mobilnom uređaju, koji ipak čini se ne predstavlja ni hardwerom ni ergonomijom idealni igraći uređaj. Međutim, WP7 će zasigurno promijeniti ovaj ustaljeni stav.