Procedura dettagliata: progettazione di una schermata di Silverlight in LightSwitch
In questa procedura dettagliata viene illustrato come utilizzare Progettazione schermata di LightSwitch per creare una schermata in cui vengono visualizzati i dati del cliente dal database di esempio Northwind. Progettazione schermata è un'area di progettazione visiva utilizzabile per modificare l'aspetto di una schermata.
In questa procedura dettagliata viene illustrato come eseguire le attività seguenti:
Creare una schermata
Modificare il layout di una schermata
Rimuovere campi da una schermata
Modificare l'ordine degli elementi
Modificare il nome visualizzato di un elemento
Modificare il tipo di controllo di un elemento
Personalizzare una schermata in un'applicazione in esecuzione
Prerequisiti
In questa procedura dettagliata si presuppone che sia stato aggiunto il servizio Northwind OData come origine dati nel progetto.
Per informazioni sull'aggiunta del servizio Northwind OData come origine dati nel progetto, vedere Connessione ai dati in un'applicazione LightSwitch.
Creazione di una schermata
In questa sezione viene illustrato come creare una schermata per visualizzare i dati del cliente dal database di esempio Northwind. Questa schermata è divisa in due parti. Nella prima parte viene visualizzato un elenco riepilogativo di tutti i clienti; nell'altra parte vengono visualizzati i dettagli sul cliente selezionato.
Per creare una schermata
In Esplora soluzioni aprire il menu di scelta rapida per il nodo Schermate, quindi scegliere Apri.
Nella barra dei menu scegliere Progetto, Aggiungi schermata.
Verrà aperta la finestra di dialogo Aggiungi nuova schermata.
Nell'elenco Selezionare un modello di schermata scegliere Schermata di elenco e dettagli.
Nella casella di testo Nome schermata immettere Customers.
Nell'elenco Dati della schermata scegliere DataSourceName.Customers.
Nella sezione Dati aggiuntivi da includere selezionare le caselle di controllo Dettagli cliente e Ordini cliente.
In questo modo i campi dell'entità Customer vengono aggiunti alla parte relativa ai dettagli della schermata, insieme a un elenco degli ordini effettuati dal cliente in questione.
Nella figura seguente viene mostrato come viene visualizzata la finestra di dialogo dopo aver eseguito i passaggi descritti in questa sezione.
.png "Finestra di dialogo Aggiungi nuova schermata")
Scegliere il pulsante OK per creare la schermata.
Verrà visualizzato Progettazione schermata.
Modifica del layout della schermata
Nella schermata di elenco e dettagli sono disponibili due colonne. La colonna sinistra è un elenco dei clienti. Nella colonna destra sono contenute due righe. Nella riga superiore sono contenuti i dettagli del cliente selezionato, mentre nella riga inferiore sono inclusi gli ordini correlati al cliente selezionato. In Albero del contenuto della schermata di Progettazione schermata viene mostrata la composizione di questo elenco.
In questa sezione viene illustrato come modificare il layout della schermata in modo che in essa siano contenute due righe invece di due colonne. Nella riga superiore sarà incluso l'elenco dei clienti. Nella riga inferiore saranno contenute due colonne. Nella colonna di sinistra saranno contenuti i dettagli del cliente selezionato e nella colonna di destra saranno inclusi gli ordini correlati al cliente selezionato.
Per modificare il layout dell'elenco
In Albero del contenuto della schermata di Progettazione schermata scegliere la freccia GIÙ visualizzata accanto al nodo Customers, quindi scegliere Layout righe.
Il layout del nodo Customers viene modificato da Layout colonne a Layout righe.
Scegliere la freccia GIÙ visualizzata accanto al nodo Details Column, quindi fare clic su Layout colonne.
Il layout di Details Column viene modificato da Layout righe a Layout colonne.
Rimozione di campi da una schermata
Per impostazione predefinita, nell'area della schermata in cui vengono visualizzati i dettagli di un cliente denominata Details Column vengono visualizzati tutti i campi dell'origine dati. Se non si desidera visualizzare tutti i campi, è possibile rimuovere quelli non desiderati. Ad esempio, nei passaggi seguenti viene illustrato come rimuovere il campo Country.
Per rimuovere i campi da una schermata
In Albero del contenuto della schermata espandere il nodo Customer Details se non è ancora espanso.
Scegliere il campo Country, quindi nella barra dei comandi di Progettazione schermata scegliere il comando Elimina.
Modifica dell'ordine dei campi
Nei passaggi seguenti viene illustrato come modificare l'ordine di visualizzazione dei campi, ad esempio, il campo CustomerID e il campo Postal Code.
Per modificare l'ordine dei campi
In Albero del contenuto della schermata espandere il nodo Customer Details se non è ancora espanso.
Per spostare il campo CustomerID nella parte inferiore della colonna dei dettagli, trascinare lo stesso campo nel campo Fax.
Nota
È inoltre possibile aprire il menu di scelta rapida per il campo CustomerID, scegliere Taglia, aprire il menu di scelta rapida per il campo Fax, quindi scegliere Incolla.
Per spostare il campo Postal Code in modo che venga visualizzato appena sopra il campo Customer ID, trascinarlo tra il campo Fax e il campo CustomerID.
Modifica del tipo di controllo di un campo
È possibile personalizzare la visualizzazione di un campo da parte dell'utente. Ad esempio, è possibile impostare un campo di testo per far sì che venga visualizzato come TextBox o come Label. Nei passaggi seguenti viene illustrato come modificare un campo di visualizzazione in un campo Label in modo che l'utente non possa modificarne il valore.
Per modificare il tipo di controllo di un campo
In Albero del contenuto della schermata espandere il nodo Customer Details se non è ancora espanso.
Aprire l'elenco per il campo Customer ID, quindi scegliere Etichetta.
È possibile ripetere questo passaggio per modificare altri campi.
Per verificare le modifiche, scegliere il tasto F5 per eseguire l'applicazione.
Personalizzazione di una schermata in un'applicazione in esecuzione
È inoltre possibile personalizzare una schermata mentre l'applicazione è in esecuzione. Ad esempio, è possibile rimuovere i campi, cambiare l'ordine dei campi e modificare le proprietà, quali il tipo di controllo o l'allineamento etichette.
Per personalizzare una schermata in un'applicazione in esecuzione
Se l'applicazione non è ancora in esecuzione, premere il tasto F5 per avviarla.
Nella barra dei comandi schermata scegliere il collegamento Progetta schermata.
Nella schermata Modalità personalizzazione rimuovere il campo Customer ID dalla colonna dei dettagli selezionandolo nel nodo Customer Details e scegliendo il pulsante Elimina (
.png "Eliminazione dell'elemento selezionato")
) dalla barra degli strumenti.Nel nodo Customer Details scegliere il campo Fax, quindi nella barra degli strumenti scegliere il pulsante Sposta giù (
.png "Spostamento di un elemento in una posizione più in basso nell'elenco.")
).Il campo Fax verrà visualizzato sotto il campo Postal Code.
Nel nodo Customer Details scegliere il campo Phone, quindi nella finestra Proprietà impostare la proprietà Nome visualizzato su Phone Number.
Nel nodo Customer Details scegliere il campo Phone Number, quindi nella finestra Proprietà impostare la proprietà Tipo di controllo su Etichetta.
Nel nodo Customer Details scegliere il campo Company Name, quindi nelle finestre Proprietà impostare la proprietà Posizione etichetta su Allineato a destra.
Ripetere questo passaggio per tutti i campi nel nodo Customer Details, quindi scegliere il pulsante Salva.
Tramite l'applicazione vengono ora visualizzate le modifiche appena apportate.
Passaggi successivi
Per impostazione predefinita, quando si sceglie un'origine dati per una schermata, vengono visualizzati tutti i dati presenti nell'origine. Se si desidera visualizzare solo un subset dei dati, è possibile creare una query per definire i dati da visualizzare. Vedere Procedura: progettare una query utilizzando Progettazione query.