Ce tutoriel vous permettant d’apprendre à créer une barre de commandes dans une application Windows (Phone) Store en C# grâce à l’outil de développement Visual Studio. Vous devez posséder le SDK Windows Phone et le SDK Windows. http://dev.windows.com/fr-fr/develop/downloads

Création d’un projet

Pour commencer, il va nous falloir créer un projet de type Application vide (Applications universelles). Donnez lui comme nom MyCommandBar (/!\ Important /!\).
Pour cela, il vous suffit de faire

Fichier ► Nouveau ► Projet

Une fenêtre s’ouvre alors vous laissant le choix sur de nombreux Modèles de projets comme une application Web ou une application Windows.
Dans cette boîte de dialogue, sur la gauche vous trouverez une arborescence avec plusieurs templates en Visual C#, sous ce type, vous verez Application du Windows Store dans laquelle se trouve les Application universelles, cliquez sur cette rubrique et choisissez à droite « Application vide (Applications universelles) »

Dans l’explorateur de fichiers sur la droite de Visual Studio, vous pouvez voir que votre solution MyCommandBar contient trois projets:

• MyCommandBar.Windows (Windows 8.1)
• MyCommandBar.WindowsPhone (Windows Phone 8.1)
• MyCommandBar.Shared

L’objectif de cet assistant est de vous montrer que le code d’une barre de commandes peut à la fois fonctionner sur une application Windows et une application Windows Phone.

Préparation du projet

1. Dans le projet MyCommandBar.Windows (Windows 8.1) Supprimez le fichier MainPage.xaml : Sélectionnez-le puis appuyez sur la touche [suppr] de votre clavier.
2. Dans le projet MyCommandBar.WindowsPhone (Windows Phone 8.1) Supprimez le fichier MainPage.xaml : Sélectionnez-le puis appuyez sur la touche [suppr] de votre clavier.

Une interface commune

Nous allons créer une page MainPage.xaml commune aux deux projets :

1. Pour cela faites un clique droit sur le projet MyCommandBar.Shared et sélectionnez « Ajouter » ► « Page Vierge » et nommez là MainPage.xaml (/!\ Important /!\).
2. L’interface de MainPage.xaml s’ouvre, clique sur la touche F7 pour ouvrir le code de la page ou depuis l’explorateur de fichiers sur la droite de Visual Studio doucle-clique sur MainPage.xaml.cs

Coté code

Ajouter le using dans votre classe:

using Windows.UI;

Ajouter cette méthode à votre page:

private void BuildCommandBar()
 {
   var appBar = new CommandBar();
   appBar.Background = new SolidColorBrush(Colors.RoyalBlue);

   var btnNew = new AppBarButton();
   btnNew.Icon = new SymbolIcon(Symbol.Add);
   btnNew.Label = "New";

   appBar.PrimaryCommands.Add(btnNew);

   var btnAbout = new AppBarButton();
   btnAbout.Icon = new SymbolIcon(Symbol.Help);
   btnAbout.Label = "About";

   appBar.SecondaryCommands.Add(btnAbout);

   this.BottomAppBar = appBar;

 #if WINDOWS_APP
   this.BottomAppBar.IsOpen = true;
 #endif
 }

Si vous exécutez votre projet, cette méthode ne sera pas exécuter donc vous aurez une jolie page vide.

Ajouter cette ligne dans le constructeur de la page sous this.InitializeComponent();

BuildCommandBar();

Essayez les projets

Notre application peut aussi bien fonctionner sur Windows Phone que Windows, pour tester cette solution, vous devez choisir quel projet exécuter. Nous allons exécuter le projet Windows : faites un clique droit sur le projet MyCommandBar.Windows (Windows 8.1) et cliqur sur Définir comme projet de démarrage
Pressez maintenant F5 ou appuyer la : Start

Puis vous pouvez tester le projet sur l’émulateur Windows Phone 8.1 en choisissant le projet MyCommandBar.WindowsPhone (Windows 8.1) comme projet de démarrage

Que constatons-nous ?

• On observe que PrimaryCommands place l’icone « New » à droite sur Windows alors que sur Windows Phone il est centré
• On observe que SecondaryCommands place l’icone « About » à gauche sur Windows alors que sur Windows Phone c’est une item menu !
• Sur Windows, la CommandBar n’est pas visible par défaut comme sur Windows Phone c’est pourquoi dans le code, j’ai placé #if WINDOWS_APP… #end if

Ce tuto a été fait en octobre dernier pour l’Assistant de Visual Studio : http://www.microsoft.com/france/visual-studio/assistant-visualstudio/default.aspx