Category Archives: WinRT

Refactoring XAML ResourceDictionaries

Code reuse of any kind is a priority for all developers. Design elements and UI resources are no exception.
In this tutorial you will learn how to correctly organize your resources for maximum reuse.

Considering the following scenario:
You have two apps: App1 and App2 int which you want to use the same resource but with slightly different properties.
App1 needs a style for a TextBlock

<Style x:Name="myTextBlockStyle" TargetType="TextBlock" >
    <Setter Property="Foreground" Value="Green"/>
    <Setter Property="FontSize" Value="24"/>
</Style>

while App2 needs a very similar style

<Style x:Name="myTextBlockStyle" TargetType="TextBlock" >
    <Setter Property="Foreground" Value="Orange"/>
    <Setter Property="FontSize" Value="24"/>
</Style>

Notice that the only different thing about the two styles is the color used as Foreground, the rest is similar. For the sake of simplicity I kept the myTextBlockStyle quite small, with only two properties.

For maximizing our code reuse we can try to refactor the two styles into a separate style as follows:

<Style x:Name="commonTextBlockStyle" TargetType="TextBlock" >
    <Setter Property="Foreground" Value="Green/Orange"/>
    <Setter Property="FontSize" Value="24"/>
</Style>

Now, the magical part!

If you use a common ClassLibrary you can move the style into a dictionary which both apps reference.

The style definition becomes:

<Style x:Name="commonTextBlockStyle" TargetType="TextBlock" >
    <Setter Property="Foreground" Value="{StaticResource brush1}"/>
    <Setter Property="FontSize" Value="24"/>
</Style>

Notice how the Foreground value is not longer set to either Green or Orange, but it references another resource named brush1.

In order for the whole setup to work this resource has to be defined in the ClassLibrary as follows:

<SolidColorBrush x:Key="brush1" Color="Red" />

And overriden in App1:

<SolidColorBrush x:Key="brush1" Color="Green" />

and in App2:

<SolidColorBrush x:Key="brush1" Color="Orange" />

At runtime, each app will have to reference the dictionary file where commonTextBlockStyle using an absolute path

The dictionary file that defines commonTextBlockStyle will in turn have to reference another dictionary path that contains the definition of brush1 using a relative path.

The following diagrams illustrate the setup in greater detail:

Project structure

ClassLibrary1 structure

StandardStyles in the ClassLibrary referenes a Common style referenced in the same project

App1 at runtime

App1 references StandardStyles and overrides Common with the desired color Green

App2 at runtime

App2 references StandardStyles and overrides Common with the desired color Orange.

This project structure and reference mechanism should greatly reduce your dictionary size while giving you all the flexibility you need for using your styles in whatever way you need.

Quiz for Geeks in now available in Windows Store!

Quiz for Geeks passed certification and is now available in Windows Store.

Before you try it, here is the game trailer:

Download it from here: http://apps.microsoft.com/windows/en-us/app/quiz-for-geeks/4b3becb8-97c6-40ef-b922-019e6a55c18d

Don’t forget to follow our Facebook page: https://www.facebook.com/QuizForGeeks

Let me know what you think. Good ratings are encouraged 🙂

 

 

Coming soon to Windows Store: Quiz for Geeks

  • Who played ‘Rachel Green’ in the TV Show Friends?
  • 19+16=…
  • What is the decimal value of the roman numeral LXIII?
  • What is the local currency in Laos called?
  • What is the name of the element “Cl”?

Can you answer any of these questions in 10 seconds or less? If the answers is YES then Quiz for Geeks is the game for you!

Quiz for Geeks is a fast paced game that tests your knowledge on a variety of topics from geography and history to mathematics and literature as well as entertainment and current events.

Thousands of dynamic questions structured in 5 levels of difficulty will challenge you as you progress in the game.

Quiz for Geeks

The game is days away from being launched, stick around and like our Facebook page, we’ll let you know when it reaches Windows Store.

How much code can you really place in your Portable Library?

Recently, Jevgeni asked me how much code I was able to share between my projects by using a Portable Library. He is contemplating building a Windows Phone and a Windows Store app and wants to create a Portable Library for sharing common code.

So I decided to get some numbers based on my new app code which is going to (hopefully) reach Windows Store soon.

Code Sharing between a Portable Library and a Windows Store app

Code sharing between a Portable Library and a Windows Store app

The app is not 100% ready yet, so I might add few lines of code but at the moment it turns out I placed more than 70% of my code in a Portable Library.

However, I invested quite a lot into having such a structure as I plan to release a Windows Phone app around the same core.

While you are waiting for my new app to be released :), go ahead and try my other apps already in the Windows Store: Puzzle Frenzy (download link) and Puzzle Frenzy Kids (download link).

Ask for User Rating: The Story of How I Doubled My Daily App Downloads

I currently have two apps in the Windows Store: Puzzle Frenzy and Puzzle Frenzy Kids. I’ve been closely monitoring user rating, feedback and request from day one and tried at the same time to tweak and improve the apps.

However, one thing I noticed quite fast was that my app was not getting too many ratings. Even if rating an app is possible in Windows 8 for all apps without extra work (bring up right side bar -> Settings -> Rate and review), my users were simply not doing that. On top of that, I noticed that my competitors’ apps and all the top apps in the same category had hundreds, thousands, even tens of thousands of ratings.

I also realized that the more ratings an app has, the higher it is placed in the Windows Store. It goes without saying that user ratings have a significant contribution to the ranking of the app.

Therefore, I decided to ask for user rating inside the apps, to see if the users will respond and rate my apps more frequently.

However, I found what I think is the sweet spot for getting users to rate the app:

  • I will ask users to rate the app only after they have engaged in (and hopefully enjoyed) the app, that is after they already played 3 puzzle games. By doing so, the users will most likely give it a good rating because they appear to have enjoyed the app enough to stay in the app and play all the 3 games.
  • I offer the user the choice not to rate it and ask again later. I tried not to be too annoying with these requests so I only display it after 3, 7, 15 or 30 games. If even after the fifth prompt the user hasn’t rated the app, I won’t bother him again because he most likely isn’t going to rate the app anyway.
  • I don’t bother the user again once he rated the app, but I still display a “Rate app” button on the home page, in case he changes his mind or wants to update his rating.
Puzzle Frenzy User Rating Prompt

Puzzle Frenzy User Rating Prompt

After introducing these changes, the number of ratings I was getting increased quite a lot.  In around one week I started to get the same number of ratings which before I was getting in one month.

As a consequence, (there were other factors for sure, but the user rating prompt was most likely the most important) the apps got ranked higher and higher, and they started getting more downloads.

On average, now I get around twice as many downloads as I did before.

I highly recommend adding such prompt to anyone developing apps on any platform.

Be ready however, with more ratings and feedback comes more responsibility.

Take user feedback into account and react to it as it will help you improve your app.

Good luck!

Puzzle Frenzy Update 1 is now live in Windows Store!

I’m pleased to announce that Puzzle Frenzy Update 1 has passed certification and is now live and ready for download in Windows Store.

The new update brings a lot of visual and performance improvements like:

  • Game ended popup that displays the rating for the current game
  • Pause game button and Game paused popup windows that shows a preview of the puzzle being solved
  • Pieces animation during sorting and shuffling as well as when the user finishes the game
  • Memory consumption improvements
  • Home page images loading time improvements
  • Piece animation when moving to the next puzzle
  • Image size decreased for screen resolutions matching the image format to leave room for unsolved pieces
  • The ability to go to App’s blog, Facebook page and Rate and review page from withing the app by bringing up the bottom app bar on the home page
  • Several minor bugfixes

As a consequence the app feels and is faster, more responsive, consumes less memory and delights the users with more animations.

Check it out in the Windows Store!

http://apps.microsoft.com/windows/en-GB/app/puzzle-frenzy/28238e98-ac0f-4a6b-81ea-a31a24a15acf

Puzzle Frenzy home page

Puzzle Frenzy home page

Building Jigsaw Puzzle Frenzy: sharing code between WP and WinRT

When I first started working on Puzzle Frenzy I wanted to maintain both the original WP app and also to create a new WinRT app by reusing and sharing as much code as possible.

My plan was based on the presentations at Build which promised  which promised up to 70% code share between  WP and WinRT. In particular check out Create Cross-platform Apps using Portable Class Libraries.

During different stages of the project I tried several approaches for achieving this goal:

Share physical source files between WP and WinRT projects

I initially started building the WinRT app adding new projects to the solution containing the same files as the WP.

The problem

While a low of classes in the WP and WinRT are “identical” in functionality, they are often not in the same  namespace.  On top of that, using the same source files in more then one project is by itself problematic.

Direct consequences:

1.Trying to use the same source files for both WP and WinRT resulted in files like this one:

#if WINDOWS_PHONE
using System.Windows.Media;
#else
using Windows.UI.Xaml.Media;
#endif

Furthermore, for some special cases I was forced to have constructions like this one:

#if WINDOWS_PHONE
//Do something
#else
//Do something else
#endif

2.Having the physical same file referenced by two projects in Visual Studio is a lot of work. Whenever something breaks for one project (90% of the time due to a usings declaration change) the file containing the error has to be opened from the context of the failing project. If the file is opened in the other project the error won’t be highlighted in the code and the solution won’t compile.

For few files, this setup can be maintained even if it is inconvenient. However, as the file count grows, keeping up with the changes is a too complicated task.

Using Portable Libraries

For the appropriate scenarios Portable Libraries are awesome. It eliminates the need for duplicated files altogether as the library can be referenced by both the WP and WinRT. In my case however I wasn’t able to use them because I use Point and Size classes throughout my project. These classes are not available in Portable Libraries. I could have created my own implementation of Point and Size to overcome this limitation, but given the scale of the changes I preferred not to do it: a simple search reveals that I use these classes in more than 100 places in my code.

From what I’ve experienced so far, Portable Libraries offer limited classes to work with. My ViewModels layer which I was planning to keep there needs far to many things which are not available.

Conclusion

Sharing code between WP8 and WinRT can prove to be troublesome.

Both duplicate projects and Portable Libraries have limitations, making it in my case are quite challenging to use.

If sharing the code between the two apps is really your goal, I am fairly confident it can be achieved. However, in my case, for this particular app, attempting to share the code only slowed me down. In the end I kept using duplicated projects but I am not maintaining them at the same time.

I take turns in development cycles implementing features and adjusting the code to work on the other platform. While doing so I introduce bugs in the project not being maintained at the time, but the amount of work needed to fix it is far less than implementing new features at once on both platforms.

Closing argument

If you start developing a new app and want to target WP and WinRT consider using Portable Libraries from the start. It will have some limitations but will also force you to place the code in the right place in order to be shared.

If you already have an WP app and want to migrate it to WinRT you might want to start by maintaining duplicated projects in order to limit the size of the changes needed. Once you reach a stable state you can of course look into  moving towards Portable Libraries if code sharing is your goal.

Have a look and see how it turned out.

Jigsaw Puzzle Frenzy is available in Windows Store, check it out and tell me what you think: http://apps.microsoft.com/windows/en-GB/app/puzzle-frenzy/28238e98-ac0f-4a6b-81ea-a31a24a15acf.

You can also give your feedback on app’s review page or on app’s Facebook page http://www.facebook.com/PuzzleFrenzyApp.

Happy codding!

Puzzle Frenzy home page