ASP.Net  »  Articoli  »  Silverlight 

Creare la User Interface

Aggiungiamo un controllo TextBox e notiamo come durante il suo posizionamento venga ancorato ai margini definiti nella griglia che lo contiene (ContentGrid)

Il designer in realtà sta seguendo la definizione XAML del contenuto, definizione che si presenta così:

Torneremo sull'argomento layout e posizionamento più avanti: è bene però notare da subito come le operazioni sul designer corrispondano a elementi del codice XAML; nel nostro caso, viene utilizzato e modificato l'attributo Margin non appena si trascina un controllo sulla superficie dal designer.

Inseriamo anche un Button e un TextBlock (è l'analogo di una Label, per chi viene da Windows Forms o Web Forms) per poi creare il codice che, alla pressione del pulsante, riempia la TextBlock con il contenuto del TextBox: l'esempio, come accennato all'inizio, è volutamente molto semplice per prendere pratica con gli strumenti.

Dopo aver trascinato i due controlli, il form, o per meglio dire la Page, con il suo codice corrispondente, dovrebbero presentarsi così:

Senza fare nessuna finezza grafica o entrare nel merito di come allineare i controlli o ancora definire risorse di stile, andiamo a creare il codice nel code behind per rispondere alla pressione del pulsante da parte dell'utente.

• Introduzione: installare l'SDK
• Il primo progetto
• L'emulatore
• Note sull'autore

Facendo il classico doppio click sul controllo Button otteniamo la creazione dell'event handler per l'evento Click su Button1, e senza bisogno di fare l'analisi dettagliata, semplicemente scriviamo il codice che ci siamo prefissi:

A parte il fatto di sbagliare una TextBox con una TextBlock, cosa facilissima in quanto l'intellisense ci propone l'ultima utilizzata, il codice dovrebbe presentarsi come nell'immagine precedente. Proviamo ad eseguirlo per vedere qualche dettaglio sull'emulatore che Visual Studio chiamerà in causa alla pressione del tasto F5.

Esecuzione

Dopo la compilazione, Visual Studio 2010 Express for Windows Phone avvia l'emulatore e passato qualche secondo di inizializzazione appare la nostra applicazione: Visual Studio si preoccupa infatti di effettuare anche il deploy dell'applicazione nonchè di eseguirla.

La maschera si presenta così:

È sufficiente entrare nel campo TextBox affinchè appaia il SIP (Software Input Panel); sull'emulatore è possibile utilizzare il SIP oppure affidarsi alla tastiera fisica del PC per velocizzare le operazioni.

Per testare l'efficacia del nostro codice possiamo ovviamente premere il Button per ottenere il valore "Ciao a tutti" nel TextBlock, ma prima di farlo, o se ve lo sto comunicando troppo tardi, anche dopo averlo già fatto, torniamo in Visual Studio e proviamo a mettere un break point nel codice. Visual Studio supporta il debug del codice che gira sull'emulatore (chi lavora in ambiente mobile è abituato a questa funzionalità).

Altri articoli

Altre guide

Altre newsletter