Development of the first application for Windows Phone: Preparing the working environment. App Studio - a new version of the online application designer from Microsoft
Hi all! You've probably already heard the news that in the first 4 weeks More than 75 million people have already installed Windows 10. In this context, we are especially pleased to share with you an introductory article from Arseny Pechenkin from DataArt on how to start developing top ten applications.
For those who are unsure whether or not to install Windows 10 on their favorite machine, we offer a short overview of materials about the platform, development tools and new features available when developing applications.
I think everyone already knows where and how to get their copy of Windows 10 - we won’t dwell on this point. The installation is similar to installing Windows 8. If you are going to update the system, I strongly recommend making a backup of the files from the system disk.
Tools
What development tools can I use? You will need a new MS Visual Studio 2015. Visual Studio 2015 Community Edition and paid Professional and Enterprise editions are currently available.
Some time ago, almost all sections on development for Windows 10 led to sections about development for Windows 8.1, but after the release the documentation is gradually updated (taking into account the fact that the UWP platform for Windows 10 is a development of WinRT).
Online course at Microsoft Virtual Academy
For those who prefer an audio-visual format of getting to know the platform, there is an introductory course: A Developer's Guide to Windows 10.The course covers the main features of the platform, models and tools available for creating Windows applications. Several basic scenarios that are implemented in the application are considered: working with a small amount of memory, background execution of tasks, communication between devices, file and data management, and user interaction methods.
License and device unlocking
As with development for Windows 8/8.1, a developer license will be required. This is similar to the Windows 8/8.1 Developer License when you create your first project directly in Visual Studio (this is not the same as a store publishing account). To install applications on your devices, do not forget to unlock them:
Universal Applications
What's new for the developer? It was announced that the universal application can be run on any Windows 10 platform. This is implemented through a system of various APIs. That is, there is an API layer common to all platforms (Universal Windows Platform, UWP). If the application uses only its capabilities, it will work on all platforms with UWP.
If you need to use specific platform capabilities (for example, working with hardware buttons on a smartphone), then you can use the corresponding APIs through platform extensions. This functionality will only work on platforms that have these APIs, so checks for the availability of the corresponding methods and classes must be built into the code.
Templates
Out of the box in Visual Studio, we have access to only one project template, Blank App.
This is a Single Page Universal Windows Application project that has no predefined controls or structure.
In addition to the standard template, you can find templates from the developer community.
The collection currently includes the following project templates:
- Blank App, a basic single page XAML project. Similar to the standard Blank App included in the Windows 10 SDK, but without Application Insights telemetry.
- SplitView App, a multi-page application project with adaptive SplitView control.
- Composition App, a project that does not use the standard component library, instead using the Windows.UI.Composition API,
- Composition XAML App, a project using XAML and the Windows.UI.Composition API.
Examples
To make it easier to log into the UWP platform, Microsoft has prepared a growing collection of examples:Hi all!
My last post was written quite a long time ago and it’s time to correct this sad fact. Today I decided to break up the series of articles about Windows Azure and talk about another, no less attractive platform from Microsoft - Windows Phone.
As you probably already know, the operating system for mobile devices from Microsoft has been on the market for a long time (since 2010) and today occupies one of the leading positions, in some countries surpassing even the popular iOS in terms of the number of devices sold. Therefore, many developers both in Russia and around the world are already writing applications for this OS with might and main, reporting excellent sales and profits in the Windows Store.
Getting started developing apps for Windows Phone is actually quite easy. If you already know C# and have experience with WPF or Silverlight, then you can say that you know 80% of the necessary information. The fact is that the development platform for Windows Phone was initially based on Silverlight, and in the WP8 version it was replaced by a platform somewhat similar to it, although closer to WinRT. So if you have ever written applications in WPF, you know what MVVM is and what it is needed for, then go ahead, write applications for Windows Phone.
But what if you are not an experienced developer, but you really want to have your own unique application here and now that you can install on your phone and show off to your friends? This is what we will discuss in today’s article.
Windows Phone App Studio
I have always loved Microsoft because it provides its users and developers with very convenient tools for work. And in August, Microsoft introduced its new service, which will allow anyone, even those not familiar with programming at all, to create their own application for Windows Phone. It's called Windows Phone App Studio.
With this service, you can create a full-fledged application from scratch in just four steps. You can set your own styles, images and data, add a description and upload the result to the app store. However, you do not have to be a registered developer (an annual subscription costs $99). Now everyone can unlock one device for free and download up to two of their own apps to test them out.
I myself became interested in what capabilities this service has, and I decided to create a companion application for my mini-project Facts about Programming. I will now tell you about this in detail.
Step 0.1. Registration
In order to start using the service, you need to register your own LiveID account. I think there is no point in explaining what it is if you have ever used any service from Microsoft. Go to the App Studio website and click the Start Building button:
Enter your LiveID login and password and you will be taken to the management system for your applications. If this is your first time doing this, you will have an empty list. I already have the prog_facts application in my collection.
Step 0.2. Selecting an application type
In order to create your first application, you need to select the Create menu item. You will be offered two options - create an application using one of the available templates or configure everything from scratch.
There are a lot of ready-made templates. Among them there are templates for sports-related applications (for example, to track the results of your favorite team), family, entertainment, and many others. When you hover over a template, you will see a brief description of it, and when you select each of them, an additional window will open, which will demonstrate what this application can look like.
In my case, I decided not to rely on a template, but created the application from scratch by selecting the appropriate menu item create an empty app.
Step 1: Application Information
The very first and simplest step of the four for which we are promised to create an application is responsible for information about the future application. You will need to provide its name, a brief description and select a logo. The logo must be in PNG format and 160x160 pixels in size.
Notice the phone number displayed on the right. It always shows your application with the changes you make to it.
Step 2. Filling with content
Each application created through Windows Phone App Studio consists of sections. Each section is a set of pages interconnected by some kind of logic. For example, the data that can be displayed on this page. Let's create a new section in which we will use an RSS feed as a data source.
Here you need to set the name of the future section, select the type of data source (Collection, RSS, YouTube videos, Flickr images, Bing search and HTML5 content are available) and give it a name. After creating a section, we will be taken to the editing page.
The editing page is divided into several parts. In the Data Source section, you can manage the data source that is associated with this section. The Pages section contains a list of all pages that belong to the section. You will notice that we have created two pages by default. The first, called Blog, is the main page of the section, which contains entries read from the RSS feed. The second Info page was automatically generated and is responsible for displaying the details of each RSS entry when the user selects it from the list. We'll leave the section pages for now and edit the data source first. (and don’t forget to click Save Changes so that the section is saved in the project)
Step 2.1. Data source
Having selected a data source on the previous screen, we will be taken to the window for editing it. Since we have selected the RSS source type, we will be asked to specify the URL from which the data will be received. For this example, we will use the RSS feed located at
As soon as you click Refresh and save the results, on the main page of the application in the emulator you will immediately see that the data from the RSS feed is already displayed in your application. This is extremely convenient and useful, because you can immediately find out what the program will look like. For example, my RSS feed does not attach images to posts, so the App Studio builder substitutes default images that look out of place. Let's fix this.
Step 2.2. Editing the appearance of a page
By selecting one of the pages on the “Configure App Content” page in the Section Pages section, you will be taken to the window for editing it. There are several possible templates available for each page type. For the Blog page, which I initially want to fix, the default view for displaying posts and pictures is set. Let's select a view with only posts, adjusting the page title at the same time:
You can immediately see how the application has changed. Now the entries go one after another sequentially, which brings the appearance of the application to a minimalistic style. It is worth paying attention to the Item Title and Item Subtitle fields. Instead of simple text, there are now incomprehensible expressions (Data.Title) and (Data.Summary) written there. For those familiar with WPF, this can be compared to Data Binding. For the rest I will explain.
Since our section is built around the Data Source, we must be able to somehow obtain data from this source. These expressions just mean that in the corresponding fields we want to see information received from the RSS feed. Here the Data object represents one post from RSS, and the Title and Summary fields represent some specific part of this post. If you click on the icon to the right of the field, you will see the entire list of available fields of the Data object, among which there is information about the author of the entry, its date, link and several more.
Let's try to edit the Info page in the same way. A slightly different set of templates is available for it, among which we will choose the simplest and most suitable:
Everything on this page is approximately the same. The only thing is that instead of a Data object, Context is used here, which is essentially the same.
Step 2.3. Adding menus and other sections
In addition to simple sections, you can add a so-called menu to Windows Phone App Studio. This is a section that consists of a list of links to other sections or external sites. I decided to add a menu to the video sections of the site so that you always have quick access to useful information at your fingertips. Adding a menu is similar to a simple section and setting it up is not difficult. So I suggest you master this as homework.
Step 3. Styles
Having completed filling the application with sections, pages and menus, we move on to talking about beauty, namely style. In Section 3 “Configure App Style” you will be able to configure the base color scheme that will be used in your application. I chose the colors that are used in the blog - blue and white. Thus, the application turned out to be light and pleasant, although there is no arguing about tastes.
The Accent Brush color determines what your main accent color will be. It is responsible for the application header. The Background Brush, as you might guess, is responsible for the background color. You can also choose a picture if you think it is more appropriate than a solid color fill. Foreground Brush is the color of the fonts that will be used to display data in your application. Well, Application Bar Brush is the background color of the menu bar displayed at the bottom.
Step 3.1. Tiles
Tiles are an integral part of any application for Windows Phone. They can enhance your application by allowing the user to see additional information without opening the main program window. Of course, in Windows Phone App Studio you will not be able to create a smart tile that could independently update its appearance and load additional data from somewhere. However, you can choose from several standard behaviors using some static data. For example, for the glamcoder application I selected the Iconic Template tile type and will display a brief description of the application on it:
Step 3.2. Splash and Lock screens
These are additional decorations that will make your application look more elegant and presentable. A Splash Screen image is a picture that is displayed to the user while your application is loading. There, as a rule, it is customary to place the logo of your program or company in order to immediately make it clear to the user which application he is going to use at the moment.
The Lock Screen image is the picture that will be displayed on the lock screen. In fact, there is no particular practical sense in it, because this picture is static within the Windows Phone App Studio, and it is unlikely that the user will want to replace the colorful Bing wallpaper with your picture.
Step 4. Final
Well, we have reached the very last stage - creating our first application for Windows Phone. On the last page called Generate, the treasured option awaits us - to generate a package that we can later install on our device. Click the big Generate app button and wait for the magic to work.
After the generation is completed, you will see a corresponding message, as well as several options to choose from. First, you will receive an email from which you can download your application. Second, you can download the finished package file to your computer and then publish it in the application store. And the third option is that you can download the source codes of the resulting application to edit them. I advise you to use the third method. Firstly, this will give you more flexibility and you will be able to make changes that cannot be made in Windows Phone App Studio. And secondly, and this is the most important thing, you will be able to independently understand the application code, study how it works, so that next time you can write everything yourself.
Conclusion
The popularity of a particular mobile operating system these days is determined not by the functions it provides users out of the box itself, but by the applications that are available in the store and which allow you to expand the functionality of each device indefinitely. I often hear people who are less familiar with Windows Phone say that it is a backward system, that there are no necessary applications for it, and similar nonsense. None of this is true. The system is actively developing, every day more and more new, useful, and sometimes even exclusive applications appear.
I really hope this article inspires you to write your own first Windows Phone app. And I want to believe that the knowledge you acquire will help you create a new Instagram or new Angry Birds. And for this to happen as early as possible, go to the development portal for Windows Phone, study materials, watch video tutorials, and create.
Good luck and good applications!
- Windows Phone emulator
- Zune software
- XNA Game Studio 4.0
- Silverlight
- .NET Framework 4
Expression Blend for Windows Phone
Expression Blend for Windows Phone is a design software that lets you create and add special visual features such as gradients, animations and transitions. For some tasks, Expression Blend is easier to use than Visual Studio. The following list contains some tasks that are easily accomplished using Expression Blend.- Visually create data templates
- Use test data during development to visualize data patterns
- Visually styling controls
- Creating and viewing animation
Note:
This article describes working in Visual Studio 2010 Express for Windows Phone and will not use Expression Blend for Windows Phone.
Visual Studio 2010 Express for Windows Phone
Visual Studio 2010 Express for Windows Phone includes a drag-and-drop designer that simulates the appearance of a phone, a code editor, and a debugger. If you've worked with Visual Studio to develop other types of apps, you'll find the mobile app development environment very familiar. The following image shows the appearance of Visual Studio 2010 Express for Windows Phone.
The Windows Phone designer includes a Toolbox, Design view, XAML view, Solution Explorer, and Properties window similar to the standard Visual Studio designer. The two key differences are that in design mode the surface looks like a Windows Phone device, and there's a Target device that lets you choose whether you want to debug your app on the device or an emulator. The following image shows the appearance of the emulator in portrait and landscape orientation.
Design Guidelines
It is important that you are aware of established interface design principles if you plan to publish your Windows Phone application to the App Hub. Design guidelines describe how to design the user interface for your application.The following table provides a summary of the basic interface design principles and application requirements that you need to consider when designing and developing your application. A complete and up-to-date list of interface design guidelines can be found at the following link.
UI Design and Interaction Guide for Windows Phone 7
| Category | Design Guidelines |
|---|---|
| Navigation, Frames and Pages |
|
| Application panel |
|
| Back button |
|
| Screen orientation |
|
| Themes |
|
| Application Settings |
|
| Touch input |
|
| Screen keyboard |
|
| Canvas and Grid controls |
|
| Panorama and Pivot controls |
|
| Text |
|
Additional Resources
Below are some links to additional resources to learn more about Windows Phone development.| Resource | Description |
|---|---|
| Windows Phone App Hub | Additional documentation, code samples, and Windows Phone development community. |
| Windows Phone Development Documentation | Official documentation for Windows Phone development on MSDN. |
| Silverlight Documentation | Official documentation for Silverlight and Silverlight for Windows Phone on MSDN. |
| Code Samples for Windows Phone | Downloadable code examples that complement the Windows Phone documentation. |
| Windows Phone QuickStarts | A collection of short articles demonstrating the challenges and opportunities of developing for Windows Phone. |
| Windows Phone Developer Guide | A developer's guide describing the story of a fictitious company that decided to use Windows Phone 7 as a client device for an existing cloud application. |
| The Windows Phone Developer Blog | A blog that contains up-to-date information and announcements straight from the Windows Phone team. |
| Windows Phone 7 Development for Absolute Beginners | A series of videos for absolute beginners that do not require any programming skills. |
| Windows Phone 7 Jump Start | A series of videos for developers new to Windows Phone development using Silverlight or XNA. |
| Windows Phone 7 Training Course | Videos and hands-on tutorials on developing for Windows Phone using Silverlight or XNA. |
| .toolbox | Tutorials and other resources for designers to learn how to design a Windows Phone app. Includes tutorials on Expression Blend. |
| Jeff Wilcox Blog | Blog about Silverlight, Silverlight Toolkit and Silverlight for Windows Phone. Jeff Wilcox is a lead software developer at Microsoft on the Silverlight team. |
| Jeff Prosise Blog | A blog about various areas of .NET programming, including Silverlight and Windows Phone. Jeff Prosise is an experienced programmer and one of the founders of Wintellect. |
Before we begin exploring the platform's capabilities and developing applications, we need to make sure that we have all the necessary tools and understand some development basics.
Tools
Visual Studio 2010
To develop for Windows Phone you will need Visual Studio 2010 with Service Pack 1 Professional edition or higher. If you don't have Visual Studio 2010, installing the Windows Phone Development Tools will automatically install the free version of Visual Studio 2010 Express for Windows Phone, which can also be used to develop applications for Windows Phone.
Both versions of Visual Studio Integrated Development Tools provide the developer with the same on-device and emulator debugging capabilities that desktop app developers have on Windows.
Please note that in order to debug on the device, in addition to the device itself and the cable for connecting to the computer, you must have the Zune software (http://zune.net) installed on the computer with the development tools. Also, before deploying the application and debugging, you need to register the device (“unlock” it) using the Windows Phone Developer Registration Tool, which is installed with the Windows Phone SDK.
Windows Phone SDK
This package, available for download on the App Hub website http://create.msdn.com, contains everything you need to start developing. At the time of this writing, the latest version of the toolkit is available in Windows Phone SDK 7.1 Release Candidate under the “Go Live” license, with the ability to develop your own applications and publish them on the Windows Phone Marketplace. Windows Phone SDK 7.1 Release Candidate contains the following components:
- Windows Phone SDK 7.1
- Windows Phone Emulator
- Windows Phone SDK 7.1 Assemblies
- Silverlight 4 SDK and DRT
- Windows Phone SDK 7.1 Extensions for XNA Game Studio 4.0
- Expression Blend SDK for Windows Phone 7
- Expression Blend SDK for Windows Phone OS 7.1
- WCF Data Services Client for Windows Phone
- Microsoft Advertising SDK for Windows Phone
If you do not have Visual Studio 2010 Professional edition, Expression Bland 4, or XNA Game Studio 4.0 installed, the installation process will also download and install:
- Visual Studio 2010 Express for Windows Phone
- Expression Blend 4 for Windows Phone
- XNA Game Studio 4.0
Expression Blend and Expression Blend for Windows Phone
Expression Blend is an interactive visual designer for XAML, the interface description technology for Silverlight and Windows Presentation Foundation (WPF) applications. It's a great development tool that allows you to easily manipulate layers, animations, styles, and templates. This is a basic XAML development tool. Expression Blend itself is not free, but a special version for creating app designs for Windows Phone, called Expression Blend 4 for Windows Phone, is available to developers for free. It will be downloaded and installed during the Windows Phone SDK installation process if you do not have the full version of Expression Blend on your computer. You can read more about Expression Blend 4 on MSDN:
XNA Game Studio 4.0
Windows Phone Emulator
Although Windows Phone Emulator does not contain the full set of applications available on a real device, it provides a powerful environment that allows you to develop an application almost entirely in the emulator.
The Windows Phone Emulator does not support playing Zune media content. The emulator only comes with one built-in Internet Explorer application, but it is Internet Explorer 9 with HTML5 support.
At the same time, the emulator allows you to test calls and send SMS messages, supports multi-touch on monitors that support it, supports the simulation of a camera, geolocation services and accelerometer, and will also allow you to take screenshots.
Additional developer tools
Windows Phone Developer Registration Tool
Windows Phone Profiler
Windows Phone Profiler is available in the Debug menu of Visual Studio with the Windows Phone SDK installed.
.png)
Silverlight Toolkit for Windows Phone– A set of useful Silverlight controls for Windows Phone with design mode support, from the Silverlight team. All source code, examples and documentation are available. Updated approximately every three months, available at http://silverlight.codeplex.com or via NuGet.
The current release includes controls such as ContextMenu, DatePicker and TimePicker, ToggleSwitch, WrapPanel and GestureHelper.
Development environment
After installing the Windows Phone SDK, project groups for Silverlight for Windows Phone will appear in the New Project dialog in Visual Studio:
.png)
and projects for Windows Phone will be added to the XNA Game Studio 4.0 group:
.png)
This series of articles is focused on development for Windows Phone using Silverlight, so we will look at the templates available to application developers in a little more detail.
After installation, the developer has the following Silverlight for Windows Phone application templates at his disposal:
- Windows Phone Application
- Windows Phone Databound Application
- Windows Phone Class Library
- Windows Phone Silverlight and XNA Application
Before moving directly to application templates, I need to say a few words about Windows Phone and Windows 8-style UI.
Windows Phone and Windows 8-style UI
Windows Phone is not just another platform for mobile devices. It contains not only the technological component, but also a fully developed concept of interface design and user interaction called Windows 8-style UI or Windows 8-style UI style.
If you're a designer or have a dedicated designer on your team, you can take full advantage of the power of Expression Blend 4 or Expression Blend for Windows Phone, which comes with the Windows Phone SDK.
What to do if you are a developer and do not want to deal with the visual design of the application, for example, you are developing a business application and all that is required of it is to comply with the general design and style of Windows Phone?
Everything is very simple. Firstly, Silverlight for Phone is designed with the Windows 8-style UI in mind, so all the built-in controls are designed in the Windows 8-style UI style. Secondly, by default, applications created from templates provided by the Windows Phone SDK work, look, and use styles and fonts in accordance with the Windows 8-style UI.
On the other hand, the styling capabilities that Silverlight provides for XAML-based controls and applications are enough to make your application unique and recognizable while remaining within the Windows 8-style UI.
The UI Design and User Experience Guide for Windows Phone can be found at the following link
Everything that was said above applies, of course, to the design of regular applications, since the requirements for the design of gaming applications and their interface may differ significantly. At the same time, we must not forget about the general principles of user interaction inherent in the Windows Phone concept.
Application Templates
First, let's look at three templates that represent the three main styles of a Windows Phone app:
- Windows Phone Application
- Windows Phone Pivot Application
- Windows Phone Panorama Application
.png)
Windows Phone Application is an analogue of a simple conversational application that has one main screen through which the main interaction with the user occurs.
Windows Phone Pivot Application is a kind of bookmark application, where the title of each bookmark determines the content. The standard use case is that each bookmark represents the same data, but in different views and/or with different filtering. For example, calendar, email client and phone settings. The template uses a Pivot control.
Windows Phone Panorama Application - a panorama application in which user interaction areas are also divided into panels, but they are accessible through horizontal scrolling; the background image is set to the entire panorama at once, it has a common title that scrolls slower than the panels; the content of the adjacent panel on the right is visible when the current one is displayed. For example, hubs in Windows Phone are implemented in this way: People, Marketplace, Pictures, Music+Videos, etc. The template uses the Panorama control.
Templates ending with Agent are library templates for performing the corresponding background tasks:
- Windows Phone Audio Playback Agent
- Windows Phone Audio Streaming Agent
- Windows Phone Scheduled Task Agent
Windows Phone Databound Application template - a simple application template with a list - a detailed view with the implementation of navigation between pages, passing parameters and storing data in a global ViewModel.
Windows Phone Class Library Template – class library template for Windows Phone.
Windows Phone Silverlight and XNA Application template for a Silverlight application that can use XNA to render graphical content.
Starting today, all developers can contribute to the Windows 10 store. If you use this operating system, you can create your own app for it. You don't need to register as a developer or publish it on the store, but you can use it yourself or send it to your friends.
How to create an application for Windows 10?
Go to the website, log in to your Microsoft account and agree to the proposed terms.
The service's home page will open. Click on "Windows 10" and select "Empty App W10" from the templates section.
Come up with a name for your application, enter it in the appropriate field and click “Start with this one!”
You will be taken to the App Studio work panel. In the “Content” tab, you can fill the application with content from the RSS feed of any site and various services (Facebook, Twitter, YouTube, Instagram, Flickr, and so on). You can also use HTML code.
The layout of content on the application page can be configured by clicking the edit icon on the tile of any of the blocks. Changes are not saved automatically, so click the Save button occasionally.
In the “Themes” tab, you can select any of the prepared themes or modify an existing one so that it best suits your application.
In the “Tiles” tab, you can configure the application’s live tile. You can upload icons in different sizes.
The “Settings” tab is the final one. Here you can select the application language, add a description, link the project to your developer account and activate advertising.
At any time you can see how your application will look and work on a smartphone, tablet and computer. If you need to make edits, return to any tab and edit the content.
Download the archive with the application to your computer, unpack it into a folder, but do not rush to launch it.
Download the root certificate from the Microsoft website and install it. Then go to the Update & Security menu in your device settings and under the Developer options turn on Developer Mode.
