Développement Windows 10 - Première application

Dans ce chapitre, nous allons créer notre première application simple "Hello world" dans Universal Windows Platform (UWP) à l'aide de XAML et C # sur Windows 10. Nous allons montrer comment une seule application UWP créée dans Visual Studio peut être exécutée et exécutée sur n'importe quel appareil Windows 10.

Commençons par créer l'application en suivant les étapes ci-dessous.

Lancez Visual Studio 2015.
Clique sur le File menu et sélectionnez New > Project.

Le suivant New Projectla fenêtre de dialogue s'affiche. Vous pouvez voir les différents types de modèles dans le volet gauche de la boîte de dialogue.

Dans le volet gauche, vous pouvez voir l'arborescence. SélectionnerUniversal template de Templates > Visual C# > Windows.
Dans le volet central, sélectionnez le Blank App (Universal Windows) modèle
Donnez un nom au projet en écrivant UWPHelloWorld dans le Name field.
Cliquez sur OK pour créer un nouveau projet UWP.

Vous pouvez voir le projet nouvellement créé dans le Solution Explorer.
Il s'agit d'une application vierge mais elle contient de nombreux fichiers, ce qui est la configuration minimale requise pour toute application UWP.
MainPage.xaml et MainPage.xaml.cs s'exécuter lorsque vous exécutez votre application.
Par défaut, MainPage.xaml Le fichier contient les informations suivantes.

<Page 
   x:Class = ”UWPHellowWorld.MainPage” 
   xmlns = ”http://schemas.microsoft.com/winfx/2006/xaml/presentation” 
   xmlns:x = ”http://schemas.microsoft.com/winfx/2006/xaml” 
   xmlns:local = ”using:UWPHellowWorld” 
   xmlns:d = ”http://schemas.microsoft.com/expression/blend/2008” 
   xmlns:mc = ”http://schemas.openxmlformats.org/markup-compatibility/2006” 
   mc:Ignorable = ”d”>  
	
   <Grid Background = ”{ThemeResource ApplicationPageBackgroundThemeBrush}”>
   </Grid>
	
</Page>

Vous trouverez ci-dessous les informations par défaut disponibles dans MainPage.xaml.cs.

using System; 
using System.Collections.Generic; 
using System.IO; 
using System.Linq; 
using System.Runtime.InteropServices.WindowsRuntime; 

using Windows.Foundation; 
using Windows.Foundation.Collections; 

using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls; 
using Windows.UI.Xaml.Controls.Primitives; 
using Windows.UI.Xaml.Data; 
using Windows.UI.Xaml.Input; 
using Windows.UI.Xaml.Media; 
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at 
   http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409

namespace UWPHellowWorld {
 
   /// <summary> 
      /// An empty page that can be used on its own or navigated to within a Frame. 
   /// </summary> 
	
   public sealed partial class MainPage : Page {
      public MainPage(){ 
         this.InitializeComponent(); 
      } 
   } 
	
}

Ajoutons des blocs de texte, une zone de texte et un bouton comme indiqué dans le code XAML ci-dessous.

<Page 
   x:Class = ”UWPHellowWorld.MainPage” 
   xmlns = ”http://schemas.microsoft.com/winfx/2006/xaml/presentation” 
   xmlns:x = ”http://schemas.microsoft.com/winfx/2006/xaml” 
   xmlns:local = ”using:UWPHellowWorld” 
   xmlns:d = ”http://schemas.microsoft.com/expression/blend/2008”
   xmlns:mc = ”http://schemas.openxmlformats.org/markup-compatibility/2006” 
   mc:Ignorable = ”d”>  
   
   <Grid Background = ”{ThemeResource ApplicationPageBackgroundThemeBrush}”> 
	
      <StackPanel HorizontalAlignment = ”Center”> 
         <TextBlock Text = ”Hello, world!”  Margin = ”20”  Width = ”200” 
            HorizontalAlignment = ”Left”/> 
				
         <TextBlock Text = ”Write your name.” Margin = ”20” Width = ”200” 
            HorizontalAlignment = ”Left”/> 
				
         <TextBox x:Name = ”txtbox”  Width = ”280” Margin = ”20” 
            HorizontalAlignment = ”Left”/> 
				
         <Button x:Name = ”button” Content = ”Click Me” Margin = ”20” 
            Click = ”button_Click”/> 
				
         <TextBlock x:Name = ”txtblock” HorizontalAlignment = ”Left” 
            Margin = ”20”/> 
      </StackPanel> 
		
   </Grid> 
	
</Page>

Vous trouverez ci-dessous le bouton d'événement de clic en C #.

using System; 
using System.Collections.Generic; 
using System.IO; 
using System.Linq; 

using System.Runtime.InteropServices.WindowsRuntime; 
using Windows.Foundation; 
using Windows.Foundation.Collections;
 
using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls; 
using Windows.UI.Xaml.Controls.Primitives; 
using Windows.UI.Xaml.Data; 
using Windows.UI.Xaml.Input; 
using Windows.UI.Xaml.Media; 
using Windows.UI.Xaml.Navigation; 
 
// The Blank Page item template is documented at
   http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409  

namespace UWPHellowWorld {

   /// <summary> 
      /// An empty page that can be used on its own or navigated to within a Frame. 
   /// </summary> 
	
   public sealed partial class MainPage : Page {
      public MainPage() {
         this.InitializeComponent(); 
      }  
		
      private void button_Click(object sender, RoutedEventArgs e) {
         if (txtbox.Text != “”) 
            txtblock.Text = “Hello: “ + txtbox.Text; 
         else 
            txtblock.Text = “You have not write your name”; 
      } 
		
   }	
	
}

Dans le projet UWP, device preview l'option est disponible sur le Design Window, à l'aide duquel vous pouvez facilement modifier la disposition, pour s'adapter à la taille d'écran de tous les appareils d'une famille d'appareils que vous ciblez pour votre application.

Vous pouvez exécuter et tester votre application sur une machine locale, un simulateur ou un émulateur, ou sur un appareil distant. Vous pouvez sélectionner l'appareil cible dans le menu suivant comme indiqué ci-dessous -

Laissez-nous exécuter le code ci-dessus sur une machine locale et vous verrez la fenêtre suivante. Maintenant, écrivez n'importe quel nom dans la zone de texte et cliquez sur le boutonClick Me.

Désormais, si vous souhaitez tester votre application sur un émulateur, vous pouvez sélectionner un émulateur particulier dans le menu et exécuter votre application. Vous verrez l'émulateur suivant -

Nous vous recommandons d'exécuter l'application ci-dessus avec différents appareils.

↰ Previous page Next page ↱

Développement Windows 10 - Première application

Tutoriel de développement Windows 10