I'm a geekette who enjoys playing with new technology for software developers. I work as a Developer Evangelist for Microsoft. My current focus is on machine learning and big data on Azure.
So now we are up to the point where we can start coding!
First, let me explain my app idea. I am building a children’s game called “Reveal a Picture” where you touch the screen or move the mouse on a colored screen to reveal a hidden picture underneath. This is a very simple concept, but for children ages 2-4, this is fascinating. This application will select a picture from the user’s Pictures Library to hide, so the child will be delighted to discover a picture of herself or her family. I also like this game idea because if the child plays it with a mouse, it teaches basic mouse manipulation skills (the hand/eye coordination necessary to move the mouse and correlate that action to the mouse pointer moving on the screen).
Note that I’m using Visual Studio Express 2012 RC for Windows 8 for development (so if you are coming from the future, things may look slightly different).
I started with the Blank XAML template in C#. (NOTE: If you’re just getting started with Metro, using the Grid template or the Split template is a good idea. It takes care of a lot of the navigation, animations, and snap screens for you.) But this app is so simple that Blank made sense.
I’m assuming that you’ve already downloaded Visual Studio Express 2012 RC for Windows 8 (if not, check out the Getting Started post). In Visual Studio, select “File” and “New Project” from the menu bar. You will see a dialog box like the below. In the left navigation pane, expand “Installed”, then “Templates”, and then “Visual C#”. Select “Windows Metro style”. Then in the center pane, select “Blank App (XAML)”. Give it a name and click “OK”.
Now, I need to build the functionality that shows the picture and then hides it with lots of little rectangles, which can then be individually touched or moused over to make them disappear and reveal the image.
In MainPage.xaml inside of the Grid, let’s add an image for the picture that will be hidden. In addition, let’s give the Grid a name (I’ll use the super-creative name of “LayoutRoot”) so that we can access it programmatically.
Next, we need some code-behind in MainPage.xaml.cs that implements the basic functionality of the game. At a high level, we are displaying an image from the Pictures Library and then covering it with a series of small rectangles. When each rectangle is touched or moused over, it will disappear and reveal the picture underneath. To implement this, we will need to initialize the LayoutRoot grid using InitializeGrid. The method SetRandomPictureAsync will get the pictures from the Pictures Library and randomly choose one, and then call SetNewHiddenPictureAsync to read in and display that picture. Next, HidePicture will cover the picture with small rectangles of a color defined by GetBackgroundColor. The event handler Rectangle_PointerEntered will make a given rectangle disappear when it is touched or moused over. Finally, Rehide will make all of the rectangles appear again; we will use this functionality in the next post when we expand the game to allow the user to uncover additional pictures.
Now we need to call these functions! First, modify the constructor to call InitializeGrid().
Then, add logic to OnNavigatedTo to set the hidden image and hide it.
Plus, don’t forget to add these namespaces at the top of MainPage.xaml.cs:
Now, there is one more thing that we need to do. Since we are accessing the Pictures library, we need to declare that the app has this capability in the app manifest. Capabilities create a climate of trust – you as the developer state upfront certain things that your app will try to do (like accessing the user’s file libraries or webcam). When an end user sees your app in the Windows Store, they can very clearly see all of these things that your app might do and can make an informed decision on whether they want to download it. For example, if I’m downloading an eReader app to read digital books and I see that it will try to access my webcam, I might wonder about that and not download it, because I don’t see a clear reason why an eReader should need my webcam for me to read books. Which brings up another good point – if you are a developer with a valid reason to access the webcam (or whatever capability) that is not immediately clear (maybe an eReader would use the webcam to scan ISBN numbers and find the corresponding digital book?), it would behoove you to explain what the app is doing with the webcam in your app listing page in the Windows Store, so you don’t scare off cautious/paranoid users like me. For more information on capabilities, see this MSDN article on "App capability declarations".
Note that if we don’t specify the “Pictures Library” capability, we will get an error at runtime:
In the Solution Explorer, double-click on the Package.appxmanifest file to bring up the Visual Studio editor for the manifest. Click the “Capabilities” tab, and check the “Pictures Library Access” box.
At this point, our app will run. It will grab a random picture from the Pictures library and cover it with the color cyan (a light blue/green color). The user can then touch or mouse over the picture to remove the color and reveal the picture underneath.
In the next post, we will add an application bar to the app to allow the user to get a new picture when they are done uncovering the first one.
Other blog posts in this series:
Part 1: Why Would You Want to Develop a Metro Application for Windows 8?
Part 2: Getting Started
Part 3: Metro Design
Part 4: My "Reveal a Picture" Algorithm and Basic Code