Sviluppo di Windows 10: prima app

In questo capitolo creeremo la nostra prima semplice applicazione "Hello world" in Universal Windows Platform (UWP) usando XAML e C # su Windows 10. Dimostreremo come una singola applicazione UWP creata in Visual Studio può essere eseguita ed eseguita su qualsiasi dispositivo Windows 10.

Cominciamo a creare l'app seguendo i passaggi indicati di seguito.

  • Avvia Visual Studio 2015.

  • Clicca sul File menu e selezionare New > Project.

  • Il seguente New Projectverrà visualizzata la finestra di dialogo. È possibile visualizzare i diversi tipi di modelli nel riquadro sinistro della finestra di dialogo.

  • Nel riquadro sinistro è possibile vedere la visualizzazione ad albero. SelezionareUniversal template a partire dal Templates > Visual C# > Windows.

  • Dal riquadro centrale, seleziona il file Blank App (Universal Windows) modello

  • Dai un nome al progetto scrivendo UWPHelloWorld nel Name field.

  • Clic OK per creare un nuovo progetto UWP.

  • Puoi vedere il progetto appena creato nel file Solution Explorer.

  • Questa è un'app vuota ma contiene molti file, che è il requisito minimo per qualsiasi applicazione UWP.

  • MainPage.xaml e MainPage.xaml.cs eseguito quando esegui la tua applicazione.

  • Per impostazione predefinita, MainPage.xaml file contiene le seguenti informazioni.

<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>
  • Di seguito sono riportate le informazioni predefinite disponibili in 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(); 
      } 
   } 
	
}
  • Aggiungiamo alcuni blocchi di testo, una casella di testo e un pulsante come mostrato nel codice XAML di seguito.

<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>
  • Di seguito è riportato il pulsante dell'evento clic in 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”; 
      } 
		
   }	
	
}
  • Nel progetto UWP, device preview l'opzione è disponibile su Design Window, con l'aiuto del quale puoi cambiare facilmente il layout, per adattarlo alle dimensioni dello schermo di tutti i dispositivi in ​​una famiglia di dispositivi a cui ti rivolgi per la tua applicazione.

  • Puoi eseguire e testare la tua app su un computer locale, un simulatore o un emulatore o su un dispositivo remoto. È possibile selezionare il dispositivo di destinazione dal seguente menu come mostrato di seguito:

  • Eseguiamo il codice sopra su una macchina locale e vedrai la seguente finestra. Ora scrivi un nome nella casella di testo e fai clic sul pulsanteClick Me.

  • Ora, se vuoi testare la tua app su un emulatore, puoi selezionare un particolare emulatore dal menu ed eseguire la tua applicazione. Vedrai il seguente emulatore:

Ti consigliamo di eseguire l'applicazione di cui sopra con diversi dispositivi.