How To Edit App Studio Code

(If you don’t know what App Studio is, then you can read my description and review in my previous blog post.)

Background
This post assumes that you have already used App Studio to create your Windows Phone app and exported the code. The template I used was the “My City” template (typically the top-left and largest one). So, if you used a different template, then your file names will not be the same as mine, but hopefully, the directory names that I point you to will vastly help narrow your search for the proper code to edit. The purpose of this post is to just help you find the files to edit the data you put in App Studio and to help you edit the views/templates you chose also. There is also a small section on the errors you may encounter and the end of this post have some additional resources for further editing your app.

Quick Overview of the Code
From the App Studio program online, you will download a zip file and have to extract it. In that extracted folder open the folder labeled “src” (aka, the only folder). Once in that folder double-click on “Solution.sln” to open the code in Visual Studios. NOTE: If you are planning to make a Windows Phone 8 (WP8) app, then you will need to be running Windows 8 and have Microsoft Visual Studio 2012 installed along with the Windows Phone 8 SDK. Or, if you don’t have that, then you can still create a Windows Phone 7 (WP7) app – which still run on about 40% of Windows Phone devices – on Windows 7 with the Windows Phone 7 SDK.

The code is organized into a popular pattern known as MVVM (Model-View-ViewModel). Basically, the code is divided into three section. The “View” represents HOW data is displayed to the front-facing/user-facing side of things. The “Model” includes WHAT data is shown to users. And, the “View-Model” has the code for integrating the View with Model.

So, if you want to edit the raw data (MODEL) that you inputted to App Studio, open Solution Explorer (found in the View menu, or Ctrl+w,s), and then scroll all the way down to expand a folder called “2 – Data”. In there will be some CS (c-sharp) files, about one for each page of your app. See the picture below for what will be shown with the My City template.

If you want to edit the way the data appears (VIEW), then in Solution Explorer, expand “1 – UI”->WP8App->View. In this section you will see some XAML files, about one per page. And, each of these XAML files has a CS code-behind, which basically explains how some of the View runs programmatically. See picture below for more details specifically relating to the My City template. The highlighted file is the main page/first page that users will see when they open the app. It also defines the Panorama control that controls the ordering of each of the pages. And, the CS code-behind has the code for dynamically showing or hiding the ApplicationBar (menu).

If Errors Occur
(1) Add NuGet package manager and (2) set the default to automatically add missing packages.
1. Under the Tools menu, click on “Extensions and Updates…”. In the left column, click on Online, then search for “NuGet Package Manager” and download it.
2. Also under the Tools menu, this time navigate to “Library Package Manager”->”Package Manager Settings”. In the popup, check the box that says “Allow NuGet to download missing packages during build”. See screenshots below for more details.

More Things to Edit
1. Display name, description, initial navigation page, app icon, tile template, tile title, tile images. All these can be edited in the WMAppManifest.xml, found under “1 – UI”->WP8App->Properties->WMAppManifest.xml.
2. Images, including background image, can be found in WP8App->Images. Though, instead of viewing them in Visual Studio you may find it easier to view and edit using the file explorer.

Additional Resources
1. Microsoft’s main resource for Windows Phone
2. DevFish Wiki
3. Windows Phone Development Blog: Includes many great contests to win Microsoft products also.
4. This code is open sourced

2 Responses to “How To Edit App Studio Code”

  1. Testing the comment system, 123. ilI1L.

Leave a Reply

You must be logged in to post a comment.