How does a student get a DreamSpark account for free software and store accounts?


    DreamSparkDreamSpark gives students access to free software, free Azure cloud services, and free store accounts for publishing apps, but how do you get it?

    DreamSpark (https://www.dreamspark.com/) is a program that provides students with free Microsoft software, the ability to try Azure cloud services without entering a credit card, and a store account. Chances are your school is already signed up for DreamSpark and all you need to do is create your own account to start reaping the benefits. But even if your school isn't signed up, if you are a student you can still get it. Here's how!

    To create your DreamSpark account go here and select Create Account

    You will be prompted to sign in with a Microsoft account (hotmail.com, live.com, outlook.com) if you don't have a Microsoft account you can create one here. You can use an existing email address (even gmail) for your Microsoft account.

    You will now see a screen where you specify your name, date of birth, preferred email, most of this is pre-populated based on the settings in your Microsoft account. Consider selecting the checkbox so Microsoft can let you know about programs and offers in your area. After you have completed all the required fields select continue to verify.

    Now, DreamSpark wants to verify that you are in fact a student. There are three ways to do this

    1. Get verified through my school email – If your school has a DreamSpark subscription, you can just provide your school email address to get verified


    2. Get verified through my school account– If your school has a DreamSpark subscription, but validates DreamSpark through school accounts rather than email addresses you can select this option. Most schools in Canada do not use this authentication method, so if you don't see your school listed it doesn't necessarily mean your school does not offer DreamSpark to its students! It just means they have chosen another method for authentication, you may want to try the email address option instead. If you choose the school account you have to search for your school in the list.



    3. I have an International Student Identity Card – This is not your university or college student ID card. this is the international student card (you can apply for one here) if you pick this option you can type in your ISIC serial number or the ISIC/CIP number or your ISIC/NUS card number to prove you are a student.

    4. I have a verification code – this option requires you to enter a verification code. But where do you get a verification code? You need to reach out to a Microsoft representative or possibly a school administrator. Attending a Microsoft hackathon or workshop is a great place to meet someone and find out how you can get a verification code. Entering a code will give you access to DreamSpark resources for one year.

    5. I can supply documentation – if none of the above options works, choose this option. You can provide a scanned copy of your school ID card, a current report card, or acceptance letter to a university or college as proof that you are a student to get validated.

    Once you have created and verified your account, you can now download software, get a code that allows you to publish apps to the Windows store for free and get free cloud services on Azure including website hosting!

    What are you waiting for get your DreamSpark account today!

  • Go DevMENTAL

    Join the Microsoft Team, become a Microsoft Student Partner!


    Become an MSP and bring technology and awesome opportunities to your campus! In this blog post I’ll explain what you need to do as an MSP and some of the great perks you get in return. So join now!


    The Microsoft Student Partner (MSP) program can be summarized in the following 4 words: “We believe in you!”

    For us, it is not about track records, it is all about passion. We want to see where your love for technology can take you. Of course we prefer people passionate about Microsoft technologies, but simply having the urge to find out more about them, regardless of whether you own an IPhone or an Android phone, is enough to get you in our MSP position.

    We have great MSPs all over Canada, some are working with their faculties student society, others directly with teachers, some even have their own start ups. You could be one of them! We want to know how you can help! What are your strengths and how we can empower you so you can shine!

    What is an MSP?

    A MSP is the point of contact between students and Microsoft. They help other students find out about the initiatives we put in place such as Developer movement and Imagine Cup. If you like free stuff or helping the world make sure to check those two links out. This last semester we had March App Madness Hack-a-thons which were coordinated events across Canada to teach and then let students develop their own Windows Phone 7 Apps! All thanks to our MSPs. They organized the events, gave tutorials and helped guide the rest of the students in the development of their app.

    We are always on the lookout for those highly energetic students that want to get involved with our technology! If you are one of them, apply now!

    Wait there’s more!

    The MSP position is not all about work. We have a line up of great rewards as a thank you for all the effort you put into it. For starters, MSP  get a full MSDN account. More than 5000$ value! (This convinced me when i joined. Nothing like Legal free software)

    If that is not enough, read the title of this section again!


    We want to help you Improve your career prospects. As a MSP, you are invited and engaged in most of our own and 3rd party conferences in your region. You will get to network with some of the top technology professionals and sometimes even with part of our leadership team. Recently, for instance, our MSPs in the Toronto region had the chance to sit down and chat in a round table with Microsoft Canada’s President Eric Gales. Every year brings new opportunities for you’ll get to take advantage of!

    Furthermore, this September, we will be having an international MSP virtual Summit. Where MSPs will get training and knowledge on how to present effectively, how to develop for different platform, how to take advantage of the technologies we have and much more!

    Remember that you will be directly engaging with Microsoft. Doing a great job as an MSP helps your chances of finding great opportunities!
    Being in the front lines lets you touch all the latest technology as early as possible.

    There are many other perks and goodies that you constantly receive from us. Join the team, get involved and get ready to shine!

    Apply now!

  • Go DevMENTAL

    Visual Studio Tips: Selection shortcuts for lazy coders


    VisualStudioLogoHere are a couple of tricks you may not know for selecting and editing text with as few keystrokes as possible.

    Don’t forget students can get Visual Studio Professional for free through DreamSpark!

    Find more Visual Studio tips and tricks here

    Cut, Copy, Paste: Three commands programmers use every day. Let’s face it, all coders are basically lazy: The less keystrokes the better. That’s why it’s nice to know the fastest way to select the text you want to cut, copy & paste. In this post I’ll share a few different techniques for selecting code. You probably know a couple of the tricks listed below, but did you know all of them? If you have any tricks of your own, please share!

    • How do I select one word at a time?
    • How do I select to end of line?
    • How do I select an entire line of code as quickly as possible?
    • How do I select multiple lines of code starting from a particular column?
    • Two Bonus tips (You have to scroll down to find them)

    How do I select one word at a time?

    You can select text using the keyboard as well as the mouse. If you put the cursor anywhere in the code and hold down the <SHIFT> key and then use the right or left arrow key, you can make a selection one letter at a time.


    If you hold down the <SHIFT> and <CTRL> keys then using the arrow keys will select one word at a time.

    selecting one word at a time

    How do I select to end of line?

    If you hold down the <SHIFT> key and then press the <END> key you select from the cursor location to the end of the line

    select to end of line

    How do I select an entire line of code as quickly as possible?

    I discovered this trick by accident, and fell in love with it. If you want to select an entire line of code, all you need to do is put the cursor anywhere on the line, do not make any selection at all and then do the desired command (Cut, copy, or paste). When there is no text selected, cut, copy and paste default to selecting the entire line. Try it!

    How do I select multiple lines of code starting from a particular column?

    Have you ever tried to select code on multiple lines? If you just start in the middle of a line of code and select multiple lines of code you end up with a selection like this:

    select multiple lines of code

    Now try holding down the <ALT> key as you make a multiple line selection. This works if you are selecting with the keyboard or the mouse.

    box select

    When you use the <ALT> key you get something called a box select. This can be useful if you are trying to copy a list of variable names, comments, or namespaces without the entire line of code.


    Okay if you actually scrolled down this far, here are the two bonus tips I promised.

    Not only can you select code over multiple lines with the <ALT> key, you can actually edit code on multiple lines as well. Let’s say you have a list of variables declared as private and you decide they need to be public. Use the <ALT> key to do a multiple line selection of the keyword private across all the declarations.

    box edit

    Now start typing the word public, as you type it will replace the selected text on each line with the new text you type

    box editing


    Last but not least, you can actually insert text on multiple lines of code using the box select technique as well. Let’s say I wanted to add some similar comment text after each variable declaration above. Use the <ALT> key to do a multiple line selection, but make your selection at the position in the line where you want to add the comments.

    box insert

    Now start typing the text you want to insert, as you type it will be added to all the lines.

    box insert

    If you like that multi-edit feature, you may also want to check out this neat little add-on for Visual Studio called MultiEdit Extension for Visual Studio. After you install the extension, if you hold down <ALT> while mouseclicking in the editor it will add multiple selection points wherever you clicked. Then you just type and your text is added to all the selected positions. Scott Hanselman wrote a blog post about it here. Thanks Andrew for pointing out this neat little extension.

    Happy coding!

  • Go DevMENTAL

    Step by Step Apps for non coders – Windows Phone App Studio


    clip_image001Windows Phone App Studio allows you to build elegant apps with nothing more than a web browser. In this post we take a detailed look at how to build an app using one of the provided templates

    Many people want to try building an app but don’t have the coding skills or don’t have the time to sit down and code an application from scratch. Windows Phone App Studio lets you build an app for Windows Phone (the preview actually includes Windows 8 apps as well) and all you need is a browser.

    In this post you will find step by step instructions to create an app using the My City template. This template is suitable for showcasing something like a city, attraction, region, university or college. You can find more how to posts and resources on our Windows Phone App Studio resources page.

    Don’t forget apps published in Canada could earn you rewards through the Developer Movement!

    In this post we will cover

    • Getting Started with Windows Phone App Studio
    • Starting a new project
    • Setting up your app sections
    • Adding data
    • Adding images
    • Checking data binding
    • Customizing detail pages
    • Adding extra functionality to detail pages
    • Adding additional sections (Collection, RSS Feed, Youtube Feed, Flickr Feed, Bing search, HTML5)
    • Customizing the Application Theme
    • Customizing the Tile for your application
    • Customizing the Splash screen and lock screen

    Getting Started with Windows Phone App Studio

    1. Go to Windows Phone App Studio and Sign in

    NOTE: You will need to sign in with a Microsoft account (you can easily create one at www.outlook.com if you don’t have one)



    2. If you are signing into Windows Phone App Studio for the first time you will be asked if the application can access your email addresses in your profile (because when you finish your project it will send you the files for your project by email.) Select Yes to continue.


    3. Indicate you accept the Windows Phone App Studio Agreement by clicking on the checkbox and selecting Register.


    Once you have successfully logged in to Windows Phone App Studio you will arrive on the My Projects page and you can start creating your first application!

    Starting a new project

    1. Select Start new project to start creating your first app.


    In this post we will explore the My City template and see how we can use it to create an app to show off a town, university, tourist attraction, or region.

    2. Select My City from the list of templates.


    A screen will appear confirming providing more detail about the template you selected. This is a great way to learn more about each of the templates. However we have selected the template we want so

    3. Select Create to create a new project based on the My City template.


    Setting up your app sections

    Now the fun starts! We get to start adding content to our application.

    You can see that there are a number of sections we can add: monuments, special places, history, photo album (you don’t have to use all these sections and you can rename sections as well).
    First things first, let’s give our application a new name, I am going to create an app for a quaint little town in the Ottawa area called Manotick. So I’ll change the App title to Manotick.

    1. Change the title to the name of your town, university, or the attraction you want to highlight in your app.


    Manotick is a pretty small village, so rather than having a section on monuments and one on special places, I am going to delete the section called monuments and then Edit the section called special places. Instead of deleting a section, you can Edit and rename the section.

    2. If there are more sections than you will need, delete the unnecessary sections. Then select Save.

    3. Choose the first section you want to modify and select Edit


    After I delete the monuments section, when I try to Edit special places I get a warning saying I have unsaved changes. One of the things you want to get in the habit of doing in this tool, is saving your changes. You should save your changes before you go to the next screen. If you forget, no big deal, you will get this warning. All you do is choose Stay on this page, and then choose Save to save your changes. Then you can go ahead and navigate to another page, in this case I have to save before I can Edit the special places section.

    clip_image018Now I can customize the Special places for Manotick.

    5. Rename the section if you wish by changing the Section title.

    I am going to change the section name to Hidden secrets.

    Now I have to choose the layout of how I want to display the list of Manotick’s hidden secrets. This will not be the layout page with all the details. This will be the page which lists Manotick’s hidden secrets so the user can choose an item of interest to get more information. If you click on different layouts you can see a preview of how the page would appear on the left. I plan to include images but I want a slightly different layout from the default.

    6. Click on different layouts to see how they appear in the preview, then select your preferred layout.

    clip_image020Adding Data

    Now of course I need to provide some data about the special places in my town to display in the application.

    1. Select the Data tab to start specifying the data for your app.

    You will be presented with two ways to store your data

    • Static resources (data is in the app) – select this option if you want your user to be able to use the application without an internet application. BUT! Storing the data in the app also means if you ever want to update the data, you will have to update the app in the store. So if you expect to be adding and updating data regularly you might want to go with dynamic resources
    • Dynamic resources (data is in the cloud) – select this option if you expect to be updating data or adding new data to the app over time. This option stores your app data in the cloud. That means when a user launches the app, the app will connect to the internet and download the data from the cloud. This does mean that the app cannot be used offline and will require downloading data to use.

    Since I am targeting people in North America who generally have decent data plans (I don’t think anyone in rural Malawi will be looking up restaurants and things to do in Manotick), I am going to choose Dynamic resources so that I can easily fix typos and add new data.

    2. Choose your preferred data storage option and then select Edit data to start adding your data (you will have to save before you edit the data).


    Now you can add data to your application. This template assumes that you want to provide a Title Subtitle, Image and Description for each item in the section.

    3. Type in the values you want for your application. Don’t forget to delete any rows you don’t want. You can import data from a spreadsheet as well, but for this example we will keep it simple and just type in our data.

    NOTE: I recommend saving your data after you add each row, sometimes you will get an error uploading an image and then the Save button gives you an error, and you have to leave the page and come back again. A little annoying, but nothing serious, just a good idea to save frequently, just in case.


    Adding Images

    When you click on the Image text box you will see a pop up windows that allows you to select an image from one of three locations:

    • My computer – choose this option to pick a picture you have stored on your PC or on a SD card in your computer.
    • My OneDrive account - OneDrive is free cloud storage provided by Microsoft so you can save and share documents and photos and then access those photos from other devices. If you have a Windows Phone, you can save pictures to OneDrive automaticall.
    • App Studio resources – this is a limited collection of stock photography you can use in your application.


    Any images you add must be between 100 and 1000 pixels in height and width. If you have an image that is too large, you can resize it using Microsoft Paint. Open the image in Paint. Choose Resize from the Toolbar. Select pixels and then specify a size between 100 and 1000 pixels for your resized image. Make sure the Maintain aspect ratio checkbox is selected so your image is not stretched or skewed when you resize it.


    Checking data binding

    1. After you have entered the data for your rows, use the back arrow beside the title Edit collection data to return to the section editor


    Now that we have added data to our app, take a glance down at the bottom of the section editor. Notice the Bindings. That is what determines the text displayed in the list of entries for this section. When a user runs the app and taps on a particular entry they will see more details about that entry.


    If I ran my app right now, the screens would look like this:




    I don’t have that much information so I would like to have the image and the text appear on the same page when someone clicks on an entry in the list. Let’s go back to the section editor and see how you can customize the way details are displayed.

    Customizing detail pages

    Up until now we have only looked at the first page in the layouts which provides a list of the data in our app, the remaining pages determine how the rest of the data will be displayed when a user selects an entry


    So if I want to show the image and the description on a single page, I need to select the second page, and then pick a layout that allows an image and a description. I’ve found a layout that will allow me to display all the details on a single page. For my application, I think that layout will work perfectly! Once again I can see a preview on the left and I can control the data that is displayed on the page using the Bindings at the bottom of the page.



    You can have as one or more detail pages, do whatever makes sense for your application. For each detail page, you control the layout and use the bindings to control the data you want displayed. When you have multiple detail pages the user will scroll horizontally to move between detail pages.

    1. Select a detail page layout

    2. Set the bindings to control what values are displayed on each detail page

    3. If necessary add additional detail pages so a user will be able to scroll through the details pages and see all the data for the selected entry

    4. Delete any unused detail pages

    After I finish my changes my pages look like this



    Adding extra functionality to your detail pages

    You might have noticed a few extra sliders in the bottom right corner of the detail page editor.

    These features are all enabled by default, all the user has to do to use the features is bring up the app bar on their phone


    These features are all enabled by default, all the user has to do to use the features is bring up the app bar on their phone.



    This feature gives the user the ability to have text on the screen read aloud by the phone. You choose which field is read aloud by selecting the binding field as you build the app. The default is the Description field.

    To use this feature the user just selects the read icon on the app bar.



    This feature will allow the user to Share the text on the screen with someone by email, by text message or by tap and send.

    To use this feature, the user just selects share on the app bar and then they select the method they want to use to share the information on the page.




    This feature allows the user to create a tile on their phone that will take them directly to this detail page.

    To use this feature, the user just selects pin to start on the app bar and then a tile is added to their start screen.




    1. For each of your detail pages, use the sliders to determine which features you want to enable for your users.

    Adding more sections (if needed)

    1. For each section in your app, Edit the section and repeat the process you just completed specifying a name, data, layouts an dfeatures for the main page and detail pages.

    You can have up to 6 sections in your app, you can add new sections as well from the main content page. If you want another section like the ones we were working on already, add a Collection.

    Adding a collection section


    If you want the same basic columns (Title, Subtitle, Description and Image) choose Add Default columns when you add the collection.


    When you edit your new section, you will have to specify the bindings yourself to tell the application what data to display on the summary page.


    Adding an RSS feed section

    If there is an RSS Feed you wish to include in your app, you can easily add a section for that to your app (but remember you are only allowed a maximum of 6 sections)

    Click on the RSS section type to add the new section to your app


    Specify a name for your new section and the URL, the URL of the RSS feed and select Confirm


    Don’t forget to edit your new section and pick a suitable layout for the listing page and the detail pages.

    If you can’t see any data in the preview on the left you probably have a mistake in your URL.

    If you need to change the RSS URL, go to the DATA tab of the section.

    Adding a Youtube section

    If there is an Youtube channel you wish to include in your app, you can easily add a section for that to your app (but remember you are only allowed a maximum of 6 sections)

    Click on the Youtube section type to add the new section to your app


    Give your new section a name.

    Specify the videos to include by Youtube user name or by Youtube search criteria.

    Select Confirm to create the new section.


    Don’t forget to edit your new section and pick a suitable layout for the listing page and the detail pages. If you can’t see any data in the preview on the left you probably have a mistake in your username or search criteria

    If you need to change the search criteria, go to the DATA tab of the section.

    Adding a Flickr section

    If there is a Flickr account with photos you wish to include in your app, you can easily add a section for that to your app (but remember you are only allowed a maximum of 6 sections)

    Click on the Flickr section type to add the new section to your app


    Specify a section name

    A Flickr user name or search criteria to determine which Flickr photos are displayed.


    Don’t forget to edit your new section and pick a suitable layout for the listing page and the detail pages.

    If you can’t see any data in the preview on the left you probably have a mistake in your username or search criteria

    If you need to change the search criteria, go to the DATA tab of the section.

    Adding a Bing section

    You can include Bing search results right inside your app with a Bing section. Users will be able to tap a search result and be brought to the web page selected in the search results.

    To add a Bing section to your app select the Bing section.


    Specify the section name, country to use for the search context, and search phrase. You may want to try a few different phrases in Bing search to find the phrase that provides the most helpful results for your application.


    Don’t forget to edit your new section and pick a suitable layout for the listing page. There won’t be detail pages for a Bing page, because if someone selects a search result the app will launch the browser and take them to the selected web site.

    If you can’t see any data in the preview on the left you probably have a mistake in your search criteria

    If you need to change the search criteria, go to the DATA tab of the section.

    Adding an HTML5 section

    If none of the above section types will do you what you need, you can also add an HTML5 section which basically allows you to write your own HTML5 code to control the data and appearance of the section. Explaining how to write your own HTML data is more than we will get into in this document, but it’s nice to know you have that option when you need it!

    Finish adding your app sections and data

    1. Add the remaining sections to your application based on the type of data you want to include. Delete any sections you are not using.

    I now have a beautiful functional phone application that lets my user explore hidden secrets of Manotick, local restaurants, photos, videos, and news about the village.







    Customizing the application theme

    In addition to being able to modify the data, layout and functionality of your application. You can also change the look and feel.

    1. Select the Themes Tab for your application.

    There are three pre-built themes you can choose as a starting point. Simply select the theme whose look and feel you prefer and customize the color to suit your needs.

    2. Choose the foreground color, background color, application bar color and even a background image to display.

    I like the idea of a background image showing the beauty of Manotick in the background so I am going to go with the Custom style and change the colors and image to something better suited to the content.


    Customizing the tile for your application

    You can customize the tile that appears on the Start screen for your user. There are three tile styles to choose from

    • Flip template – The flip template is eye catching because when on the start screen it will occasionally flip from front to back. You can provide an image and title for the front and an image and title for the back of the tile that appears when it flips.
    • Cycle template – This is another eye catching template because it will cycle through up to nine images you provide grabbing the user’s attention.
    • Iconic template – This is the classic template which displays an icon and title for your app. You will have to specify different icon sizes since the user could choose to display the tile in different sizes on their start screen.

    1. Select the tile template you want for your application

    For an app that is trying to show off a quaint village, I think the Cycle Template will work well because it will allow me to show the users different aspects of Manotick and should be fairly eye catching.

    Each template will require slightly different content, but basically each will require some sort of title, some sort of icon (possibly different sizes of the icon for different size tiles) and either images which you upload to display on the tile, or for the cycle template a section which contains image the app can cycle through.

    You will always have to provide some sort of image or icon for a basic tile because for the app listing page. This icon has to be 160x160 pixels. Remember you can use Microsoft Paint to crop and resize images.

    I have selected the Cycle template so I have to specify

    • A title to display on the tile
    • Image to use for the icon

    A section that contains image data to use as the image source. Flickr and RSS feeds won’t work, it will need to be a section where you have provided specific image content.


    2. Specify a title, images and icon for your selected tile template

    Customizing the Splash screen and lock screen background

    If you go the Tiles tab you can also edit the Splash screen and lock screen for your application.

    1. Select the SPLASH & LOCK tab in the Tiles section


    When you select Edit you are asked to select an image to use as the background. I am going to select images of the Mill since that is the best known landmark in Manotick. I will use that image for both the splash and lock screens.

    2. Select Edit for the Splash Screen background and specify an image to display in the background

    3. Select Edit for the Lock Screen background and specify an image to display in the background

    The finished app!

    You have now customized the data, layout and appearance of my app. The finished result of the app I was building looks like this:




    Now I see that the text is a little hard to read with my selected colors and background image, so I might want to make the background image more faded (you can’t do that in Microsoft Paint, so I actually used Microsoft PowerPoint which has some features for editing images. I added my image to a slide in PowerPoint than used the image editing tool, then I moved the image back to Microsoft Paint and saved it for use in my application)

    I have created a faded version of my image and decided to make the text and app bar the same color and now I get something more like this. I should warn you I am infamous for making really ugly screens, so for me this is actually a pretty nice looking app! Usually I ask someone else to fix up my color and layout, but I might just publish this as is!


    Phew! Okay give yourself a pat on the back! You have now created an app. Next up we will learn how you can take that app from Windows Phone Studio and either run it in Visual Studio (that’s how I got all my screenshots, the preview is great, but I ran it in the emulator to check the look and feel) or publish it to the store!

  • Go DevMENTAL

    Comment créer une application de A à Z sans savoir programmer – Windows Phone App Studio


    Windows Phone App Studio permet de créer des applications élégantes en se servant uniquement d’un navigateur Web. Dans cet article, nous verrons en détail comment développer une application en utilisant l’un des modèles de template (gabarit) proposés.

    Note: Merci Christian Hissibini  pour avoir traduit cette poste! This blog post is also available in English. Pour savoir comment publier ton application cherchez l'article publication des applications Windows Phone App Studio

    La plupart des gens ont le désir de créer des applications, mais souvent sont heurtés par la complexité de la programmation ou tout simplement n’ont pas le temps de s’asseoir et coder une application à partir de zéro. Windows Phone App Studio vous permet de créer des applications Windows Phone (La version actuelle inclus également les applis Windows 8) à l’aide du navigateur comme seul outil.

    Dans cet article, vous trouverez des instructions pas-à-pas pour créer une appli utilisant le template (gabarit) My City. Ce template est indiqué pour mettre en vedette des lieux comme une ville, une région, une attraction, une université ou un collège.

    N’oubliez pas, les applications publiées au Canada peuvent vous faire gagner des récompenses à travers le Mouvement des Développeurs!

    Cet article couvre les sections suivantes :

    • Débuter avec Windows Phone App Studio
    • Démarrer un nouveau projet
    • Paramétrer les sections de votre application
    • Ajout de données
    • Ajout d’images
    • Vérification de la liaison de données
    • Personnalisation de la page de détails
    • Ajout de fonctionnalités supplémentaires à la page de détails
    • Ajout de sections additionnelles (Collection, Flux RSS, Flux Youtube, Flux Flickr, Recherche Bing, HTML5)
    • Personnalisation du thème de l’application.
    • Personnalisation de la tuile de l’application.
    • Personnalisation des écrans de démarrage (Splash Screen) et de veille (Lock Screen) de l’application.

    Débuter avec Windows Phone App Studio

    1 – Allez sur Windows Phone App Studio et se connecter.

    Note : Vous avez besoin de vous connecter à l’aide d’un compte Microsoft (Si vous n’en possédez pas, vous pouvez créer facilement un à partir de www.outlook.com)


    2 – Si vous vous connectez pour la première fois sur Windows Phone App Studio, il vous sera demandé une autorisation pour que l’application puisse accéder aux adresses emails de votre profil (car lorsque vous finirez un projet, elle vous enverra les fichiers de votre projet par email.). A cette étape, sélectionnez Yes (oui) pour continuer.


    3 – Indiquez que vous acceptez les termes de licence de Windows Phone App Studio en cochant la case et sélectionnez Register (s’enregistrer).


    Une fois que vous êtes connectés avec succès dans Windows Phone App Studio, vous arrivez sur la page My Projects (Mes Projets) et vous pouvez créer votre première application.

    Démarrer un nouveau projet

    1 – Sélectionnez Start new project pour lancer la création de votre première application.


    Dans cet article, nous explorerons le template My City et verrons comment l’utiliser pour créer une application pour mettre en vedette une ville, une université, une attraction touristique, ou une région.

    2 – Sélectionnez My City dans la liste des templates.


    Un écran de confirmation comportant des détails du modèle de template choisi apparaîtra. Ceci est un bon moyen pour apprendre d’avantage sur les usages des différents templates. Cependant, nous avons sélectionné les template que nous désirons, alors on passe à l’étape suivante.

    3 - Sélectionnez Create pour créer un nouveau projet basé sur le template My City.


    Paramétrer les sections de votre application

    A présent, passons au jeu ! Nous allons commencer par ajouter du contenu à notre application.

    Vous remarquerez qu’il y a un certain nombre de sections que nous pouvons ajouter : Monuments, Histoire, Lieux spéciaux, Album photo (Nous n’avons pas besoin de nous servir de toutes ces sections et il est possible également de renommer ces sections).

    En première des choses, nous allons donner un nom à notre application. Dans notre exemple, nous créons une application pour une petite ville pittoresque située dans la zone d’Ottawa et qui s’appelle Manotick. Donc remplaçons le titre de l’application par Manotick.

    1 – Remplacez le titre par le nom de votre ville, université, ou de l’attraction que vous désirez mettre en vedette dans votre application.


    Manotick est un joli petit village, donc plutôt que d’avoir une section pour les monuments et une autre pour les lieux spéciaux, nous allons supprimer la section appelée Monuments and éditer celle appelée special places. Au lieu de supprimer une section, vous pouvez l’éditer et renommer la section.

    2 – S’il y a plus de sections que vous n’en désirez, supprimez celles qui vous sont inutiles. Et sélectionnez Save (sauvegarder)

    3 - Choisissez la première section que vous désirez modifier et sélectionnez Edit.


    Après, avoir supprimé la section Monuments, si nous essayons d’éditer special places, nous recevons une alerte mentionnant que certaines modifications ne sont pas encore enregistrés. L’un des réflexes que vous devez avoir dans l’usage de cet outil, c’est la sauvegarde des modifications effectuées. La sauvegarde est impérative avant le passage à l’écran suivant. S’il arrive que vous oubliiez, pas de soucis, vous recevrez un message d’alerte. Et tout ce que vous aurez à faire sera de rester sur la page courante, et choisir Save pour sauvegarder vos modifications. Après quoi vous pourrez avancer dans votre navigation vers une autre page.
    Dans notre exemple, nous avons sauvegardé avant, ce qui fait que nous pouvons éditer la section special places.


    A présent, nous pouvons effectuer des personnaliser la section special places pour Manotick.

    5 – Renommez la section si vous le désirez en modifiant Section title (Titre de la section).

    Dans notre cas, nous remplaçons le nom de la section par Hidden secrets.

    A présent, nous devons choisir la disposition (layout) de page et la manière dont nous voulons afficher la liste des Hidden secrets de Manoticks. Il ne s’agit pas ici de la disposition de page comportant tous les détails, mais de la page listant les Hidden secrets et à partir de laquelle l’utilisateur pourra choisir un élément d’intérêt afin d’en avoir plus informations. Si vous cliquez sur d’autres dispositions (layout), vous pourrez voir à gauche de l’écran, une prévisualisation de la manière dont la page apparaîtra. Dans notre exemple, nous prévoyons d’inclure des images, mais nous voulons une disposition légèrement différente de celle qui est offerte par défaut.

    6 – Cliquez sur des dispositions (layout) différentes pour voir leur apparence dans la prévisualisation, puis sélectionnez la disposition qui vous convient le mieux.


    Ajout de données

    A ce stade, bien entendu, nous devons fournir certaines données concernant les lieux spéciaux de notre ville afin de les afficher dans l’application.

    1 – Sélectionnez l’onglet Data pour commencer à spécifier les données dans votre application.

    Vous serez amenez à utiliser deux moyens pour stocker vos données.

    · Static resources (Ressources Statiques : les données sont contenues dans l’application) – Sélectionnez cette option si vous désirez que l’utilisateur soit capable de se servir de l’application sans une connexion Internet. Mais sachez que stocker des données dans l’application veut aussi dire que pour mettre à jour ces données, il vous faudra soumettre une mise à jour de l’application sur le store.

    · Dynamic resources (Ressources dynamiques : Les données sont dans le nuage) – Sélectionnez cette option si vous prévoyez de temps en temps mettre à jour vos données ou ajouter de nouvelles données à l’application. Cette option implique le stockage des données sur le nuage. Ce qui signifie que lorsque l’utilisateur lance l’application, cette dernière se connectera à Internet et téléchargera les données à partir du nuage. Ceci veut dire que l’application ne pourra pas être utilisée hors ligne et aura besoin de télécharger des données pour utilisation.

    Vu que nous ciblons des utilisateurs en Amérique du Nord qui généralement ont des forfaits de données décents (Nous ne pensons pas qu’une personne vivant dans un village du Malawi viendra rechercher des restaurants et choses à faire à Manotick), nous choisissons Dynamic resources, comme ça, nous pouvons facilement corriger les fautes de frappe et ajouter de nouvelles données.

    2 – Choisissez l’option de stockage de données qui vous convient et ensuite sélectionnez Edit data pour commencer à ajouter vos données (Bien entendu, vous devez sauvegarder avant d’éditer les données).


    A présent, vous pouvez ajouter des données à votre application. Ce modèle de template suppose que vous voulez fournir un titre, un sous-titre, une image et une description pour chaque élément dans la section.

    3 – Entrez les valeurs que vous désirez pour votre application. N’oubliez pas de supprimer les lignes dont vous n’avez pas besoin. Vous pouvez aussi importer vos données à partir d’un tableur, mais dans notre exemple, nous allons garder le cap sur la simplicité en entrant nos données au clavier.

    Note : Nous recommandons de faire une sauvegarde de vos données après l’ajout de chaque ligne. Quelques fois, il vous arrivera de recevoir une erreur pendant l’upload d’une image, juste après avoir cliqué sur le bouton Save, et vous serez amené à quitter la page pour y revenir après. C’est un peu ennuyant, mais rien de sérieux, donc pensez à sauvegarder fréquemment pour le cas où.



    Ajout d’images

    Quand on clique sur la zone de texte image, une fenêtre pop-up apparaît et nous permet de sélectionner une image à partir d’une des trois ces endroits.

    • My computer - Choisissez cette option pour sélectionner une image stockée dans votre PC ou dans une carte SD dans votre ordinateur.
    • My OneDrive account – OneDrive est une unité de stockage gratuite sur le nuage, offerte par Microsoft et qui permet de sauvegarder et partager des documents et photos, et les rend disponibles à partir d’autres appareils. Si vous avez un Windows Phone, vous pouvez sauvegarder automatiquement vos images sur OneDrive.
    • App Studio resources – Il s’agit d’une collection limitée d’images que vous pouvez utiliser dans votre application.


    Chaque image que vous ajoutez doit avoir une hauteur et une largeur situées entre 100 et 1000 pixels. Si vous possédez une image très large, vous pouvez la redimensionner en utilisant l’outil Paint. Pour cela, il suffit d’ouvrir l’image dans Paint. Choisir Redimensionner à partir de la barre d’outils. Sélectionner pixels et spécifier une taille entre 100 et 1000 pixels pour votre image redimensionnée. Assurez-vous que la case maintenir l’aspect ratio est cochée, pour éviter que votre image ne soit étirée ou déformée pendant le redimensionnement.


    Vérification de la liaison de données

    1 – Après avoir entré les données dans les lignes, utilisez la flèche de retour à côté du titre Edit collection data pour retourner à l’éditeur de section.


    A présent que nous avons ajouté des données dans notre application, lancez un coup d’œil au bas de l’éditeur de section. Remarquez les liaisons. C’est ce qui détermine le texte qui sera affiché dans la liste des entrées pour cette section. Lorsqu’un utilisateur lance l’application et tape sur une entrée en particulier, il verra plus de détails concernant cette entrée.


    Si nous lançons notre application là maintenant, les écrans ressembleront à ceci :

    image image image

    Pour notre exemple, nous ne disposons pas d’autant d’informations, de ce fait, nous désirons que lorsque quelqu’un clique sur une entrée de la liste, l’image et le texte apparaissent dans la même page. Retournons dans notre éditeur de section et voyons comment personnaliser la manière dont les détails s’afficheront.

    Personnalisation de la page de détails

    Jusqu’à présent, nous avons juste regardé la première page dans les mises en page, fournissant une liste de données dans notre application. Les pages restantes déterminent comment le reste de données seront affichées lorsque l’utilisateur aura sélectionné une entrée.


    Donc comme nous voulons afficher l’image et la description dans une seule page, nous devons sélectionner la seconde page, ensuite choisir une disposition ou mise en page qui admet image et description. Nous avons trouvé une disposition que nous permet d’afficher tous les détails dans une seule page. Pour notre application, nous pensons que cette disposition est ira à merveille ! Une fois de plus, nous pouvons voir une prévisualisation à gauche de l’écran et contrôler les données affichées sur la page utilisent les liaisons au bas de la page.


    Vous pouvez avoir une ou plusieurs pages de détails, optez pour ce qui donnera plus de sens à votre application. Pour chaque page de détails, vous avec le contrôle sur la disposition et la liaison de données pour vérifier les données que vous souhaitez afficher.
    Lorsque vous avec plusieurs pages de détails, l’utilisateur défilera horizontalement pour se déplacer entre les pages de détails.

    1 – Sélectionnez une disposition (ou mise en page) de page de détail

    2 – Paramétrez les liaisons pour contrôler quelles valeurs seront affichées dans chaque page de détail.

    3 – Si nécessaire, ajouter des pages de détails additionnelles, pour que les utilisateurs soient capables de défiler horizontalement entre les pages de détails et voir toutes les données pour l’entrée sélectionnée.

    4 – Supprimer les pages de détails non utilisées

    Après toutes ces modifications, nos pages ressemblent à ceci :

    image image

    Ajout de fonctionnalités supplémentaires à la page de détails

    Vous avez sans doute remarqué quelques boutons coulissants dans le coin droit au bas de l’éditeur de page de détails.


    Ces fonctionnalités sont activées par défaut. Tous les utilisateurs y ont accès en faisant apparaître la barre d’application de leur téléphone.



    Cette fonctionnalité permet à l’utilisateur d’obtenir une lecture vocale du texte apparaissant à l’écran par le téléphone. Le texte lu par défaut est le champ de description.

    Pour se servir de cette fonction, l’utilisateur n’aura qu’à sélectionner l’icône read(lecture) sur la barre d’application.



    Cette fonctionnalité permet à l’utilisateur de partager le texte apparaissant à l’écran avec quelqu’un d’autre via un courriel, un message texte, ou un tap and send (tapez et envoyez).

    Pour se servir de cette fonction, l’utilisateur n’aura qu’à sélectionner share (partager) sur la barre d’application et ensuite sélectionner la méthode qu’il voudra utiliser pour partager l’information de la page.

    image image


    Cette fonctionnalité permet à l’utilisateur de créer une tuile sur le menu d’accueil de son téléphone et celle-ci lui permettra d’accéder directement à la page de détails concernée.

    Pour se servir de cette fonction, l’utilisateur n’aura qu’à sélectionner pin to start (Épingler à l’accueil) sur la barre d’application et la tuile sera ajoutée à l’écran d’accueil.

    image image

    1 – Pour chaque page de détails, utilisez les boutons coulissants pour déterminer les fonctionnalités que vous désirez activer pour vos utilisateurs.

    Ajout des sections additionnelles (si nécessaire)

    1 – Pour chaque section de votre application, modifiez la section et répétez le processus que vous venez de terminer, c’est-à-dire spécifier un nom, des données, une disposition ou mise en page, et des fonctionnalités pour la page principale et les pages de détails.

    Ajout d’une collection de sections


    Si vous désirez avoir les mêmes colonnes de base (Titre, Sous-titre, Description et Image) choisissez Add Default Columns pendant l’ajout de la collection.


    Pendant la modification de votre nouvelle section, vous devrez spécifier les liaisons de données vous-même afin d’indiquer à l’application quelles données vous voulez afficher au résumé de page.


    Ajout d’une section de flux RSS

    S’il y a un flux RSS que vous désirez inclure dans votre application, vous pouvez le faire facilement en ajoutant une section dédiée (mais gardez à l’esprit qu’un maximum de 6 sections est autorisé).

    Cliquez sur la section de type RSS pour ajouter une nouvelle section à votre application.


    Donnez un nom à votre section et l’URL (ici l’URL du flux RSS) et sélectionnez Confirm


    N’oubliez pas de modifier votre nouvelle section et de choisir une disposition adaptée pour la page de listage et les pages de détails.

    Si vous ne voyez aucune donnée dans la prévisualisation à gauche de l’écran, il se peut qu’il y ait une erreur dans votre URL.

    Si vous désirez changer l’URL du flux RSS, allez sur l’onglet DATA de la section.

    Ajout d’une section Youtube

    Si vous désirer inclure une chaîne Youtube dans votre application, vous pouvez facilement ajouter une section à votre application (Bien entendu, n’oubliez pas la limitation de 6 sections au maximum)

    Cliquez sur la section de type Youtube pour ajouter une nouvelle section à votre application.


    Donnez un nom à votre nouvelle section.

    Indiquez les vidéos que vous désirez inclure par le nom d’utilisateur Youtube ou par un critère de recherche Youtube.

    Sélectionnez Confirm pour créer la nouvelle section.


    N’oubliez pas de modifier votre nouvelle section et de choisir une disposition adaptée pour la page de listage et les pages de détails. Si vous ne voyez aucune donnée dans la prévisualisation à gauche de l’écran, il se peut qu’il y ait une erreur dans le nom d’utilisateur Youtube que vous aviez entré ou le critère de recherche.

    Si vous désirez changer le critère de recherche, allez sur l’onglet DATA de la section.

    Ajout d’une section de Flickr

    S’il y a un compte Flickr avec des photos que vous désirez inclure dans votre application, vous pouvez le faire facilement en ajoutant une section dédiée (mais gardez à l’esprit qu’un maximum de 6 sections est autorisé).

    Cliquez sur la section de type Flickr pour ajouter une nouvelle section à votre application.


    Donnez un nom à la section.

    Un nom d’utilisateur Flickr ou un critère de recherche pour indiquer les photos à afficher.


    N’oubliez pas de modifier votre nouvelle section et de choisir une disposition adaptée pour la page de listage et les pages de détails.

    Si vous ne voyez aucune donnée dans la prévisualisation à gauche de l’écran, il se peut qu’il y ait une erreur dans votre URL.

    Si vous désirez changer le critère de recherche, allez sur l’onglet DATA de la section.

    Ajout d’une section Bing

    Vous pouvez inclure les résultats d’une recherche Bing dans votre application grâce à la section Bing. Les utilisateurs auront la possibilité de taper sur un résultat de recherche et atterrir sur la page Web relative.

    Pour ajouter une section Bing à votre application, choisissez la section Bing.


    Spécifiez le nom de la section, le pays d’utilisation pour le contexte de recherche, et la phrase de recherche. Vous aurez probablement besoin d’utiliser quelques phrases différentes de recherche Bing afin de trouver la phrase qui fournira les résultats les mieux adéquates pour votre application.


    N’oubliez pas de modifier votre nouvelle section et de choisir une disposition adaptée pour la page de listage. Il n’y a pas de page de détails pour la page Bing, ceci tout simplement parce que si quelqu’un sélectionne un résultat de recherche, l’application lancera le navigateur et ouvrira le site web concerné.

    Si vous ne voyez aucune donnée dans la prévisualisation à gauche de l’écran, il se peut qu’il y ait une erreur dans le critère de recherche que vous avez entré.

    Si vous désirez changer le critère de recherche, allez sur l’onglet DATA de la section.

    Ajout de la section HTML5

    Si aucun des types de sections ci-dessus ne fait pas que ce que vous désirez, vous pouvez aussi ajouter une section HTML5 qui fondamentalement, vous permettra d’intégrer votre propre code HTML5 pour contrôler les données et l’apparence de la section. Expliquer comment écrire votre propre code HTML va au-delà de la couverture de cet article, mais il était nécessaire de vous signaler la disponibilité de cette option.

    Finalisation de l’ajout des données et sections de votre application

    1 – Ajoutez les sections restantes à votre application considérant le type de données que vous voulez inclure. Supprimer les sections que vous n’utilisez pas.

    Nous avons à présent, une belle et fonctionnelle application qui permet à l’utilisateur d’explorer les hidden secrets de Manotick, les restaurants locaux, photos, vidéos et informations à propos du village.

    image image image
    image image image

    Personnalisation du thème de l’application.

    En plus de pouvoir modifier les données, mise en page et fonctionnalités de votre application, vous pouvez aussi changer son style et son apparence.

    1 – Sélectionnez l’onglet Themes pour votre application.

    Il y a trois thèmes préconstruits que vous pouvez choisir comme point de départ. Il suffit tout simplement de choisir le thème dont vous préférez le style et l’apparence et personnaliser les couleurs pour s’accorder à vos besoins.

    2 – Choisissez la couleur de premier-plan, la couleur d’arrière-plan, la couleur de la barre d’application et même l’image d’arrière-plan pour l’affichage.

    Pour notre exemple, nous aimons l’idée d’une image d’arrière-plan montrant la beauté de Manotick en arrière-plan. Donc nous irons avec le Custom style (style personnalisé) et changer les couleurs et l’image pour quelque chose qui s’accorde mieux au contenu.


    Personnalisation de la tuile de l’application

    Vous pouvez personnaliser la tuile qui apparaît à l’écran d’accueil pour vos utilisateurs. Il y a trois types de styles de tuiles.

    • Flip template – le flip template est accrocheur parce que lorsqu’on est sur l’écran d’accueil, occasionnellement la tuile se retourne de l’avant vers l’arrière. Vous pouvez fournir une image et un titre pour l’avant et une image et un titre pour l’arrière de la tuile qui apparaît après retournement.
    • Cycle template – C’est un autre template saute-à-l’ œil parce qu’il fera défiler jusqu’à neuf images que vous fournirez pour capter l’attention de l’utilisateur.
    • Iconic template – Il s’agit ici du template classique qui affiche une icône et un titre pour votre application. Vous aurez à spécifier des tailles d’icônes différentes, de ce fait, l’utilisateur pourra choisir d’afficher la tuile dans différentes tailles sur leur écran d’accueil.

    1 – Sélectionnez le template de tuile que vous désirez pour votre application.

    Pour une application qui essaye de montrer un village pittoresque, nous pensons que le Cycle Template fonctionnera bien car il nous permet de montrer à l’utilisateur les différents aspects de Manotick et devrait être assez accrocheur.

    Chaque template nécessitera un template légèrement différent, mais fondamentalement, chacun nécessitera une sorte de titre, une sorte d’icône (possiblement de tailles différentes pour les différentes tailles de tuiles) et des images que vous uploaderez pour l’affichage sur la tuile, ou pour le cycle template.

    Vous serez toujours amenés à fournir une sorte d’image ou icône pour tuile basique à cause de la page de listage d’applications. Cette icône doit faire 160x160 pixels. Souvenez-vous que vous pouvez utiliser Microsoft Paint pour rogner et redimensionner les images.

    Pour notre exemple, nous avons choisi le Cycle template, donc nous avons spécifié :

    • Un titre pour l’affichage sur la tuile
    • Une image pour utiliser en guise d’icône

    Une section qui contient les données d’image à utiliser comme image source. Les flux RSS et Flickr ne fonctionneront pas ici, il faudra une section où vous aurez à spécifier une contenu image spécifique.


    2 – Spécifier un titre, images et icône pour le template de tuile choisi.

    Personnalisation des écrans de démarrage (Splash Screen) et de veille (Lock Screen) de l’application

    Si vous allez sur l’onglet des tuiles (Tiles), vous pouvez aussi modifier l’écran de démarrage et l’écran de veille pour votre application.

    1 – Sélectionnez l’onglet SPLASH & LOCK dans la section Tiles


    Quand vous sélectionnez Edit, il vous est demandé de choisir une image à utiliser comme arrière-plan. Dans notre cas, nous choisissons les images de Mill, sachant que c’est l’un des point de repère les plus connus de Manotick. Nous utiliserons cette image à la fois pour les écrans de démarrage et de veille.

    2 – Sélectionnez Edit pour l’arrière-plan de l’écran d’accueil (Splash Screen) et spécifiez une image pour afficher dans l’arrière-plan.

    3 – Sélectionnez Edit pour l’arrière-plan de l’écran de veille (Lock Screen) et spécifiez une image pour afficher dans l’arrière-plan.

    L’application finale !

    A présent, vous avez personnalisé les données, la mise en page et l’apparence de notre application. Le résultat final de l’application que nous avons développée ressemble à ceci :

    image image image

    Mais nous constatons que le texte est un peu difficile à lire, considérant les couleurs choisies et l’image d’arrière-plan. Donc nous pourrons avoir envie de faire fondre d’avantage l’image de fond (Ne pouvant le faire avec Microsoft Paint, nous avons donc utilisé Microsoft Powepoint qui a quelques fonctionnalités de retouche d’images. Nous avons ajouté notre image dans une diapositive dans PowerPoint pour utiliser l’outil de retouche d’image, ensuite déplacé l’image dans Microsoft Paint et la sauvegardé pour l’utiliser dans notre application).

    Nous avons créé une version fondu de notre image et décidé de donner la même couleur au texte et à la barre d’application. Et à présent, nous avons quelque chose qui ressemble à ceci. Je dois vous avertir que je suis célèbre dans la création d’écrans vraiment laids, donc pour moi cette application est très jolie dans son état actuel. Habituellement, je demande à quelqu’un d’autre de m’aider à arranger la couleur et la mise en page, mais je pourrais publier l’application dans son état.


    Ouf! Bon donnez-vous une tape dans le dos! Vous venez de créer une application. Prochainement, nous apprendrons à prendre une application de Windows Phone Studio et à l’exécuter dans Visual Studio (C’est de cette manière que j’ai eu toutes mes captures d’écran. La prévisualisation est bonne, mais j’ai fait tourner l’application sur l’émulateur pour vérifier le style et l’apparence) ou à la publier sur le store ! Pour savoir comment publier ton application cherchez l'article publication des applications Windows Phone App Studio

Page 1 of 82 (409 items) 12345»