Trip Wire's First Attempt at Windows 8.1

We're working on a spelling app for Windows 8.1 Phones, and we thought that as we're learning something new, you could learn with us! Please note though, this will only be tips for getting started and as such will not contain a lot of actual code.

First up, we open Visual Studio Express 2013 and select that we want a Pivot App (note we chose the Windows Phone Silverlight one):

This comes pre-populated with data and views so that you can get a feel for how to build a Windows phone app. However, the first thing we did was remove anything we didn't think was going to help us in creating our app. We chose the Silverlight one as we were learning from the local database example by Microsoft.

Now comes the code, if you look at MainPage.xaml, you can see a Grid tag which contains a Pivot. You will want to set the Title to the name of your application, e.g. "Spelling Bee". If you're planning on having your app translated into multiple languages , we would recommend doing this using the resources file. To set an element's attributes using the resources you will need to give it a name such as AppTitle in the ApplicationResources.resx file, and the in the xaml set the attribute as follows:

Please note that the title may not show up in the xaml designer anymore. However, if you run the emulator it should.

Next we added a PivotItem to the Pivot for each page we intended to have. In the end I had: home, play and scores. For each PivotItem we set the Header to be the title we wanted for the page. This can be done through the resources file or by setting the Header attribute directly as mentioned previously. Upon completion, our app looked like this:



Next we wanted to add content to our PivotItems, to do this we recommend using a StackPanel or Grid for your base element. The StackPanel is good for less complex layouts, where as the Grid gives you more control as you can define rows and columns. we added Buttons in a StackPanel (with vertical orientation) for our play PivotItem, which looked something like this:



However, we wanted styling to be set for the Buttons... Not only on this page, but for every page in the app. To do this, we had to add a Resources section to our App.xaml where we defined the default styling of buttons for our app. It is possible to define the style directly on the element, but if this approach is used any changes made will have to be made in multiple places throughout the application which is not ideal. After applying application level styling using the code as follows, we had buttons styled like this:



Finally, on click of one of the play buttons we wanted to be able to open a new GamePage. To add a new page, right click on your C# project and click Add > New Item... You will then want to select Windows Phone Portrait Page.

Next we need to be able to switch to our new page on the click of one of the play buttons, to do this we need to add an on click event to the button, e.g. in the MainPage.xaml set the Click attribute on a button to "Play_Button_Click". This event will need to be handled in the MainPage.xaml.cs file, which was automatically created with the MainPage.xaml file. The handling code should appear as follows, note that where necessary you can pass a parameter to the Navigate method:



From here on with the help of Google and other tutorials, you should be able to customise your Windows Phone 8.1 app to your needs. Soon we will be publishing an article on adding a local database to your App.