Here’s an excerpt:

The concert hall at the Syndey Opera House holds 2,700 people. This blog was viewed about 18,000 times in 2011. If it were a concert at Sydney Opera House, it would take about 7 sold-out performances for that many people to see it.

Click here to see the complete report.

• WP7Contrib: Consider this a colorful compilation of the best components and helper tools around. Some of the tools discussed in this article are also in the WP7Contrib project. Basically this project has compiled the best tools around in one single project (making articles of this kind rapidly redundant) with links to the original blogs that this the tool(s). Enumerating what’s in it is overkill, simple check out all the goodies (UI Controls, patterns, transitions, etc) on their codeplex page: http://wp7contrib.codeplex.com/
• GridHelper: This one was pointed out to me yesterday. This tool, available through Nuget, helps you with placing all your elements on the grid according to the Metro-guidelines (i.e. Margin of 12pt from the screenborder, etc.) . Read Jeff Wilcox’s original post to see what this is all about: http://www.jeff.wilcox.name/2011/10/metrogridhelper/
  
  
• LowProfileImageLoader: David Anson wrote several excellent classes, one of these being an extended Image Control which can be used when the imagesource is an image in ‘tha cloud’. The control will download the image without blocking the UI thread which tends to happen with these things. This control is ideal in other words if you have a large list of images to show on a page. I’ve used this control in my Belgian Cinema app making the startup of the application way more fluent. Make sure you also check out the DeferredLoadListBox control from the same author which improves the scrolling of long lists in your app. All information can be found on the ‘Delay’s Blog’.
• Placeholder images: David Anson recently also released a WPF/SL/WP7 control that easily incorporates placeholder images to be used for those images that might not be available or are slow to download. Like all of mr Anson’s control, this one again can be easily integrated in your existing application by simply changing the your Image-controls to PlaceImage controls with an additional PlaceHolderSource-attribute that points to the local image to be used as placeholder. A combination of the LowProfileImageLoader and this control would be awesome but with some plumbing (all the source code is available) this can be done yourself. More information on this control can be found here.
  
• Your Last About Dialog: An about box is not a real requirement to get approved on the marketplace, but it does help to have one. Implementing an about box is usually done in the last instance right before you are submitting your app for approval. Anxious to get your app on the marketplace, the about box is usually an ugly, empty page with some textboxes thrown on rapidly…at least in my case that is. Peter Kuhn heard our prayers and create a very simple to use, Nuget, about dialog template to be used in all your WP7 apps from hereon. Once you use the “Your Last About Dialog” you will never ever write your own about dialog; believe you me (still think there’s something grammatically wrong with that expression). More information to be discovered on Peter’s blog.
  
  
• Kawagoe Toolkit: Besides having the most funny toolkit name around, this sweet little thing has some interesting things in it. The toolkit consists of 3 handy little classes being: a Message popup with customizable buttons, an imagecache class (+ an inherited PersistentImageChache and SystemImageCache) ideal if your working with lots of image and lastly the toolkit includes a “OneShotDispatcherTimer” with is a DispatcherTimes that promised only to fire once, ever (check out the end of this article by Dan Clarke why such a timer can be handy to have around). More information on this toolkit can be found here)
  
• NotifyPropertyWeaver: Don’t you just love databinding?! I certainly do, though I sometimes get tired of the amount of boilerplate I each time need to write when implementing an INotifyPropertyChanged class. If you’ve only got two or three classes , that’s no big burden. On the other hand, if you have lots of classes, install the NotifyPropertyWeaver (Nuget available) which will simply write all the boring code for you…it’s like having a little monkey doing your work, hooray! Get your monkey here.
  

There we go. A little list of must-have tools. I know there’s lots of other stuff around, but these are the ones I personally use a lot (yeah, I use the Silverlight Toolkit as well, but it felt a bit redundant to mention this one again here). Enjoy!

What follows is an extensive review of this book.

The basic premises of the book is the same as the other Packt ‘Cookbooks’: each chapter consists of several step-by-step tutorials (dubbed “recipes”) , each time resulting in a mini-program with full functionality.

The main application that is rebuilt each time is a simple task manager. Each chapter 3 or more recipes are shown, usually (re)building the main task application. After each chapter and recipe a short explanation and reference to online sources is given .

The book is aimed at developers who have little to no WP7 experience, however a solid Silverlight understanding is a must (for any WP7 developer that is) to get the most from this book. The 8 chapters are logically ordered, each time increasing in complexity :

• Chapter 1 is a basic refresher on how data binding works in a Windows Phone 7 app.
• Chapter 2 describes how the local, isolated storage of the phone can be used to save data (to files) or settings. You can check out this chapter here.
• Chapter 3 explains how XML data (local and remote) can be parsed using both Linq-to-XML or an XmlReader. The final recipe than explains how object (de)serialization to/from XML can be accomplished.

The first 3 chapters explain topics of which an abundant amount of online tutorials exist. They didn’t really add much additional value for people already familiar with the basics of WP7. Though it should be pointed out that even the first recipes always did something ‘cool’ or new in addition to the core topic: most tutorials stop once the basic idea is explained. In chapter 2, for example, an image file is read and subsequently the image is then used as a background image for the app. It’s a small addition, but it lifts this (and other) recipe to a new, more usable, real-world example instead of a basic tutorial.

• Chapter 4 is where the fun stuff starts. Here, the Open Data or OData protocol is shown. The OData api of Netflix is used to show movie information on the phone; followed by a demonstration of CRUD operations with OData (using the OData.org api as example).
• In chapter 5 we meet the new goodie of the Mango phone, being On-device databases. Before Mango things like the Sterling NoSql OODB already existed. However, Mango now also provides out-of-the-box local databases which is, in my opinion, a nifty add-on. In this chapter 3 types of local databases are shown, namely: Sql Lite, Sql CE and McObject’s Perst (never heard of that one before and still not entirely sure why this one was added to the book). Again, this chapter goes further than most tutorials and also shows how to actually create a database using the SQL Management Studio and also import the db in the actual phone project.
• REST services are up in chapter 6. The first recipe shows the classic example of consuming an RSS feed, which basically is a repetition of the XML- chapter 2 with the addition of downloading the XmlString using the WebClient class . After that, the Twitter API is briefly shown and how it can be used to consume any twitter –data you wish. Finally , a simple rest service server is setup using ASP.NET’s WebMatrix , with the results being streamed in the JSON format and visualized on the phone.
• The second to last chapter 7 is titled WCF. The author quickly shows how to setup a WCF service, push some real (task) data to the phone and visualize it. Though these first 2 recipes are again pretty much ‘standard tutorial stuff’, the last one goes a step further and uses an actual SQL Server Express database as the services’ datasource. The ADO.NET Entity Framework (EF) is then used as ORM between the DB and the service (including Linq-to-entities) to provide a real-world example, which was pretty sweet to see.
• The final chapter (8) is the, meager, icing on the cake: in a few recipes the very basics of building an MVVM application is shown. I’m still looking for the ‘ultimate MVVM tutorial for beginners’ and I’m afraid this one isn’t a candidate (truth be told: I haven’t found any candidates so far except for Pete Browns chapter in his Silverlight 4 in Action book). Aside from not being very extensive, the basics are laid out very clearly including how to use Bugnion’s MVVM Light Toolkit. Unfortunately it would’ve been cool if the same ‘finale’ was given as in the previous chapter (i.e. retrieve the results from a WCF+EF service) as this was the final chapter.

Though the book covers a lot of stuff, it only counts a meager 207 pages: compared to Gill Cleeren’s Silverlight 4 Data Services Cookbook, the biggest ‘loss’ of pages is due to the lack of additional information being given. Basically each recipes can be followed but once you want to find out why this or that step actually works the book can’t help anymore. It’s also a shame that only the first few pages of code have the most important parts highlighted in bold fonts. By highlighting this code, it easy to quickly see in a big pile of XAML what the essential part is (even more once the boiler-plate code starts becoming repetitive). For some reason, the author stopped doing that after chapter 1.

To conclude; the concept of independent recipes makes it ideal to pick any chapter (or recipe) and start building stuff, without any dependencies on previous chapters or recipes. The downside however is that this also results in lots of identical steps that need to be taken each recipe. For me, this book is ideal in a classroom environment: students can be given a weekly recipe to solve and expand without the need of having made previous recipes.

If the idea of this cookbook is to whet one’s appetite of what can be done with the new 7.5 Mango Phone, it certainly succeeds . If on the other hand you expect in-depth explanation of one or more related topics, skip this one.

More information on this book can be found on the publisher’s site: here

Resulting in:

In WPF, the trick is to set the HorizontalAlignment=”Stretch” property of the Listbox. However, apparently there still some internal bug in the ListBox control, which results in the ListBox simply ingoring that setting.

The solution however is, luckily, provided by Microsoft’s Peter Torr in a reply in here.

By simply adding the ItemContainerStyle as described in the post , to the ListBox we get the result we are looking for:

Resulting in ..hooray:

Update: As Alex Sorokoletov was so kindly to cmment (thanks for that), there’s even a simplier solution:

<ListBox.ItemContainerStyle>
<Style TargetType=”ListBoxItem”>

<Setter Property=”HorizontalAlignment” Value=”Stretch” />
<Setter Property=”HorizontalContentAlignment” Value=”Stretch”/>

</Style>
</ListBox.ItemContainerStyle>

The new features that have been added since my last post, in no particular order, are:

• Achievement tree: It is now possible to define what achievement needs to be unlocked before the user can unlock a particular other achievement. For example, the user can’t unlock the “Create a foreach loop”, if he never ever unlocked the “create a for loop”. This allows us to prevent students from accidently unlocking things they never heard of before.
• Localization: If anyone ever feels like using the Strokes extension in a particular language/culture, this can now simply be done as the achievement titles and descriptions can now be localized (currently supported languages are : English 100%, Danish 5%, Dutch 5%, Russian 0,01% )
• More than 150 achievements and counting: Currently there are more than 150 achievements defined that the user can unlock. These are categorized in 13 categories. Yours truly is especially having fun in writing achievements in the Funny category (though your definition of what is in fact funny might differ a bit), especially the “What if Visual Studio had Achievements” post was a great inspiration.

Lots of new achievements and categories.

If you wish to contribute in any which way, don’t hesitate to contact us on our github page. Suppose you wish to write achievements, make fancy art, translate stuff, etc. join us and let eternal glory be yours!

Oh and I definitely don’t want to insult anyone, if I do somehow, please excuse me and allow me to rectify this (don’t start hacking me please J )! I have the greatest respect for the security community…even if they tried to MitM attack me yesterday while I tried to use my Exchange on the conference (or perhaps they even succeeded and now can read all my mail …scary thought J ).

“VulnDev- We say jmp, you ask what addr”

My first twit when entering the conference was the following: “Arrived at #brucon. First sec-conf ever. First impression? Many funny&geeky tshirts”. About one in 5 or 6 attendees had a t-shirt with a very high geek-measure. Following person for example was seated right in front of me while tweeting the previous:

(source)

Every time someone entered the main conference hall I’d immediately check out their shirts in hopes of reading something funny. The most popular ones were those showing one or several (bash?) commands of some script or contained sql injection statement.

Appearance if everything

The average multimedia conference attendee can be summarized as follows:

• A non-descript, mono color shirt or polo
• Black or dark blue costume-like trousers
• No additional accessories

Some might summarize this simply as “boring’. At Brucon we basically see all kinds of people , but this one. I’ve seen people dressed like hardcore bikers (i.e. people I’d walk around in a big circle when seen at night in my street *grin ), funny t-shirt ones like I just described. I even saw what I can only describe as ” a Viking-with-a-silly-hat” a long blond bearded person wearing a funny white, coneshaped hat. I’ve seen Christ-like figures: unkempt hair, long beards. Tattooed, broad-shouldered , “don’t mess with me”, fellas and good-old costumed security manages. There was one common color however that clearly prevailed and that was black. Perhaps the average security man needs to blend in with the shadows or something when trying to get in or out a system?

Where’s Microsoft?

What was obvious when looking around the conference room was the amount of Macbooks and iPad used by the attendees. I was still under the impression that the “real ones” (i.e. hardcore security dudes) all used some pimped up ThinkPad-like laptop with Linux on it. As far as I could see almost all users did indeed toyed around in Linux and I think I saw about 2 people using Windows 7…me and my colleague. This wasn’t such a surprise… but the usage of Apples was.

Social paranoia?

I was always under the impression that social media, twitter in the first place, was a no-go for any self-conscious security man/woman. I thought that the likes of twitter were the devil: the first crack in the layers of defense each security admin closed immediately. I imagined all kinds of neat social engineering tricks one could do by simply reading twits by or communicating with a sec defense administrator. Guess that was a big misunderstanding by yours truly, check out #brucon on twitter and behold: lots of people, not only the scriptkiddies like me, are regular tweeps.

Drinking is the devil!

The “Drinking for B33R” was a clear signal that hackers and the likes do like beer indeed. In fact, around 10 in the morning when the first session started and already several people were seen drinking beer. I’ve been to SPIE conferences, to Tech Days and other IT-savvy conferences and never , ever did I see anyone drink beer. A glass of red wine during lunch or around 4 in the afternoon could be seen from time to time…but beer…in the morning. No never. Did I see drunk people? Not that I could see, so probably the average beer drinker there knew when to stop.

Discobar in broad daylight

Upon entering the inter-speaker lounge where all the company booths and catering was housed I first though I had entered in some fancy underground disco. In the back of the room a djay was playing fancy tunes all day long, the room was pretty dark and laserlights swarmed over the walls and everywhere people where chilling on the floor, playing with their laptop or even sleeping, with a beer next to them. This was a really psychedelic vision of which I can’t say whether this is typical for a sec conference or only for BruCON… However, it really gave the place a very NON-conference feeling hehe.

In conclusion

So, these were some of the more poignant features of the BruCON conference. For now I can’t say if what I say was a ‘typical security’ or not. What was clear is that BruCON is a very well-thought of conference: I’ve seen lots of twits were attendees boasted stuff like ‘best conference ever’ etc. So in this sector BruCON is definitely a must-see conference. I had a great time trying to understand all the things the speakers presented and really like the overall vibe of it all: I saw lots of cheerful, happy people discussing all the latest sec trends while drinking beer and trying to win the Hex Factor game. I’ll definitely attend next year and perhaps buy a tshirt by then to wear there.

Explaining how the whole shebang works internally is not what this post will be about, instead, I’d like to simply throw around some pretty screenshots and show of the program the way the end-user might see it. Since this program was written to be as extendable as possible, in the end of this post I’ll give a brief overview on how others can use the Strokes-code to write new achievements.

Before reading on, I’d like to point out this project is still a work-in-progress. So if you are a) disappointed or b) excited, there’s 2 things you can do: you can help us out and contribute in any which way you see fit (provide ideas for challenges and achievements, contribute code or art, give basic feedback) or you can simply nod with your head sympathetically, leave and do other things *grin*.

If you want to see how it all works or make some contributions, all information can be found here: https://github.com/jonasswiatek/strokes. Make sure you read the wiki on how to setup your Visual Studio if you wish to test the current version of the project. And of course, don’t hesitate to contact us.

Update (24/08): An early beta can be downloaded of the strokes program so people can test the application themselves. Let us know what you think of it. Download here.

How it works

The Strokes program is basically a Visual Studio 2010 extension (.vsix) that users can simply install without too much hassle. Once this is done, users will see a new menu-item in the Tools-section of Visual Studio:

Voila, the Strokes project! Clicking this item will pop up a summary page where the user can track his or hers current progress. We tried to mimic the Steam-based achievements pages so don’t sue us for it:

Click to enlarge

Our achievements are grouped in several categories and users can see which achievements were…uhm …achieved, and which aren’t. For now, we basically have 2 types of achievements: simple achievements and challenges, but more on those later. At the moment, this is the only screen that shows any interesting stuff. Ultimately the project might go ‘in the cloud’ and allow comparison of users and their achievements with leaderboards and other fun stuff.

To unlock achievements, the user simply starts programming and each time a unlockable achievement code construct is written, the achievement is reached. Once the user builds his program successfully, the Strokes program will kick in and check whether any new achievements are in fact achieved. (in the future, I’d love to be able to have a hierarchy of achievements: preventing users from accidentally unlocking achievements they aren’t even aware of at the time: imagine a newbie student writing his first program and immediately unlocking the ‘make a class’ achievement because basically all programs in C# are a class…)

So suppose the user writes the following, not so, meaningful code:

class Program
{
static void Main(string[] args)
{
Test t= new Test();
}
}
class Test{}


Once the user builds this program, the following window pop ups in the lower right corner:

Clicking the magnifying icon will highlight the code that actually triggered the achievement, allowing students/users to learn from what they did to earn the achievement:

If the user should now go to his achievement summary page, he’d see that two achievements were in fact unlocked. At the moment we have around 70 achievements implemented from a list of about 100 achievements. Currently the achievement are very straight-forward ones, mainly meant to show how Strokes works and to be used by beginning programmers. However, the Strokes architecture easily allows to have more complex achievements, more on that later.

Challenges

Besides basic achievements (and some silly achievements such as writing an infinite loop), the Strokes project also supports “Challenges”. Just like the “Pex for Fun” challenges, the Strokes challenges are programming tasks where the user has to write a certain class according to the challenge description. Basically, the user needs to implement the interface of the given challenge and the Strokes program will then test whether the class in fact works as was intended.

As a proof-of-concept, two challenges were defined:

For example with the Calculator challenge, the user basically has to implement the following interface which is defined in the Strokes.Challenges.Student.dll:

public interface ICalculator
{
int Add(int a, int b);
int Subtract(int a, int b);
int Multiply(int a, int b);
float Divide(int a, int b);
}


The Strokes program will detect if code is being written against the correct interface and then tests whether the class works as it should be. If it is, the challenge is unlocked.

Extending the program with achievements

Easily extending the Strokes program was one of the main goals, as such, developers who wish to write their own achievements or challenges can do so fairly fast. Allow me to show you the code needed to add an achievement that detects if a user has written a while loop:

Click to enlarge

As a developer, you need to write a class that inherits from the NRefactoryAchievement class and you’re good to go. You then decorate the class with at least 3 attributes containing the Title, Description and Category of the achievement. A 4^th attribute can be added that contains the URI of the icon the achievement should use in the UI.

Next up, some NRefactory magic (NRefactory is part of the SharpDevelop project which is an opensource C# IDE project, more info) is used allow programmers to simply add code that does all the work J

Using the visitor design pattern, you need to override those methods that visit the code construct you are interested in. There’s about 200 things that NRefactory detects in code being compiled, so you ‘simply’ need to know which one(s) you need for a given achievements. For users, like me, not familiar with NRefactory, simply checking what methods can be overridden is an eye-opener and should get you started.

Once you detected where the achievements is unlocked, you need to call the UnlockWith() method an pass the statement that contains the code that unlocks it. This will prompt the Strokes program to award the achievement to the user.

Extending the program with challenges

Writing challenges is equally straightforward. Three steps need to be done:

1° Define a new achievement class, but now one that inherits from the challenge class:

The Strokes.Challenges.Student.CalculatorTest is the class in Strokes.Challenges.Student that can test the challenge implementation.

2° Write any interfaces the user needs to implement, such as the previously shown ICalculator class.

3° Write the CalculatorTest class, that inherits from the AbstractChallengeTester class, which tests if the challenge works as needed, if it does, true is returned:

Where achievements are, just as in games, a fun extra aspect of a learning process (and way of encouraging games/students to explore more of the game) , the challenges are in fact the real ‘learning aspect’. By introducing challenges as a teacher you can have the equivalent of boss fights. Only if the challenge is completed will the user be able to advance (and e.g. have new achievements and challenges to unlock). Compare it to a mor fun ‘practical test’ where not the coding style itself is important, but only the actual implementation. Make note that challenges in no way should be used as a substitute for real tests (nothing prevents users from ‘cheating’ in challenges by simply hardcoding those parts that are hard to write in a logical manner).

In conclusion

Okay, so that’s what the Strokes project is about. If you’re stoked and excited as I am about this project, feel free to contact us for more information. If all goes well I’m going to do a first trial test of the project with my first year student this autumn. I’m really looking forward to how the students will reacts to this.

We are still developing the project so new achievements and challenges will see the daylight the coming weeks/months. I’ll soon put up a list of the current achievements that are implemented in the project so others can be inspired by this and feed us new achievement ideas.

Update remark: the original conceptual ideas of this program are discussed in earlier posts [Part1, Part 2, Part 3].

So, in the meantime, allow me to quickly summarize what other projects and sources currently exists (besides the earlier mentioned Ribbon Hero) and which can be used as inspiration both for the Strokes project and for others going the same ‘achievement-based’ learning path. Oh yeah, and if you think that Negative Achievements don’t exist, think again and check out part 3 of the excellent “The cake is not a lie” articles. Speaking of lying cakes, you definitely should check out this comic on achievements and portal 2 (click image for the full comic)!

One of the original projects that should be a must-see for anyone seriously thinking about teaching a programming language is the PexForFun project by Microsoft Research. This, free to use, project is a series of programming challenges (C#, F# and VB) both extremely easy and stupidly hard to solve. Users can randomly start a challenge or, more wisely, solve them in order. Basically the user is presented an in-browser code editor with per challenge a few lines of code and usually a title that hints to what needs to be done. The nice thing is that no additional help is given. Instead, the user simply needs to guess what needs to be done by adding some code and then hit the ‘Ask Pex!’ button which will results in the current code being compiled and tested for correctness of the challenge, followed by feedback of why the current test failed. So bit by bit you, usually, get closer to the solution and in the meantime hone your algorithmic thinking skills. If you are on the road, PexForFun also has an excellent Windows Phone 7 application that does exactly the same, but on a way smaller screen (more info). Though PexForFun won’t win any prizes in the looks department, it is definitely worthwhile to check out.

What will win prizes in the looks department is Jira Hero. This plugin for Jira , a bug tracker, does exactly what we are aiming for in the Strokes project: achievement-based learning with an online part that allows users to compare each other’s progress. The user, in a playable manner, learns how to use the Jira systems and earns badges by performing specific tasks. Leaderboards allows a user to see his progress compared to other user. The project ended on third place in a plugin programming contest, Codegeist V, by Attlasian, the makers of Jira. Even if you’re not into Jira, check out the postmortem of the Jira Hero project here.

A small blogpost with not much additional information but a brief paper (that’s not very exhaustive in my opinion) describes commonly used game mechanics. This particular posts is on achievements, more posts are promised but to be honest, don’t way for them because it appears that the author(s) have moved on to other interests, still, check out the paper for some inspiration here.

For real, scientifically backed, inspiration and papers, several high-ranked journals exists:

• Wiley’s “Journal of Computer Assisted Learning” (link)
• Elseviers “Computers & Education – An International Journal” (link)
• “Journal of Educational Technology & Society” (link)
• “Journal of Research on Technology in Education” (link)

Many other journals in fact exists which sometimes focus on parts of game-based learning but the aforementioned can be considered, in my opinion, to be prime resources. For a complete listing of what is out there, and more, check out the following site (WARNING: contains a lot of adds!).

This post is part of a series of posts I’ve planned on my findings while writing a windows phone 7 application (see the previous post, on the problem of caching urls, here).

Colors and themes

Owners of a WP7 device can choose whether they have a dark theme of a light theme while using the phone. Users can change this anytime they feel like it. As a WP7 developer your application will need to take into account that both themes can be active. In this post I will only concentrate on the background color which can be dark or light, and ignore the accent color.

When your application starts up, the current active theme will influence the way your application looks. That is, as long as you haven’t explicitly defined certain styles and colors, all the standard WP7 controls will show up in a correct manner. Let’s see how this works. Suppose your extremely cool and intuitive application has a nice shiny button such as this:
<Button Content="Shiny"/>
The button will have a look dependent of what theme is being used (note that the accent color of the theme doesn’t matter here). So if we run our application we will see the following buttons:

When the dark theme(left image) is active our button, and all other standards controls, will automatically have a black background and white foreground brush. However, when the light theme is active, what WP7 basically does is switch the Foreground and the Background property of all controls, as long as they’re not defined explicitly.

The moment however, you define a specific color for a control, WP7 won’t help you with switching colors anymore and making sure your controls will look ok in the active image.
Imagine a fancy yellow button:
<Button Content="Shiny" Background="Yellow"/>

Testing this button in the white theme gives pleasant results (make note: I’m not designer, I’m already happy if my color schemes don’t induce a headache within 5 minutes):

Now let’s see how this looks like in the dark theme:

Ugh..My eyes! What happens is, since we didn’t define the Foreground explicitly (which the text and border in the button uses) the black borders and black content were switched, but the yellow background was not. Still, ugly or not, the button is still sort of useable.

However, suppose you really need your button to have a specific color…for example white.
<Button Content="Shiny" Background="White" Button>
Let’s see what this looks like in the both themes:

Yippie, we made a white rectangle!

Anyhow, you get the point. In summary: If you are planning on playing with colors, you better be prepared to write two different styles that will vary according to the theme being is. Let’s see how we can cope with the fact that your phone can have a dark and light theme.

Detecting the theme

To know which theme is active I’ve seen several tricks (old-school style is apparently by looking at the current RGB values of the fore-or background brush) but in my opinion, the following is the most straightforward (see here for a list of all predefined theme resources):

bool dark= ((Visibility)Application.Current.Resources["PhoneDarkThemeVisibility"] == Visibility.Visible)

We can simply check whether the PhoneDarkThemeVisibility is Visible or not (the “PhoneLightTheme” that also exist will have the opposite value). If it is, we now what the current theme is. We can do 2 things, depending on the type of buttons being used,:

• Load in a new style for your controls.
• Work with images that replace the back-and foreground of the buttons.

Load new style

A lot has been written on how to change the theme of your controls at runtime, so in summary what needs to be done is something along the lines of:

1. Create 2 brushes or styles, one for each theme, and place them in your application resources (App.xaml file)
2. When you need to change to the other theme, remove the current brush or style from your application, e.g.:

   App.Current.Resources.Remove("MyCurrentTheme");


3. Insert the other brush or theme in your application, e.g.:

   App.Current.Resource.Add("MyCurrentTheme", mydarkTheme)


Images and themes

The problem described earlier with buttons looking like ugly betty also applies to images. Suppose you created a nice transparent image to be used in your button:

The black part of the image is transparent. Using this button in the dark theme gives pleasant results:

<Button>
component/home_white.png">
</Button>


In fact, thanks to the transparency, we can do fun stuff like:

<Button Background="Green">
component/home_white.png">
</Button>


However, if we don’t explicitly defined a background (why should you? Remember, Metro design is all about no chrome and other silly non-usable UI changes…check out your iPhone or Android to see what I mean :p ) and then switch themes, we again have created a very white rectangle:

We can solve this problem in 2 ways:

1. Have a different set of images for both themes
2. Have one set, but toy around with transparency

Image sets

Having two sets of image has the benefit of knowing exactly what each button (or control) will look like in each theme. The drawback is that every time you change one image, you also have to change the other one.Still, from time to time this is how things go. To work with image sets, the most straightforward solution , a variation from here, goes as follows:

1. Create 2 sets of images and include both as assets, content or resources to your solutions. Keep all names the same, but only change the folder in which they reside (e.g. “buttons/dark/” and “buttons/light”).
2. When initializing the page or application, query the phone which theme is used. (see earlier).
3. Load in the correct set of images

How to do this in practice? Suppose we defined a button somewhere in our UI as follows:

<Button >
<Image x:Name="btnImage" ></Image>
</Button>


Following code, which can be placed in the constructor of the page can then be:

Uri uri;
if ((Visibility)Application.Current.Resources["PhoneDarkThemeVisibility"] == Visibility.Visible)
uri = new Uri("/buttons/dark/home.png", UriKind.Relative);
else
uri = new Uri("/buttons/light/home.png", UriKind.Relative);
btnImage.Source= new BitmapImage(uri) ;


Note that we could also easily refactor this code in order to define both folderlocations-strings (“button/dark/” and “button/light/”) elsewhere and only have to write the filename once (“home.png”);

One image set, changing transparency

For those among us, like me, who don’t really like to toy around in image, a third option exists to solve the changing themes problem, explained here and here (first answer). This solution, which I prefer above the ones explained earlier, goes as follows:

1. Create a single set of black/white images
2. Implement a style which changes the black/white colors of the images according to the active theme (in practice: change the active transparency from black to white or vice versa)
3. Apply the style to all controls

The drawback of this method is that it only gives nice results for binary colored colored images. I suppose with a bit of extra coding this recipe can also be applied to other types of images, but it won’t be as straightforward.

In practice, 2 things are needed:

First , a new style is created which can then be applied to any button in the application. In short (full version here):

<phone:PhoneApplicationPage.Resources>
<Style x:Key="IconButton" TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
<Setter Property="Padding" Value="10,3,10,5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
………….
</VisualStateManager.VisualStateGroups>
<Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}">
<Grid x:Name="ContentContainer" OpacityMask="{TemplateBinding Content}" Background="{TemplateBinding Foreground}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>


For now, let us zoom in on the main ‘trick’ in the style:

<Grid x:Name="ContentContainer" OpacityMask="{TemplateBinding Content}" Background="{TemplateBinding Foreground}"/>


What we created here is basically a new type of Button which uses an ImageBrush as its content, containing the image we want to be shown on the button. However, the style will make sure that we use an alphamask that uses the image as the mask (so make sure your image actually has an alpha channel; Tip: use PNG!). By setting the background color to the current Foreground color (dependent of the theme chosen) we make sure that the non-transparent portion of the image will have the correct color (what simply happens is that we ‘cut out’ the image from the foreground, using the alphamask).

All that remains now is applying this style to our controls (buttons in this example):

<Button Style="{StaticResource IconButton}" >
<ImageBrush ImageSource="/icons/home.png">
</Button>


If we now test our application we see that the button shows correctly, independent of the active theme. The picture on the left shows the dark theme: