Introduzione: Orientarsi in Visual Studio

Applies to Windows and Windows Phone

Orientarsi in Microsoft Visual Studio

Torniamo ora al progetto MyApp creato in precedenza e vediamo come orientarsi nell'ambiente IDE (Integrated Development Environment) di Visual Studio.

Gli sviluppatori Xcode dovrebbero conoscere la visualizzazione predefinita illustrata nella figura seguente in cui i file di origine si trovano nel riquadro sinistro, l'editor (dell'interfaccia utente o del codice) è collocato nel riquadro centrale mentre controlli e relative proprietà sono disponibili nel riquadro destro.

Ambiente di sviluppo di Xcode

Microsoft Visual Studio è simile, anche se nella visualizzazione predefinita i controlli sono posizionati sul lato sinistro della casella degli strumenti. I file di origine sono disponibili in Esplora soluzioni sul lato destro, mentre le proprietà sono visualizzate in Proprietà sul lato destro. Questo layout è illustrato nella figura seguente.

Ambiente di sviluppo di Visual Studio

Nota  I file elencati nella colonna di destra nella visualizzazione Esplora soluzioni sono divisi in tre sezioni principali: MyApp.Windows, MyApp.WindowsPhone e MyApp.Shared. Queste sezioni sono presenti perché si tratta di un'app Windows universale. I file di origine possono essere inclusi in MyApp.Shared per entrambi i progetti oppure nella sezione specifica per la piattaforma, secondo necessità.

I riquadri di Visual Studio possono essere disposti diversamente se desideri che i file di origine stiano a sinistra e i controlli a destra. Ad esempio, per spostare la casella degli strumenti dal lato sinistro dello schermo a quello destro, tieni premuta la barra del titolo del riquadro Casella degli strumenti e trascinalo fino alla posizione di destinazione all'estrema destra indicata al centro dello schermo. Verrà visualizzato un riquadro ombreggiato a indicare la posizione in cui la casella degli strumenti verrà ancorata dopo che sarà stata rilasciata.

Ecco come procedere per rendere l'aspetto dell'IDE analogo a quello mostrato nella figura precedente:

  1. In Esplora soluzioni, tieni premuto (oppure fai clic con il pulsante destro del mouse) su MainPage.xaml in MyApp.Windows per aprirlo.
  2. A sinistra, tocca la Casella degli strumenti per visualizzarla. Sulla barra del titolo del riquadro Casella degli strumenti tocca l'icona a forma di puntina da disegno per ancorarlo come nella figura seguente.
Ancoraggio della Casella degli strumenti di Visual Studio

Torna all'inizio

Aggiunta di controlli, impostazione delle proprietà e risposte agli eventi

Aggiungiamo ora alcuni controlli al progetto MyApp. Ne modificheremo quindi alcune proprietà e scriveremo il codice di risposta a uno degli eventi dei controlli.

Per aggiungere controlli Xcode, si apre il file con estensione xib desiderato e quindi si procede all'aggiunta di controlli quali i pulsanti rettangolari con gli angoli arrotondati e le etichette, come illustrato nella figura seguente. I file con estensione xaml in Visual Studio sono analoghi ai file xib.

Progettazione dell'interfaccia utente in Xcode

Realizziamo qualcosa di simile in Visual Studio. Nella Casella degli strumenti tieni premuto il controllo Button e quindi trascinalo sulla superficie di progettazione del file MainPage.xaml. Procedi allo stesso modo con il controllo TextBlock.

Progettazione dell'interfaccia utente in Visual Studio

A differenza di Xcode che archivia le informazioni su layout e associazione in un file xib, in Visual Studio tali dettagli vengono mostrati nei file xaml con un elaborato linguaggio dichiarativo. Per altre info su XAML (Extensible Application Markup Language), vedi Panoramica su XAML. Tutto ciò che viene visualizzato nel riquadro di progettazione è definito nel riquadro XAML. Il riquadro XAML offre un controllo maggiore dove necessario e, con la pratica, assicura una riduzione dei tempi di sviluppo. Per ora concentriamoci tuttavia solo sul riquadro di progettazione e sulle Proprietà.

Cambiamo a questo punto il contenuto e il nome del pulsante. Per cambiare il contenuto del pulsante in Xcode occorre cambiare il valore della casella del titolo nel riquadro delle proprietà del pulsante, come illustrato nella figura seguente.

Finestra delle proprietà in Xcode

La procedura è simile anche in Visual Studio. Nel riquadro di progettazione tocca il pulsante per impostarvi lo stato attivo. Per cambiare il contenuto del pulsante, nel riquadro Proprietà cambia il valore della casella Contenuto da "Button" a "Press Me". Per cambiare il nome del pulsante, nella casella Nome cambia il valore da "<Nessun nome>" a "myButton", come illustrato in questa figura.

Finestra delle proprietà del pulsante in Visual Studio.

Scriviamo ora il codice per modificare il contenuto del controllo TextBlock in "Hello, World!" dopo che un utente tocca il pulsante.

In Xcode l'associazione del comportamento di un evento a un controllo prevede la scrittura del codice e quindi l'associazione di quest'ultimo al controllo, come nel codice e nella figura seguenti.


// Objective-C header.

-(IBAction) buttonPressed: (id) sender;


// Objective-C implementation.

-(IBAction) buttonPressed: (id) sender {

}

Collegamento di un pulsante a un evento in Xcode

In Xcode è anche possibile associare il codice dell'evento a un controllo nel modo illustrato nella figura seguente.

Modalità alternativa per collegare un pulsante a un evento in Xcode

Visual Studio è simile. Torna all'inizio a destra nel riquadro Proprietà si trova un pulsante a forma di fulmine. È qui che sono elencati gli eventi associati al controllo selezionato, come illustrato nella figura seguente.

Elenco di eventi del pulsante in Visual Studio.

Per aggiungere il codice per l'evento Click del pulsante, nel riquadro di progettazione tocca prima il pulsante. Tocca il pulsante a forma di fulmine e quindi tieni premuta la casella accanto all'etichetta Click. Visual Studio aggiungerà il testo "myButton_Click" alla casella Click e quindi aggiungerà e visualizzerà il gestore eventi corrispondente nel file MainPage.xaml.cs, come illustrato nel codice seguente.


private void myButton_Click(object sender, RoutedEventArgs e)
{

}

Cambiamo quindi il nome del controllo TextBlock. In Xcode ciò implica la scrittura del codice seguente e l'associazione del controllo alla relativa definizione, come si vede in questa figura.


// Objective-C header.

IBOutlet UILabel *myLabel;

Collegamento di un'etichetta alla relativa definizione in Xcode

In Xcode è anche possibile associare il codice alla definizione nel modo illustrato nella figura seguente.

Modalità alternativa per collegare un'etichetta alla relativa definizione in Xcode

In Visual Studio, questa operazione si esegue come illustrato nella figura seguente:

  1. Tocca la scheda del file MainPage.xaml.
  2. Nel riquadro di progettazione tocca il controllo TextBlock.
  3. Nel riquadro Proprietà tocca il pulsante a forma di chiave inglese per visualizzare le proprietà del controllo.
  4. Nella casella Nome cambia "<Nessun nome>" in "myLabel".
Finestra delle proprietà dell'etichetta in Visual Studio

Aggiungiamo a questo punto lo stesso codice all'evento Click del pulsante. A tale scopo, tocca il file MainPage.xaml.cs e aggiungi il codice seguente al gestore eventi myButton_Click.


private void myButton_Click(object sender, RoutedEventArgs e)
{
    // Add the following line of code.    
    myLabel.Text = "Hello, World!";
}

Il codice precedente è analogo a quello che si può scrivere in Xcode, come segue.


-(IBAction) buttonPressed: (id) sender {
    myLabel.text = @"Hello, World!";
}

Infine, per eseguire l'app, in Visual Studio verifica che MyApp.Windows sia in grassetto (per indicare che si tratta del progetto di avvio predefinito) e tocca il menu Debug, quindi tocca Avvia debug (o premi F5). Dopo l'avvio dell'app, tocca il pulsante "Press Me" e verifica che il contenuto dell'etichetta passi da "TextBlock" a "Hello, World!" come nella figura seguente.

Risultati dell'esecuzione del primo scenario: Hello, World!

Per chiudere l'app, torna in Visual Studio, tocca il menu Debug e quindi Termina debug (oppure premi MAIUSC+F5).

Puoi ripetere il processo per il progetto Windows Phone seguendo esattamente gli stessi passaggi per MainPage.xaml nel ramo MyApp.WindowsPhone. Se la tua app si limitasse a questo ambito, potresti trascinare il file MainPage.xaml sul ramo MyApp.Shared ed eliminare il file MainPage.xaml esistente dal ramo MyApp.WindowsPhone. In questo modo si condivide il file MainPage.xaml tra entrambe le piattaforme e si risparmia del lavoro.

Passaggio successivo

Introduzione: Controlli comuni

 

 

Mostra:
© 2014 Microsoft