Creazione di un'interfaccia utente usando Blend per Visual Studio

 

Per la documentazione più recente di Visual Studio 2017 RC, vedere Documentazione di Visual Studio 2017 RC.

Blend per Visual Studio semplifica la progettazione di app per Windows Desktop, Web, Windows Phone e Windows Store basate su XAML. Offre la stessa esperienza di progettazione XAML di base disponibile in Visual Studio e aggiunge finestre di progettazione visive per attività avanzate, quali animazioni e comportamenti.

Se non si ha familiarità con Blend per Visual Studio, dedicare alcuni minuti all'esame delle funzionalità specifiche dell'area di lavoro. In questo argomento è disponibile una breve panoramica.

System_CAPS_ICON_note.jpg Nota

Per una panoramica delle funzionalità di progettazione, ad esempio la tavola da disegno, la finestra Struttura documento e la finestra Dispositivo, vedere Creazione di un'interfaccia utente tramite XAML Designer.

Contenuto dell'argomento:

È possibile usare il pannello Strumenti in Blend per Visual Studio per modificare e creare oggetti nell'applicazione. Per creare oggetti, si seleziona lo strumento e si disegna sulla tavola da disegno con il mouse.

Strumenti di selezione Selezionare gli oggetti e percorsi.

Usare lo strumento Selezione diretta per selezionare gli oggetti annidati e i segmenti di percorso.
Callout AStrumenti relativi a sfumatura e tratto
Strumenti di visualizzazione Permettono di modificare la visualizzazione della tavola da disegno, ad esempio per la panoramica e lo zoom.Callout BStrumenti per i tracciati
Strumenti per i pennelli Permettono di usare gli attributi visivi di un oggetto, ad esempio per trasformare un pennello, disegnare un oggetto o selezionare gli attributi di un oggetto da applicare a un altro oggetto.Callout CStrumenti per le forme
Strumenti per gli oggetti Permettono di disegnare gli oggetti più comuni sulla tavola da disegno, ad esempio tracciati, forme, pannelli di layout, testo e controlli.Callout DPannelli di layout
Strumenti per gli asset Permettono di accedere al pannello Asset e di visualizzare l'ultimo asset usato nella libreria.Callout EControlli testo
Callout FControlli comuni

Breve video: Configurare le funzionalità installate Barra degli strumenti.

Tutti i controlli sono disponibili nel pannello Asset, analogo alla Casella degli strumenti in Visual Studio. Oltre ai controlli, nel pannello Asset è disponibile tutto ciò che può essere aggiunto alla tavola da disegno, inclusi gli stili, gli elementi multimediali, i comportamenti e gli effetti.

DescriptionCasella di ricerca Digitare nella casella Cerca per filtrare l'elenco di asset.
DescriptionModalità griglia e Modalità elenco Consentono di passare dalla visualizzazione Modalità griglia alla visualizzazione Modalità elenco e viceversa.
DescriptionCategorie di asset Fare clic su una categoria o sottocategoria per visualizzare l'elenco di asset corrispondente.
DescriptionStili Permette di visualizzare tutti gli stili disponibili nel dizionario risorse.
DescriptionDescrizione Permette di visualizzare una descrizione della categoria o sottocategoria di asset selezionata.

Usare questo pannello per organizzare gli oggetti nella tavola da disegno e, se si vuole, per animarli.

Visualizzazione oggetti Permette di visualizzare una struttura ad albero visuale di un documento. È possibile accedere a diversi livelli di dettaglio. È anche possibile aggiungere livelli per organizzare ulteriormente gli oggetti nella tavola da disegno. In questo modo è possibile bloccarli e nasconderli come gruppi.
Indicatore della modalità di registrazione Permette di verificare quando è in corso la registrazione delle modifiche delle proprietà in una sequenza temporale.
Selezione storyboard Permette di visualizzare un elenco degli storyboard creati.
Chiude lo storyboard Permette di chiudere lo storyboard corrente.
Opzioni di storyboard Permette di creare, duplicare, invertire, eliminare, rinominare o chiudere uno storyboard.
Controlli di riproduzione Permette di esplorare la sequenza temporale. Per spostarsi nella sequenza temporale, o eseguire lo scrubbing, in alternativa è possibile trascinare l'indicatore di riproduzione.
Reimposta l'ambito Permette di reimpostare l'ambito della visualizzazione oggetti sull'oggetto radice o ambito precedente. È possibile farlo solo quando si modifica uno stile o modello.
Registra fotogramma chiave Permette di registrare uno snapshot delle proprietà dell'oggetto selezionato nell'istante corrente.
Opzioni snapping Permette di impostare l'allineamento della sequenza temporale, la risoluzione di snap e di disattivare l'allineamento della sequenza temporale.
Mostra/Nascondi, Blocca/Sblocca Permettono di mostrare o nascondere le opzioni di visibilità e blocco della visualizzazione oggetti.
Posizione indicatore di riproduzione nella sequenza temporale Permette di visualizzare l'ora corrente in millisecondi. In questo campo è possibile immettere direttamente un valore di tempo per passare a un istante specifico. La precisione dipende dalla risoluzione di snap impostata in Opzioni snapping.
Indicatore di riproduzione Permette di determinare il punto nel tempo in cui si trova l'animazione. L'indicatore di riproduzione può essere trascinato lungo la sequenza temporale per visualizzare l'animazione in anteprima.
Fotogrammi chiave impostati su sequenze temporali Permette di modificare un valore di proprietà in un istante specifico.
Pulsante per la modifica dell'ordine degli oggetti Permette di impostare l'ordine di visualizzazione degli oggetti. Fare clic su questo pulsante per disporre gli oggetti nella visualizzazione struttura secondo l'ordine Z (da primo a ultimo) o in base all'ordine di markup, ovvero l'ordine in cui compaiono nella visualizzazione XAML.
Zoom sequenza temporale Permette di impostare la risoluzione di zoom della sequenza temporale. Lo zoom avanti permette di modificare un'animazione a un maggior livello di dettaglio, mentre lo zoom indietro permette di ottenere una panoramica del comportamento di un'animazione su periodi di tempo più lunghi. Se si applica lo zoom avanti, ma non è possibile impostare un fotogramma chiave nella posizione corrispondente all'istante desiderato, verificare che la risoluzione di snap sia sufficientemente elevata.
Area di composizione della sequenza temporale Permette di visualizzare la sequenza temporale e spostare i fotogrammi chiave trascinandoli o usando i relativi menu di scelta rapida.

Usare questo pannello per visualizzare e modificare le proprietà di un oggetto. È anche possibile impostarle direttamente sulla tavola da disegno. In questo caso, le modifiche alle proprietà si rifletteranno nel pannello Proprietà.

Categorie Permette di espandere e comprimere le categorie delle proprietà. Fare clic su Espandi Description e su Comprimi Comprimi per visualizzare o nascondere i dettagli della categoria.

Nome e Tipo Permette di visualizzare l'icona, il nome e il tipo dell'oggetto selezionato.
Disponi per Permette di disporre alfabeticamente le proprietà per nome, database di origine o categoria.
Proprietà dei pennelli Permette di configurare le proprietà visive dei pennelli, ad esempio Fill, Stroke e Foreground.
Editor dei colori: può essere usato per pennelli tinta unita e sfumatura.
Selezione colori Permette di selezionare un colore.
Caselle del colore Permette di visualizzare il colore iniziale, il colore corrente e l'ultimo colore.
Contagocce Permette di usare il colore di qualsiasi elemento sullo schermo. Il Contagocce colore è disponibile quando Pennello tinta unita è selezionato. Il Contagocce sfumatura è disponibile quando il Pennello sfumatura è selezionato.
Proprietà ed eventi Permette di impostare le proprietà o scegliere gli eventi per un elemento selezionato.
Casella di ricerca Permette di cercare le proprietà. Filtrare le proprietà visualizzate digitando nella casella Cerca.
Schede Editor del pennello: consentono di selezionare un editor del pennello. È possibile scegliere Nessun pennello, Pennello tinta unita, Pennello sfumato, Pennello tessera o Risorsa pennello.
Risorse colore Permette di applicare lo stesso colore a proprietà diverse. La scheda Risorse colore include Risorse locali e Risorse di sistema.
Spazio colori RGB Permette di modificare il colore cambiando i valori per gli editor di numero R, G o B (rosso, verde, blu).
Canale alfa: consente di modificare il valore alfa usando l'editor di numero accanto ad A.
Converti colore in risorsa Permette di convertire il colore selezionato in una risorsa di colore. Le risorse di colore sono disponibili quando si fa clic sulla scheda Risorse colore.
Valore hex Permette di visualizzare il valore esadecimale del colore visualizzato.
Cursore sfumatura Visualizzato solo se si seleziona un pennello sfumato.
Mostra proprietà avanzate Permette di visualizzare le categorie di proprietà che vengono usate meno.

Breve video: Configurare le funzionalità installate Pannello Proprietà.

Inserire i controlli e modificarne il comportamento
Animare oggetti
Disegnare forme e tracciati
Designing XAML in Visual Studio and Blend for Visual Studio

Mostra: