Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
gurugugnola

Microsoft Expression Blend

Recommended Posts

<< 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.jpg

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.jpg

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.jpg

c04.jpg

- 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.jpg

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

c06.jpg

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.jpg

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

c08.jpg

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.jpg

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.jpg

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.jpg

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.jpg

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

c13.jpg

A presto per la nona parte :hello:

post-3829-1186564975_thumb.jpg


Edited by gurugugnola

Share this post


Link to post
Share on other sites

Complimentoni per l'impegno x fare tutti questi tutorial!!! :eek: :eek: :eek: :eek: tra l'altro molto ben spiegati!!! unica cosa... alla fine ci vorrebbe un piccolo tutorial perchè penso che con una guida arrivato alla fine ti dimentichi quello ke hai imparato all'inizio xke nn lo usi + :D cmq ottimo lavoro...!!! Ho scaricato la demo e grazie al tuo aiuto sto imparando 1 sacco di cose! continua così!

Share this post


Link to post
Share on other sites
Complimentoni per l'impegno x fare tutti questi tutorial!!! :eek::eek::eek::eek: tra l'altro molto ben spiegati!!! unica cosa... alla fine ci vorrebbe un piccolo tutorial perchè penso che con una guida arrivato alla fine ti dimentichi quello ke hai imparato all'inizio xke nn lo usi + :D cmq ottimo lavoro...!!! Ho scaricato la demo e grazie al tuo aiuto sto imparando 1 sacco di cose! continua così!

ogni tanto qualche semplice esempio l'ho messo, in questa discussione invece sto "via via" raccogliendo informazioni + "pratiche" ma non le spiego passo passo (quindi una letta alla guida ci vuole cmq ^_^ ) in giornata dovrei pubblicare qualcosa anche sul data binding

Share this post


Link to post
Share on other sites
ogni tanto qualche semplice esempio l'ho messo, in questa discussione invece sto "via via" raccogliendo informazioni + "pratiche" ma non le spiego passo passo (quindi una letta alla guida ci vuole cmq ^_^ ) in giornata dovrei pubblicare qualcosa anche sul data binding

Infatti, imparare così è piùttosto "pesante". Io penso che fare degli esempi pratici è uno dei modi migliori. Anche perchè quando si segue un tutorial pratico c'è possibilità di mettere in atto passo passo come viene spiegato e quindi ricordare di più. Invece con tutta questa teoria ahimè ... <_< :-D

Cmq complimenti lo stesso per la guida , appena hai tempo libero aiuta noi comuni mortali con qualche esempio pratico :rolleyes:

Ps: Sei un programmatore o un grafico? :blink2:

Share this post


Link to post
Share on other sites
... Sei un programmatore o un grafico? :blink2:

Appena ho tempo forse scriverò qualcosaltro su blend ;)

Lavoro come grafico... Ho tentato la "strada dell'informatica" all'università circa 12 anni fa, ma non era x me e ho abbandonato abbastanza presto.

Share this post


Link to post
Share on other sites
Appena ho tempo forse scriverò qualcosaltro su blend ;)

Lavoro come grafico... Ho tentato la "strada dell'informatica" all'università circa 12 anni fa, ma non era x me e ho abbandonato abbastanza presto.

Capisco ... e come hai imparato grafica?

Da solo al pc ? :-)

Share this post


Link to post
Share on other sites
Capisco ... e come hai imparato grafica?

Da solo al pc ? :-)

ho sempre avuto la passione per il disegno e fin da bambino ho avuto computer in casa, ancora mi ricordo i disegnini "semoventi" sul commodore vic 20 fatti di stanghette e asterischi :lol:

Cmq a breve dovrebbero uscire le prime pubblicazioni cartacee su Blend. Credo in inglese, ma se vuoi lavorare in questo campo (informatica) devi "adattarti" perchè sono le prime a uscire e solitamente le + complete... Non mi ricordo se per i primi di dicembre era prevista anche una pubblicazione in italiano, dovresti guardare nel sito della MS...

Per quanto riguarda la creazione di interfacce non saprei dirti nulla riguardante la programmazione, di questo se ne occupano i miei colleghi

Share this post


Link to post
Share on other sites

complimenti!

Sto affacciandomi a Blend e i tuoi tutorial mi sembrano un'ottimo punto di partenza per superare lo scoglio iniziale di un'interfaccia, più orientata al programmatore che al grafico.

Mi porto avanti nel chiederti un consiglio: quali programmi di 3D possono integrarsi meglio con Blend?

Grazie

F

Share this post


Link to post
Share on other sites
complimenti!

Sto affacciandomi a Blend e i tuoi tutorial mi sembrano un'ottimo punto di partenza per superare lo scoglio iniziale di un'interfaccia, più orientata al programmatore che al grafico.

Mi porto avanti nel chiederti un consiglio: quali programmi di 3D possono integrarsi meglio con Blend?

Grazie

F

Praticamente tutti, perchè il formato supportato da blend è il formato .obj... importa anche i materiali con (credo) diffuse/specular/trasparenza. Se non ricordo male puoi applicare anche delle texture alle varie facce dei solidi, ma non ho mai provato e non so con quale criterio si ricavi le UV.

Naturalmente si può fare un uso limitato del 3d (sia x quantità che qualità) ;)

Share this post


Link to post
Share on other sites
Praticamente tutti, perchè il formato supportato da blend è il formato .obj... importa anche i materiali con (credo) diffuse/specular/trasparenza. Se non ricordo male puoi applicare anche delle texture alle varie facce dei solidi, ma non ho mai provato e non so con quale criterio si ricavi le UV.

Naturalmente si può fare un uso limitato del 3d (sia x quantità che qualità) ;)

Bene!

io è da un po' che non faccio 3d. Prima usavo Lightwave. Ci ritorno adesso e devo scegliere che pacchetto far acquistare. Siccome stiamo iniziando ad usare Blend voglio scegliere il pacchetto anche in base a questo. Appena prendo dimestichezza (se non ho già fatto shopping) faccio qualche test con dei modelli mappati.

Grazie.

F

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...
Aspetta! x