Scegliere e utilizzare controlli interattivi
In Microsoft Expression Blend è incluso un nutrito elenco di controlli che consentono di progettare un'interfaccia utente versatile per le proprie applicazioni Windows Presentation Foundation (WPF) e Microsoft Silverlight.
Expression Blend consente molto più del semplice utilizzo di controlli predefiniti o di sistema. È infatti possibile personalizzare e progettare controlli per definirne il comportamento nel modo desiderato. Tramite l'utilizzo delle risorse in Expression Blend è inoltre possibile conferire ai controlli personalizzati un aspetto esclusivo e interessante, per distinguere l'applicazione dalle altre e creare un'esperienza fortemente personalizzata o un'interfaccia utente coerente in tutte le applicazioni. Uno dei principali vantaggi del modello di modifica dei controlli disponibile in Expression Blend consiste nel fatto che i progettisti possono definire l'aspetto di un'applicazione contemporaneamente alla scrittura della logica di programmazione da parte degli sviluppatori. Grazie al fatto che il designer può definire direttamente la progettazione, non si corre il rischio di perdere funzionalità nel passaggio dal modello all'implementazione.
Che cosa sono i controlli?
I controlli, o elementi di progettazione dell'interfaccia utente, sono i componenti visibili di un'applicazione. I controlli, quali pulsanti o elenchi di elementi selezionabili, consentono agli utenti di interagire con l'applicazione. La comprensione dei controlli disponibili in Expression Blend e delle relative modalità di personalizzazione consente di conferire a un'applicazione l'aspetto e il comportamento desiderati.
Expression Blend consente di utilizzare i controlli visivamente nella tavola da disegno e di configurarne l'aspetto e il comportamento nei pannelli Proprietà e Oggetti e sequenza temporale. Ad esempio, è possibile aggiungere un controllo Button alla tavola da disegno, modificarne l'aspetto specificando valori diversi nel pannello Proprietà, quindi prevedere l'avvio di una sequenza temporale di animazione quando verrà scelto il pulsante aggiungendo un comportamento dal pannello Asset.
Per ulteriori informazioni, vedere Pannello Proprietà e Pannello Oggetti e sequenza temporale.
Oltre a queste semplici azioni, per i controlli è possibile eseguire le operazioni seguenti:
Convertire una proprietà, ad esempio il colore di un pennello, in una risorsa applicabile ad altri controlli per conferire un aspetto esclusivo e coerente all'applicazione.
Per un esempio, vedere Creare una risorsa.
Creare un nuovo modello e un nuovo stile per un controllo che ne definiscano l'aspetto e il comportamento e che conferiscano un aspetto esclusivo e coerente all'applicazione. I modelli e gli stili possono includere trigger e possono utilizzare risorse per l'impostazione delle proprietà. Per ulteriori informazioni, vedere la sezione "Stili e modelli" seguente.
Per ulteriori informazioni, vedere gli argomenti seguenti:
Aggiungere animazioni e interattività al controllo.
Per un esempio, vedere Creare un'animazione semplice.
Programmare un comportamento più complesso per il controllo nei metodi dei gestori di eventi in un file code-behind.
Per ulteriori informazioni, vedere Creare un nuovo metodo del gestore dell'evento e Esercitazione: caricare una nuova pagina dinamicamente nell'applicazione Silverlight.
Progettare controlli personalizzati e utilizzarli in Expression Blend.
Per ulteriori informazioni, vedere gli argomenti seguenti:
Categorie di controlli
In Expression Blend è possibile utilizzare molti tipi di controlli diversi per progettare rapidamente un'applicazione unica dal punto di vista visivo.
È possibile visualizzare tutti i controlli dal pannello Asset facendo clic su Asset .png "Cc294749.0d8b8d29-1af9-418f-8741-be3097d76eab(it-it,Expression.40).png")
nella parte inferiore del pannello Strumenti. Il pannello Strumenti è posizionato sul lato sinistro di Expression Blend. Quando si seleziona un elemento di interfaccia dal pannello Asset, l'icona dell'elemento viene visualizzata sotto il pulsante Asset, per semplificarne la selezione in qualsiasi momento. Gli elementi di interfaccia più comuni sono già visualizzati sotto il pulsante Asset per poterli individuare rapidamente.
Per ulteriori informazioni, vedere Pannello Asset e Pannello Strumenti.
Nella figura seguente viene illustrata la tavola da disegno in seguito all'aggiunta di alcuni elementi di interfaccia comuni. Lo strumento Penna°.png "Cc294749.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(it-it,Expression.40).png")
consente di generare un oggetto Path .png "Cc294749.e1882d38-c773-4abe-a2b9-10abd293e119(it-it,Expression.40).png")
. L'icona°Image.png "Cc294749.adb61060-da5f-4279-8c0d-3681bfeb145c(it-it,Expression.40).png")
viene visualizzata nel pannello Strumenti dopo la selezione del controllo Image dal pannello Asset.
Dal pannello Strumenti alla tavola da disegno
.png "Cc294749.abd88d9d-ab6c-444e-8037-469cdcb5586a(it-it,Expression.40).png")
.png "Cc294749.25182a96-9a69-478a-9cfe-5b360e6a9bea(it-it,Expression.40).png") |
Oggetto Path denominato Path_40, che rappresenta la forma del campione di colore arancione. |
.png "Cc294749.eb6fad93-f17e-4f62-a926-8c8651862891(it-it,Expression.40).png") |
Oggetto pulsante senza nome, che rappresenta il pulsante dell'applicazione con etichetta "Reimposta immagine". Nel pannello Oggetti e sequenza temporale il carattere di sottolineatura (_) consente di identificare il tasto di scelta specifico per il pulsante. |
.png "Cc294749.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(it-it,Expression.40).png") |
Oggetto rettangolo denominato Rectangle_44, che rappresenta una delle caselle del colore nel campione di colore. |
.png "Cc294749.a5d608f2-bba2-48c5-8b15-2c115db86acc(it-it,Expression.40).png") |
Oggetto immagine denominato photo_bathroom, che rappresenta l'immagine di sfondo della stanza. |
.png "Cc294749.f0c1ff71-7814-42ba-806b-7ea92d616e69(it-it,Expression.40).png") |
Blocco di testo senza nome, identificato dal testo in esso incluso, che rappresenta il titolo dell'applicazione, "Pacchetto di esempi 1 del campione di colore". |
Per scegliere il controllo da utilizzare, può essere utile immaginare i controlli suddivisi nelle categorie seguenti:
| Category | Utilizzo | Esempi |
|---|---|---|
Forme |
Controlli utilizzati per creare ricchi elementi visivi tramite ellissi, linee e rettangoli, il cui aspetto può essere reso quanto più semplice o complesso, in base alle esigenze. Per ulteriori informazioni, vedere Disegnare forme e tracciati. È possibile personalizzare l'aspetto e il comportamento di questi elementi Expression Blend utilizzando il pannello Proprietà o solo gli stili (non i modelli). Per ulteriori informazioni, vedere Modificare uno stile. |
Rectangle Ellipse Path (generato dagli strumenti di disegno Linea |
Pannelli di layout |
Controlli utilizzati come contenitori di altri elementi di interfaccia per specificarne la posizione e il comportamento relativo al ridimensionamento della finestra. Diversamente dalla maggior parte degli elementi di interfaccia, alcuni panelli di layout, ad esempio il pannello Grid, possono contenere più elementi figlio. Ciò è utile per organizzare la progettazione dell'applicazione e definirne il layout. Per ulteriori informazioni, vedere Disposizione degli oggetti. È possibile personalizzare l'aspetto e il comportamento di questi elementi in Expression Blend utilizzando il pannello Proprietà o gli stili (non i modelli). Per ulteriori informazioni, vedere Modificare uno stile. |
Canvas Dock Grid Stack Wrap |
Documento/testo |
Controlli utilizzati per definire la presentazione del documento e la formattazione del testo. Per ulteriori informazioni, vedere Disegnare testo. È possibile personalizzare l'aspetto e il comportamento di questi elementi in Expression Blend utilizzando il pannello Proprietà o gli stili e i modelli. Per ulteriori informazioni, vedere Creare o modificare un modello e Modificare uno stile. |
TextBox TextBlock RichTextBox Label PasswordBox |
Controlli |
Controlli utilizzati per consentire all'utente di interagire con l'applicazione. È possibile personalizzare l'aspetto e il comportamento di questi elementi in Expression Blend utilizzando il pannello Proprietà o gli stili e i modelli. Per ulteriori informazioni, vedere Creare o modificare un modello e Modificare uno stile. |
Button ListBox Menu RadioButton CheckBox |
Elementi decorativi |
Controlli utilizzati per applicare effetti a un altro elemento. Gli elementi decorativi possono includere un solo elemento figlio, in genere l'elemento di cui modificano l'aspetto. Questi elementi vengono in genere utilizzati all'interno di modelli applicati ad altri controlli, ad esempio l'elemento ButtonChrome nel modello di un pulsante. È possibile personalizzare l'aspetto e il comportamento degli elementi decorativi stessi utilizzando il pannello Proprietà o solo gli stili (non i modelli). Per ulteriori informazioni, vedere Modificare uno stile. |
Border ButtonChrome Viewbox |
.png "Cc294749.ae750268-92e8-403a-9e07-b662da4e9e1e(it-it,Expression.40).png")
.png "Cc294749.d7a04618-e35a-44f9-b78c-1f22e38016c1(it-it,Expression.40).png")
.png "Cc294749.eb618397-5283-48be-8396-3449be7b6fbf(it-it,Expression.40).png")
, Penna .png "Cc294749.509dc167-734f-46c9-b012-987ee63450cd(it-it,Expression.40).png")
).png "Cc294749.95e40288-f7a6-4ddc-9d6a-68d0aa46d621(it-it,Expression.40).png")
.png "Cc294749.db9f1ff5-6bca-441d-b289-c6781a478a5b(it-it,Expression.40).png")
.png "Cc294749.a87ee957-7fbf-4135-a6ab-6de7e63160aa(it-it,Expression.40).png")
.png "Cc294749.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(it-it,Expression.40).png")
.png "Cc294749.91486eda-6173-4ce8-9610-4f296dcb83d7(it-it,Expression.40).png")
.png "Cc294749.343296b4-5c7d-4145-84cc-91b08ba67a1b(it-it,Expression.40).png")
.png "Cc294749.42165963-00f7-4a33-abcd-b0849edebada(it-it,Expression.40).png")
.png "Cc294749.0ee48635-456b-4ebd-b8e4-ce3658417b8e(it-it,Expression.40).png")
.png "Cc294749.a27042f1-4067-4239-b99a-8b2e4c223de0(it-it,Expression.40).png")
.png "Cc294749.31e4dc7e-8cf4-4014-83e4-9b50ec6ee663(it-it,Expression.40).png")
.png "Cc294749.05df1779-a68f-436b-b834-a91b7995a3ec(it-it,Expression.40).png")
.png "Cc294749.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(it-it,Expression.40).png")
.png "Cc294749.015a263c-0b2b-4253-ac57-b86fcb8c9591(it-it,Expression.40).png")
.png "Cc294749.33646a24-f5a1-4b74-9496-e0aaddb922c6(it-it,Expression.40).png")
.png "Cc294749.91bc7bff-27d2-4dfe-93ab-844f2952186f(it-it,Expression.40).png")
.png "Cc294749.be354518-c54c-4f86-9c57-0b4a9d384b3e(it-it,Expression.40).png")
Per ulteriori informazioni sulle caratteristiche di questi tipi di controllo, vedere l'argomento Type Families .png "Cc294749.xtlink_newWindow(it-it,Expression.40).png")
nella sezione Windows Presentation Foundation di MSDN.
Creare e modificare controlli
È possibile aggiungere un controllo alla tavola da disegno facendo doppio clic sull'icona del controllo nel pannello Strumenti oppure selezionando l'icona del controllo nel pannello stesso e utilizzando il mouse per disegnare l'elemento nella tavola da disegno.
Per ulteriori informazioni, vedere le procedure disponibili in Scegliere e utilizzare controlli interattivi.
Se si fa doppio clic su un controllo del pannello Asset, quest'ultimo viene inserito nell'elemento attivo corrente in base a dimensioni predefinite. Si tratta di un comportamento utile, in quanto in molti casi le dimensioni predefinite sono impostate su Auto per adattare automaticamente le dimensioni del controllo al contenuto aggiunto progressivamente.
Un controllo aggiunto alla tavola da disegno in Expression Blend diventa un oggetto dell'applicazione. È possibile modificare gli oggetti in molti modi utilizzando i relativi punti di controllo per ridimensionarli, spostarli, ruotarli, capovolgerli o inclinarli oppure tramite il pannello Proprietà, in cui è possibile immettere valori esatti per dimensioni, posizione e rotazione.
Per ulteriori informazioni, vedere Aggiungere o modificare oggetti oppure le procedure disponibili in Utilizzo di oggetti e proprietà.
Expression Blend offre modalità esclusive per modificare i controlli. In un controllo è possibile inserire qualsiasi altro elemento controllo, pannello o forma. Si tratta di una soluzione utile per combinare insieme controlli diversi. Se, ad esempio, si desidera creare un pulsante contenente testo e un'immagine, trascinare un pannello di layout StackPanel sul pulsante e aggiungere un'immagine e il testo nel pannello di layout StackPanel.
Ai controlli si applicano regole di ereditarietà specifiche. Alcuni controlli, ad esempio, agiscono da elemento padre e possono includere elementi figlio (contenuto) nidificati. Altri controlli non supportano invece gli elementi figlio. In Expression Blend viene sempre eseguito il tentativo di aggiungere elementi figlio all'elemento radice o pannello di livello superiore di un documento. Ciò significa che l'elemento LayoutRoot è considerato l'elemento radice quando si inizia a utilizzare Expression Blend e, per impostazione predefinita, costituisce la destinazione di tutti gli elementi figlio che vengono inseriti nel documento. Se si desidera aggiungere elementi figlio a un controllo diverso del documento, è necessario attivare tale controllo facendo doppio clic sul relativo nome nel pannello Oggetti e sequenza temporale. Un'evidenziazione gialla identifica l'elemento attivato per indicare il punto in cui verrà aggiunto un nuovo controllo.
In Expression Blend sono disponibili i tipi di controlli seguenti, suddivisi in categorie in base al tipo di ereditarietà supportata.
| Category | Descrizione | Esempi |
|---|---|---|
Controlli semplici |
I controlli semplici consistono nei controlli stessi e nelle relative proprietà che è possibile impostare. I controlli semplici non possono includere contenuto. In altri termini, tali controlli non supportano la presenza di elementi figlio. |
Image ScrollBar |
Controlli contenuto |
I controlli contenuto supportano la presenza di un altro elemento oppure possono visualizzare una stringa come testo per scenari semplici. I controlli contenuto includono una proprietà Content, ovvero possono contenere contenuto singolo, ad esempio una stringa. I controlli contenuto, inoltre, possono contenere un altro elemento, ad esempio un pannello di layout. Per un esempio, vedere l'argomento Disegnare un controllo contenuto. |
CheckBox RadioButton |
Controlli elementi |
I controlli elementi includono un insieme di elementi figlio. È possibile aggiungere manualmente gli elementi alla proprietà dell'insieme Items oppure è possibile associare un insieme di dati alla proprietà ItemsSource. I controlli elementi espongono insiemi di elementi e non sono associati ad alcuna proprietà Content o Header. Per un esempio, vedere l'argomento Disegnare un controllo elementi. |
ComboBox ListBox |
Controlli con intestazione |
I controlli con intestazione includono un elemento figlio intestazione che costituisce l'etichetta del controllo. Un controllo con intestazione può includere contenuto (controllo contenuto con intestazione) o un insieme di elementi (controllo elementi con intestazione). Per un esempio, vedere l'argomento Disegnare un controllo con intestazione. |
TabControl TabItem MenuItem |
.png "Cc294749.6513a026-499e-4296-8a67-7558b466bd33(it-it,Expression.40).png")
.png "Cc294749.b174a511-dd12-4a45-a986-034de7693de9(it-it,Expression.40).png")
.png "Cc294749.f13847cd-7fdf-4757-a648-d5ece98fcaea(it-it,Expression.40).png")
.png "Cc294749.82c89430-1209-4aa1-b534-cf1cedac74c7(it-it,Expression.40).png")
Per ulteriori informazioni sulle caratteristiche di questi tipi di controlli, vedere l'argomento "Modelli di contenuto" nella sezione Windows Presentation Foundation di MSDN .
Stili e modelli
Come illustrato in precedenza, è possibile personalizzare i controlli in molti modi, anche tramite la creazione di modelli e stili per i controlli, conferendo un aspetto esclusivo e coerente all'applicazione. I modelli e gli stili definiscono le parti che costituiscono rispettivamente un controllo e il comportamento del controllo. Per creare modelli e stili, è necessario eseguire copie degli stili e dei modelli di sistema predefiniti per un controllo, in quanto tali stili e modelli di sistema non possono essere modificati. La modifica di modelli e stili rappresenta un metodo semplice per creare nuovi controlli nella visualizzazione Progettazione di Expression Blend senza utilizzare codice.
Per ulteriori informazioni, vedere Definizione dello stile di un controllo che supporta i modelli.
Copyright © 2011 Microsoft Corporation. Tutti i diritti riservati.