Cenni preliminari sui controlli
.png "Questa pagina si applica a WPF e Silverlight 2")
In Microsoft Expression Blend è disponibile un elenco completo di controlli che consentono di progettare un'interfaccia utente versatile per applicazioni WPF (Windows Presentation Foundation) e Silverlight 2.
[!NOTA]
Per un elenco dei controlli disponibili nei progetti di Microsoft Silverlight 1.0, vedere la sezione corrispondente in Cenni preliminari su Silverlight 1.0.
Expression Blend consente molto più del semplice utilizzo di controlli WPF 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 Pannello Proprietà e Pannello Interazione. Ad esempio, è possibile aggiungere un controllo Button alla tavola da disegno, modificarne l'aspetto specificando valori diversi nel pannello Proprietà e quindi prevedere l'avvio di una sequenza temporale di animazione quando verrà scelto il pulsante aggiungendo un trigger di evento per il pulsante nel pannello Interazione.
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 Styles and templates più avanti. Per esempi relativi a WPF, vedere Creare una risorsa stile e Creare o modificare il modello di un controllo. Per esempi relativi a Silverlight 2, vedere Creare un modello riutilizzabile per un controllo di sistema e Creare un'interfaccia per un controllo in un progetto di Silverlight 2.
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 un esempio relativo a WPF, vedere Creare un nuovo metodo del gestore dell'evento. Per un esempio relativo a Silverlight 2, vedere Caricare una nuova pagina dinamicamente in un'applicazione Silverlight 2.
Progettare controlli personalizzati e utilizzarli in Expression Blend. Per esempi relativi a WPF, vedere Esercitazione: creare un controllo WPF personalizzato e Esercitazione: creare un controllo utente WPF. Per un esempio relativo a Silverlight 2, vedere Creare un nuovo controllo utente in un progetto di Silverlight 2.
.gif "Cc294749.7e183f1f-37d8-4dcb-980c-19a5d61ca087(it-it,Expression.10).gif")
Torna all'inizio
Categorie di controlli
In Expression Blend è possibile utilizzare molti tipi di controlli diversi per progettare rapidamente un'applicazione unica dal punto di vista visivo.
Tutti i controlli sono disponibili nella Libreria che può essere visualizzata facendo clic sul pulsante Libreria .png "Cc294749.0224cabd-5da1-4e01-bddd-4a647401a098(it-it,Expression.10).png")
nella parte inferiore della Casella degli strumenti. La casella degli strumenti è disponibile lungo il lato sinistro della finestra di Expression Blend. Quando si seleziona un elemento di interfaccia nella Libreria, l'icona dell'elemento viene visualizzata sopra il pulsante Libreria, per semplificarne la selezione in qualsiasi momento. Gli elementi di interfaccia più comuni sono già visualizzati sopra il pulsante Libreria ed è possibile individuarli rapidamente.
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.10).png")
consente di generare un oggetto Path .png "Cc294749.e1882d38-c773-4abe-a2b9-10abd293e119(it-it,Expression.10).png")
. L'icona Immagine .png "Cc294749.0594f05b-2193-4385-86a0-2d352cacfe55(it-it,Expression.10).png")
verrà visualizzata nella casella degli strumenti dopo la selezione del controllo Image nella Libreria.
Dalla casella degli strumenti alla tavola da disegno
.png "Cc294749.abd88d9d-ab6c-444e-8037-469cdcb5586a(it-it,Expression.10).png")
.png "Cc294749.25182a96-9a69-478a-9cfe-5b360e6a9bea(it-it,Expression.10).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.10).png") |
Oggetto Button senza nome, che rappresenta il pulsante dell'applicazione con etichetta "Reimposta immagine". In 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.10).png") |
Oggetto Rectangle denominato Rectangle_44, che rappresenta una delle caselle del colore nel campione di colore. |
.png "Cc294749.a5d608f2-bba2-48c5-8b15-2c115db86acc(it-it,Expression.10).png") |
Oggetto Image denominato photo_bathroom, che rappresenta l'immagine di sfondo della stanza. |
.png "Cc294749.f0c1ff71-7814-42ba-806b-7ea92d616e69(it-it,Expression.10).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 (disponibili nei progetti di Silverlight 1.0) |
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 Layout. È 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 Cenni preliminari su testo e proprietà tipografiche. È 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 il modello di un controllo 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 il modello di un controllo 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.10).png")
.png "Cc294749.d7a04618-e35a-44f9-b78c-1f22e38016c1(it-it,Expression.10).png")
.png "Cc294749.eb618397-5283-48be-8396-3449be7b6fbf(it-it,Expression.10).png")
, Penna .png "Cc294749.509dc167-734f-46c9-b012-987ee63450cd(it-it,Expression.10).png")
.png "Cc294749.95e40288-f7a6-4ddc-9d6a-68d0aa46d621(it-it,Expression.10).png")
(disponibile nei progetti di Silverlight 1.0).png "Cc294749.db9f1ff5-6bca-441d-b289-c6781a478a5b(it-it,Expression.10).png")
.png "Cc294749.a87ee957-7fbf-4135-a6ab-6de7e63160aa(it-it,Expression.10).png")
.png "Cc294749.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(it-it,Expression.10).png")
.png "Cc294749.91486eda-6173-4ce8-9610-4f296dcb83d7(it-it,Expression.10).png")
.png "Cc294749.343296b4-5c7d-4145-84cc-91b08ba67a1b(it-it,Expression.10).png")
.png "Cc294749.42165963-00f7-4a33-abcd-b0849edebada(it-it,Expression.10).png")
(disponibile nei progetti di Silverlight 1.0).png "Cc294749.0ee48635-456b-4ebd-b8e4-ce3658417b8e(it-it,Expression.10).png")
.png "Cc294749.a27042f1-4067-4239-b99a-8b2e4c223de0(it-it,Expression.10).png")
.png "Cc294749.31e4dc7e-8cf4-4014-83e4-9b50ec6ee663(it-it,Expression.10).png")
.png "Cc294749.05df1779-a68f-436b-b834-a91b7995a3ec(it-it,Expression.10).png")
.png "Cc294749.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(it-it,Expression.10).png")
.png "Cc294749.015a263c-0b2b-4253-ac57-b86fcb8c9591(it-it,Expression.10).png")
.png "Cc294749.33646a24-f5a1-4b74-9496-e0aaddb922c6(it-it,Expression.10).png")
.png "Cc294749.91bc7bff-27d2-4dfe-93ab-844f2952186f(it-it,Expression.10).png")
.png "Cc294749.be354518-c54c-4f86-9c57-0b4a9d384b3e(it-it,Expression.10).png")
Per ulteriori informazioni sulle caratteristiche di questi tipi di controllo, vedere l'argomento Type Families nella sezione Windows Presentation Foundation su MSDN.
Torna all'inizio
Creare e modificare controlli
È possibile aggiungere un controllo alla tavola da disegno facendo doppio clic sull'icona del controllo nella casella degli strumenti oppure selezionando l'icona del controllo nella casella degli strumenti e quindi utilizzando il mouse per disegnare l'elemento nella tavola da disegno. Per ulteriori informazioni, vedere le procedure disponibili in Controlli. Se si fa doppio clic su un controllo nella Libreria, il controllo 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, inserire un controllo pannello Stack nel pulsante e quindi aggiungere un'immagine e il testo nel pannello Stack.
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 in 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 |
Description |
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 Creare 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 Creare 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 Creare un controllo con intestazione. |
TabControl TabItem MenuItem |
.png "Cc294749.6513a026-499e-4296-8a67-7558b466bd33(it-it,Expression.10).png")
.png "Cc294749.b174a511-dd12-4a45-a986-034de7693de9(it-it,Expression.10).png")
.png "Cc294749.f13847cd-7fdf-4757-a648-d5ece98fcaea(it-it,Expression.10).png")
.png "Cc294749.82c89430-1209-4aa1-b534-cf1cedac74c7(it-it,Expression.10).png")
Per ulteriori informazioni sulle caratteristiche di questi tipi di controlli, vedere l'argomento "Modelli di contenuto" nella sezione Windows Presentation Foundation di MSDN.
Torna all'inizio
Stili e modelli
Come illustrato in precedenza nella sezione Cenni preliminari sui controlli, è 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 Panoramica degli stili e dei modelli.
Torna all'inizio