Susan IbachTechnical Evangelist
In this blog I create my project and have to learn the different controls I can choose from to build my app
As I continue my series on building my first phone app, I have chosen the Windows Phone application template and I am ready to start adding controls to my first page. If you missed any of the earlier posts in the series, you can access them here.
As I look at the Toolbox, I realize there are a lot of different controls to choose from, so in this post I’ll try to figure out what they do. There are so many controls I broke them into three groups for my quick description of each control just scroll down, I’ve also tried to hyperlink to documentation on the controls as I researched what each control is for.
A Checkbox is a great way to let a user enter a Yes or No | True or False value. You’ll need to set the Content property to change the text that appears beside the textbox. The IsChecked property tells you whether the checkbox is checked or unchecked. There is also a IsThreeState property which allows you to have a checkbox represent something 3 different values like Yes/No/Unknown. IsChecked will be true if the checkbox is checked, false if the value is unchecked. If you enable the IsThreeState the unknown/undetermined state of the checkbox will return a value of Nothing for IsChecked.
Allows you to give the user a list of items to choose from. Specify the values to show in the list using the Items property, or I am sure you can set up data binding as well to read the data to display from some form of data source. This is the sort of list that takes up a lot of space on the screen, it’s not a drop down list. When you select one of the values it will be highlighted. I don’t see an option for allowing multiple selections, and it’s really hard to select the listbox after you create it, whenever I click on the listbox, it keeps selecting the Listbox items instead which is kind of annoying.
I guess you use maps to display data, data such as where you are, or where something is located! Looks like using this control is a bit more involved! There is all sorts of extra stuff they talk about like if you want to use a Bing Maps Silverlight Control you need a Bing Maps key which you get from the Bing Maps Account Center. I get the feeling the map control would be a blog unto itself! So for now I’ll just say, yes you can display a map and highlight locations on a map or directions on a map. I know the Where’s Timmy app from Tim Hortons has a map!
This is like a text box where you can enter data, but no-one can see what you are typing, perfect for entering passwords! Instead a character appears on the screen. You can control what character appears with the PasswordChar property.
Great to give a user selection between 2-5 choices on the screen and only one can be selected at a time. Use the Content property to change the text displayed beside the radio button. The IsChecked Property will tell you if a particular radio button is selected. When you add multiple radio buttons to a screen by default they all become part of one group, so as soon as you choose one radio button, all the others are deselected.
A slider is great for getting a user to choose a value in a range. You specify the highest and lowest values for the slider control with the Minimum and Maximum properties and then the Value property will tell you the value selected by the user.
This is your label control for displaying text. You specify the text to display with the Text property.
This is your control for letting users type in data with the on screen keyboard, the Text property will tell you the value entered by the user or can be used to set a default value.
This is the new control that came out which allows you to include advertising in your applications. Adding the control is pretty straightforward, drag and drop. You can set the height and width properties to resize it. But it takes more than just dropping the control on your form to get advertising working according to this site. You have to register your mobile app using Microsoft pubCenter and then you have to set the Application Id and Ad Unit ID properties in the ad control then you will have an ad enabled app in the marketplace to make money.
Buttons are what you expect, buttons a user can tap to do something. You’ll want to set the Content property because that controls the text that appears on the button. At some point you will create Click event handlers for the button as well where you can write the code that makes stuff happen when a button is pressed. One thing I noticed about the button control on the phone is the buffer around it. It turns out this is deliberate so you don’t accidentally put buttons really close together and make it hard for someone with fat fingers to tap the right button.
Is exactly what it sounds like: it’s a button that looks and acts as a hyperlink. You will want to set the NavigateUri property to specify where to go when someone clicks it, and the Content property to change the text that appears for the button.
This control lets you add audio or video. You specify the audio or video to play in the Source property. I found a little article here that describes how to use this control.
This control could display HTML content you generate in your code if you want to get fancy, or you can use it to display content from a website specified by the Source property.
Allows you to draw a pretty border around other controls on your form. You can set the properties you would expect like BorderThickness and BorderBrush to control the color and thickness of the line around the border, Background to change the background color within the border. CornerRadius is kind of cool so I can make rounded corners. Wow, I could make some really ugly apps with this. Check out my green and red border with rounded corners! Did I mention, I am not known for making elegant looking pages.
According to MSDN: “A canvas defines an area within which you can explicitly position child objects by using coordinates relative to that area.” Okay then I guess I would use a canvas if I want to be able to move something around on the screen with my code. I guess I could make one of those annoying pages with a button that says “Click here to win one million dollars” and whenever you tap on it it moves. You can set the Background property to set the background color.
This just draws an ellipse on the screen. The Stroke property controls the color of the outline of your ellipse. StrokeThickness controls the width of the line. Fill controls the background colour of the ellipse. Weird how all the property names are different for Ellipse than they are for Border and Canvas eh? I made an ugly red and green ellipse to go with my ugly border.
A grid is an area made up of columns and rows, so this would be great for displaying a table of data. You’ll need to go to the ColumnDefinitions property and add ColumnDefinitions for each column you want in the table. For each column you can specify a MinWidth and MaxWidth property. Then you need to go to the RowDefinitions Property to add a RowDefinition for each row. There is also a ShowGridLines property that controls whether you see the lines on the grid between columns and rows. You can then add controls in the different squares of the grid. Here’s my 3 row, 2 column grid with the grid lines displayed.
Okay I know Images can be used to display data or to make things look pretty, I had to pick somewhere to put it! The image control allows you to display images. Use the Source property to specify the image to display. If your images aren’t the same size as your image control, play around with the Stretch property to control whether it clips, or resizes the image for you. It looks like JPEG and PNG formats are supported
This just draws a rectangle on the screen. The Stroke property controls the color of the outline of your rectangle. StrokeThickness controls the width of the line. Fill controls the background colour of the ellipse. Weird how all the property names are different for Ellipse than they are for Border and Canvas eh? I decided to go with blue and green for my rectangle
The ScrollViewer lets you create a scrollable area, great for letting users read large amounts of text that might not fit on the scree, the user can then scroll to see all the content. It can have a horizontal or vertical scroll bar which you control with the HorizontalScrollBarVisibility and the VerticalScrollBarVisibility properties. Now what’s interesting is when I did a little searching I found a few articles that said you need to use Blend to create a ScrollViewer, those were pre 7.5, but when I tried to dig into 7.5/Mango I found comments about performance improvements so maybe you still need to use Blend to create this, still not sure. I could see this control being very useful though!
A StackPanel lets you nicely line up child controls horizontally or vertically, for example you could make sure all your radio buttons are nicely lined up. I like this one, easy to use and helps me make my form look much cleaner!
Metro is gaining popularity as a way to create compelling app designs for Windows Phone. It’s theme is distinct and very oriented towards providing the user with information. At the same time, given its emphasis on information, it is more than just presenting data on the screen. A well-built Metro app follows a set of principles that make the app truly flow and through that makes the app useful.
The marketing for Windows Phone often proclaims it as the glance and go platform. The intent of this catch phrase is to convey the fact that you can get information from your phone in only a very short amount of time looking at it. And from that quick glance and the information you retain from it, you can decide the course of action you want to take from it, be it opening your email client to check your email, find out who called you, answer a Twitter message, or even grab that umbrella because your weather app told you that it’s raining outside. The platform really tries to live up to that glance and go mantra.
But how does an app use Metro to achieve the glance and go goal? Like life, there is really no one answer to that question; your creativity as the author of the app plays a distinct role in this process and guides it to its finish. That said, free reign to do whatever you want can lead to issues with the experience the app provides its users.
With great power comes great responsibility.
That’s where the Metro Design Principles come in.
The principles as laid out in the graphic above are meant to provide you with a set of guidelines for building your app using Metro the right way. What it is not is a blueprint. The guidelines above are not meant to define your app or its personality; the intent is to allow you room to express the creativity of your app.
So, with that said, here is a brief description of the principles as laid out above:
Clean, Light, Open, Fast: This refers to the flow of the app. How is the experience of the app from the user perspective? Is it responsive and dynamic? Is it inviting and usable?
Celebrate Typography: Rarely is text mistaken for art (at least in the visual sense; in a literary sense it is absolutely – one of my personal favourites of literary text as art is Ken Follett’s Pillars of the Earth, but I digress…). In Metro, however, text is very much artful. Because Metro is very text-driven (again, due to its focus on information), how you use fonts and how you place text on the screen is very important. That said, your app should not be only text; this is a common misconception with Metro. Use text wisely. Use it as much as you need it and no more. Make sure that the text flows with other screen assets like images, video, buttons, etc. It should look and feel natural.
Alive and In Motion: This principle follows closely with Clean, Light, Open, Fast. Your app should not feel or be static. Use animation (but not too much to cause negative distraction). Use of colour is important (you know those apps in the Marketplace that are black backgrounds with white text and not much else? Yeah, those apps may look “metro-ey”, but they are not really Metro). Make sure your app invites interaction with the user. Your app should compel the user to explore and use your app.
Content not Chrome: When we say “chrome” we speak of the facilities of the app meant to provide peripheral functionality. Chrome in this context are things like app toolbars, system information like battery life remaining, URL bars, etc. Your app should focus on giving the prime real estate of your app to its content. Content is king. Not buttons.
Authentically Digital: In the times of the Renaissance, there was an explosion of discovery that made a permanent impression on the human condition and how we view ourselves. Art, science, philosophy, social awareness – all of it was viewed through new lenses with the guidance of genius of the likes of Galilei, Michaelangelo, da Vinci, Machiavelli, Copernicus and others. The world was their canvas and the expression in their creations were limited only by their own creativity. We, on the other hand, are not afforded the boundlessness that these great thinkers had in the physical sense. The unlimited potential of the apps we create are truly found in their digital nature. This is because apps are limited by the form factors that they are housed in. The art and awesome power of the app are found in the bits that are interpreted by the hardware.
The content of this post is just a very brief description of the Metro Design Principles. If you want a truly immersive description of them, I encourage you to check out Arturo Toledo’s post titled 31 Weeks of Metro Design | #1 Metro Design Principles and the Metro Design Language.
When you look at successful mobile apps and games, there are a few common traits that you will notice in them. They all achieve a certain set of goals that may be subtle or completely obvious (or both!). If you harness the power of motivation for your app user, you have created an experience for your app that will make that user use your app more often than others, make them champions for your app to their friends and family, and generate word of mouth that will increase the popularity of your app in ways that traditional marketing simply can’t do.
At the heart of things, mobile applications are simple. They solve problems that may be simple or complex, but the way apps solve problems is by making it simple for the user to get done what they need to do quickly. Really, that’s the crux of it and it’s a bit of a corollary to traditional (i.e.: desktop/web) apps:
A user does not want to use your app. A user wants to have used your app.
The quicker a user can use your app and achieve the results he/she was looking for, the happier he/she will be and the more likely he/she will use your app again. Just think about the mobile scenarios below:
Success (in my opinion) is dictated largely on the user’s ability to do any of the above as quickly as possible.
So now that we have established that task completion speed is key to the successful adoption of an app or game, let’s dive more deeply into the basic motivations of any mobile app. If you joined me on the latest D3 episode with my partner in crime, Jonathan Rozenblit, you will have heard me talk about this. These motivations are as follows:
The three motivations, as described by Josh Clark in his amazing book Tapworthy, are that every user of a mobile app is one or more of the following:
If your app has an answer to one or more of these motivations and you’ve implemented it the right way, then guess what? You may have a marketplace winner on your hands! If your app doesn’t satisfy any of these motivations or doesn’t execute well on them, then you probably should rethink how your app should work.
By the way, if you find it odd that I’m talking about a book targeting iOS as a way to create successful apps on Windows Phone, the truth of the matter is that learnings from this book are very relevant to building apps on any mobile app platform.
Compass Rose Studios, composed of four students from Carleton university built a flight game for Windows Phone and share what they learned
Check out more tips from fellow students here
Could you briefly describe your application/game?
Airborne is a fast paced 3D adventure game that takes modern fascination of the steampunk style to new levels. The user flies an airship along the treasure map in order to reach the treasure located at the end. Wage aerial battle with air pirates, loot their ships for treasure to purchase speed and gun upgrades to get that extra edge in battle. Firing is triggered by tap controls, and steering is controlled by the phone’s Accelerometer.
Did you use XNA, Silverlight or both?
To develop Airborne we used both XNA and Silverlight. We used XNA to program the main gameplay, which we wrapped in Silverlight pages for menus/GUI functionality.
What was your banging your head against a wall moment?
Finding the right library to support our animation was slightly frustrating, since there does not appear to be one at this point that supports blend shapes. The one we ended up using (SkinnedPhoneModel) required skin and bone data (the mesh must be attached to a skeleton with only one root node), and assumed a vaguely humanoid shape, so we had to adjust our animations heavily – so something to keep in mind for unusual shapes and animations. Another issue we ran into was Tombstoning, a feature that allows the game to remember its state when the player launches another application then comes back to the game. With more time this can be ironed out, but it is not as quick and intuitive as could be desired. Another issue was that the game seemed to lag when we put in sound effects.
Did you ever solve that issue?
For the animation issue, we had to use a library that didn’t quite suit our needs. Since our airships had non-humanoid animations that do not generally necessitate a skeleton and skinning, we had get creative with skeletons and skinning methods to redo our animations in order to comply. Simply something to keep in mind when designing a game or beginning animation for Windows Phones. The Tombstoning issue was ironed out after more in-depth exploration of the documentation. With respect to the sound effects, we simply took them out.
If you had to build this same app again from scratch, what would you do differently?
We would skip trying to animate things with blend shapes, and we would try to make our models lower polygon so as to avoid lagging in-game. I also really want to explore the background music thread I recently discovered. That may also solve the lagging problem. On top of what we already have, we’d like to develop training modes, and further levels/functionality.
Any nice surprises?
It only took minor adjustments to cross over from standard XNA to phone XNA and we really enjoyed working with Silverlight and XNA together. Silverlight was very intuitive with Visual Studio, and it was so much nicer than having to program menus manually with XNA! It was painless to put the game on the phone and to test it. It was also easy to get started with the help of Microsoft documentation.
Did you leverage the mobile platform?
Yes, we used the phone’s Accelerometer for steering the airship. Tilting the phone right or left will steer the airship right or left; tilting the phone forward will cause the ship to accelerate; and tilting the phone back will slow it down.
Did you leverage the touch screen?
In Airborne we use the touch screen to fire the ship’s bullets using the tap command. This makes it easy to steer and fire at the same time, since the player can tilt the phone while tapping the screen with their thumbs.
Did you have a favourite feature?
Our favourite feature is definitely to have XNA and Silverlight working together. Silverlight makes it easy to develop attractive graphic user interfaces, and XNA is an intuitive game development language. We definitely hope this feature sticks around, and develops further.
What is one thing you think you did really well in this application?
Every group member did good work. In particular, the concept and design were well appreciated by our testers. Our game is not hard on the eyes! Our artists did a great job. Programmatically, we are particularly proud of the enemy AI, which took some time to develop.
Are you publishing your application/game?
We do hope to release our game in the marketplace; however we’re not quite ready to share it with the world yet. We would like to iron out a few more bugs first, and develop a training mode.
Where can I learn more about your app/game?
You can learn more on our website and on our Facebook page. We also have a video
Compass Rose studios is a group of four BIT (Bachelor of Information Technology) students currently going into our last semester at Carleton University. This project was developed for our Design Studio 4 class. Our team leader, Meagan Leflar, is responsible for project management, XNA programing, concept art, and some 2D art such as the game map, textures, and promotional material. Laura Kenney, our other programmer, is responsible for the Silverlight programming, and some XNA programming, as well as the 2D art for menu screens and promotional material. Lacey Maw and Jaimie Thom are our art team, and they are responsible for modeling, rigging, texturing and animating game assets.
Tyler Pearce, a student from Carleton university shares what he learned developing a Windows Phone game with his team.
The game is called ChopChop, you play the role of a chef. Players must use phone/touch gestures such as 'Flip, Stir, or Spread' to cook as much food as possible before the time runs out! You can see a video demo as well
We used a combination of XNA and Silverlight for the game. This allowed us to create all of our core gameplay and content inside of XNA, while at the same time overlaying our score and timer elements that were created in Silverlight. This sped up development quite a bit.
What was your banging your head against a wall moment?
Because this was the first mobile app I have developed, there were many new things to learn. One of these was the current state of the application. When the user closes the app and it enters the 'tombstoned' state, the user can lose their current place in the game. This caused many headaches. If the player did this, the game appeared 'broken'.
After learning about this issue, we found out it is possible to store specific settings of your game to be reloaded later. Because of the scale of our game and the amount of specific settings we had, we ended up just navigating the user back to the main menu rather than restoring. It is possible however to resume the game if we want to go that route.
We would do more research into the features that Windows Phone 7 has and take advantage of them in our game. Towards the end of development we discovered many things that we wished we knew about such as customizing Live Tiles for your app which is super cool. We would also test on the actual device rather than the emulator much sooner. We found a major bug that only happened on the device that we had to fix quickly.
We were looking for an easy way to detect when the phone was 'shaking'. After some searching we found this fantastic library on the Microsoft website that made it extremely easy and customizable. (Called 'Shake Gesture Library') I would highly recommend it.
We did our best to keep the User Interface as simple and clean as possible. We used the accelerometer as one of our main features in the game.
Since our game is based around gestures, we used a huge variety of different touches. Some gestures we used in the food in the game were: Squeeze (Pinch), Stir (Move fingers around in circle), and Tap (Tap finger).
I really enjoyed how easy it was to create different pages/screens in the game. We were able to design a great looking score screen in Silverlight, and once the user completed a level, navigate them there with their score and overview. This was a really nice work flow.
We needed an easy way to extend the game by easily adding levels, gestures, food items, etc. With this in mind, I spent a very long time developing the framework for the game. With this in place, we were able to design new levels and easily choose different touch gestures for foods or animations. I was very proud of this.
We plan to plan to publish the game as soon as we polish and perfect it. The game is currently called ChopChop, but may change due to other competing apps with a very similar name. We will be sure to let everyone know if we decide to change it.
Where can I learn more about your app/game? You can view our website
Who developed this application?
The game was created by 4 Carleton University students in the Interactive Multimedia and Design program.
I was responsible for the full development of the game as well as the User Interface and Menu Design. I take great pride in what I do and always hope to make an influence in my work.
I currently operate an Ottawa Web Design business in Ottawa called TeeMedia where I specialize in WordPress development. After this great experience, I plan to continue exploring app development on the Windows Phone.
I was responsible for the music and sound in the game, as well as aiding in visual assets. I also created the marketing for our game (Poster designs, demo video, 3D logo, etc...) Currently I do contract work in audio production, video editing, and graphic design (www.andrewrobillard.com) and also hope to continue to work on new apps for Windows Phone.
After a Microsoft representative pointed out the benefits of designing for the Windows Mobile community, our team brainstormed some ideas and started developing. Chop-Chop was a fun idea and even though I had my doubts in the beginning, it was really fun to play! It really opened my mind up to the possibility of working in the mobile app industry.
I was inspired by the opportunity to create a mobile app game this semester because I'm very passionate about the creative process and was excited to test my skill set. My contributions for the mobile app game included the game concept, level concepts, 2D and 3D graphics and animation.Getting to work on a project that's finished product has the potential to be used by an outside company motivates me beyond just this project and has excited me to pursue a career in the industry.