<< settima parte

Control

I Control (o UI design elements) sono le componenti visibili di un'applicazione (Button, list, selectable item…), permettono all'utente di interagire con essa. Mentre si lavora in Blend potete visualizzare (e modificare) i control nell'artboard e i rispettivi comportamenti nel pannello "Interaction" e "properties". Inoltre con i control potete:
- Convertire una proprietà (ad esempio un riempimento) in una resource da poter applicare agli altri control, in modo da ottenere un unico "look" per la vostra applicazione. Ad esempio se volessi convertire la proprietà "Bitmap effect" del rettangolo dovreste selezionare il rettangolo e cliccare sull' "advanced property options" a destra della proprietà, scegliere l'opzione "Convert to new resource".
c01

nella finestra di dialogo cambiate il nome, e scegliete dove volete utilizzare il resource: "application" sarà disponibile in ogni documento, "This document (Window: Window)" sarà disponibile solo nel documento corrente, "This document (object)" sarà disponibile solo per l'oggetto da cui avete creato il resource e per i suoi child.
c02

Per assegnare il resource a altri elementi nell'artboard: selezionate gli elementi, cliccate nelle "advanced property options" della proprietà e cliccate su "local resource" (o su "System resource")
c03

c04

- Potete creare un nuovo template e Style per un control che definiscono sia l'apparenza che il comportamento, i template e gli style possono includere i trigger e usare i resources per settare le proprietà
- Potete aggiungere animazioni e interattività ai vostri control
- Potete programmare comportamenti complessi per i vostri control con gli "event handler method", come per il tasto exit in quest'esempio.
- Potete creare un "custom control" o un "user control" (l'user control è creabile direttamente in blend e non prevede l'uso di codice)

In Blend potete usare diversi tipi di control, sono tutti disponibili nell'asset library e nella toolbox (shape, Layout panel, Document/text, button, listbox, menù, radiobutton, checkbox, decorators…); tutti questi tipi sono divisi in categorie: i Simple Controls non possono avere child element (image, ScrollBar…), i Content controls possono contenere un altro elemento (CheckBox, RadioButton…), Items Controls includono una "collezione" di child element (comboBox, ListBox, Contextmenu…), Haedered Controls includono un header child element che "etichetta" il control (TabControl, TabItem, MenuItem…).
Come già detto un Content control ha un singolo "content property" che definisce la visualizzazione del control, il content property può essere semplice come una stringa di testo o complesso come un MS .NET framework object; se aggiungete un layout panel control a un content control poi al suo interno potete aggiungere elementi child multipli… ad esempio create nell'artboard un button control (lo trovate nell'asset library) e con il doppio click del mouse attivatelo
c05

Cliccando 2 volte sull'icona "stack panel" l'elemento verrà inserito all'interno dell'elemento attualmente selezionato (in questo caso il button)
c06

Dal pannello "properties" ridimensionate il button e lo Stack panel a vostro piacimento, inoltre potete decidere l'orientamento della disposizione dei child element nello stack panel (orizzontale o verticale)
c07

A questo punto potete inserire i child element all'interno dello stack panel
c08

Gli Item Control hanno una Item Property che contiene una collezione di child element, potete aggiungere child di ogni tipo o visualizzare un "array" di item presi da un data source usando data binding. Ad esempio create nell'artboard un ListBox, selezionatelo e create al suo interno i vari child element (di qualsiasi genere: button, rectangle, textbox…), questi verranno posizionati in verticale come in uno stack panel, se uno o + elementi sbordano dal listbox appariranno le scrollbar, potete spostare di posizione i child element direttamente dal pannello "Object and timeline" oppure dalla finestra "Collection Editor window" nel pannello Properties.
c09

Un "TabControl" (lo trovate nell'asset Library) è un Headered Control, una volta creato sull'artboard potete ridimensionarlo e modificarlo a piacere, dall'asset library con il comando "TabItem" potete aggiungere altri tab, all'interno di ogni "TabItem" potrete cambiare l'header e il contenuto.
c10

Style
Potete usare gli style di un control per specificare le proprietà di visualizzazione (ad esempio il colore) e i trigger (per esempio il comportamenti del control al passaggio del mouse), poiché uno style è un resource potete salvarlo separatamente dal control 8ad esempio un button) per poi applicarlo ad altri button.
Per creare uno Style Resource selezionate nell'artboard l'oggetto dal quale volete creare lo style, nel menù object selezionate l'opzione "Edit Style"
c11

Per creare uno style vuoto selezionate "Create Empty" (x gli shape e i text è l'unica opzione disponibile), mentre per creare uno style sulla base dell'oggetto selezionate scegliete l'opzione "Edit a copy". Nella finestra di dialogo scegliete un nome e definite dove volete utilizzare questo stile (in tutti i documenti, nel documento corrente…).
c12

Dal pannello "Resource" potete trascinare lo style appena creato sugli altri button dell'artboard e ottenere velocemente lo stesso stile.
c13

A presto per la nona parte :hello:

---
Questo articolo è stato importato automaticamente dal forum il 31/lug/2014
Per vedere il post originale e/o i commenti sul forum prima di quella data clicca qui