Ho trovato un po' troppo laborioso e ripetitivo scrivere il codice necessario per inserire un contenuto realizzato con Silverlight in una pagina web. Comeprimo esercizio perciò mi sono creato un piccolo controllo ASP.NET che fa tutto ciò che serve. Non che sia difficile predisporre quel minimo di codice javascript che serve, ma secondo me il controllo è molto più efficace e immediato, a patto che usiate una pagina aspx per ospitarlo. Ecco come si inserisce:

 

SilverlightHost Control - Copy Code
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 2 <%@ Register TagPrefix="wpf" 3 Namespace="Elite.Silverlight.Commodities" 4 Assembly="Elite.Silverlight.Commodities" %> 5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 6 <html xmlns="http://www.w3.org/1999/xhtml"> 7 <head runat="server"> 8 <title>Silverlight Test Page</title> 9 </head> 10 <body> 11 <form id="form1" runat="server"> 12 <asp:ScriptManager ID="ScriptManager1" runat="server" /> 13 <wpf:SilverlightHost 14 runat="server" 15 ID="host0" 16 Width="300px" 17 Height="300px" 18 BackColor="#dddddd" 19 XamlFile="~/myxaml.xaml" 20 MaxFrameRate="30" /> 21 </asp:Wizard> 22 </form> 23 </body> 24 </html>

Il controllo si occupa di: inserire un <div> che fa da host per il plugin, di immettere il codice Javascript personalizzabile mediante le sue proprietà e di includere il file aghost.js come risorsa embedded dall'assembly. Naturalmente è scritto in modo tale da permettere l'inserimento di più di un contenuto wpf per singola pagina.

Come al solito il codice è disponibile per il download:


Durante l'ultimo meeting di XeDotNet, ho presentato un piccolo esempio, che è piaciuto molto, che dimostra abbastanza bene alcuni aspetti del DataBinding in Windows Presentation Foundation. Quando per la prima volta mi sono addentrato nell'argomento, sono rimasto molto incuriosito di una peculiarità che riguarda poco il DataBinding tradizionale, ma che regala a WPF una marcia in più rispetto a Windows Forms.

Mi riferisco alla possibilità di collegare tra loro mediante DataBinding gli elementi che compongono una interfaccia e di conseguenza in qualche modo coordinarne movimenti, dimensioni, stili, contenuti e quant'altro. L'esempio più banale, che tipicamente introduce le presentazioni su WPF - comprese le mie - è quello di uno slider che modifica le dimensioni di un oggetto dell'interfaccia. Un esempio di questo tipo, anche se un po' banale però rivela bene e con semplicità la potenza di questo meccanismo. Tuttavia nell'ultimo meeting ho voluto trovare un esempio un po' più di impatto, e che includesse anche qualcosa in più rispetto alla pura e semplice dimostrazione.

Nello screencast cast che potete scaricare in coda a questo post è spiegato passo passo come realizzare l'esempio ritratto nell'immagine. Il giocattolo è costituito da tre ruote dentate, forgiate con Microsoft Expression Designer. Esse sono collegate tra loro mediante DataBinding:

1 <Path.RenderTransform> 2 <RotateTransform 3 x:Name="ruota2Anim" 4 Angle="{Binding ElementName=ruota1Anim, 5 Path=Angle, 6 Converter={StaticResource angleConverter}, 7 ConverterParameter=-2.0}" /> 8 </Path.RenderTransform>

Lo spezzone di codice mostra il punto cruciale dell'esempio. Si tratta di una trasformazione di rotazione, applicata al Path che costituisce una ruota. In particolare in questo caso si tratta della ruota gialla che è collegata a quella arancione. La proprietà Angle, cioè quella che determina l'angolo di rotazione applicato alla ruota, mostra l'applicazione del DataBinding mediante la Markup Extension "Binding". Al suo interno troviamo:

ElementName: Definisce il nome dell'elemento che funge da sorgente dati per la proprietà bindata. Nel nostro caso il riferimento è alla traformazione analoga applicata alla ruota arancione

Path: il nome della proprietà dell'elemento collegato dalla quale attingere. Per questo esempio ci colleghiamo alla stess proprietà Angle dell'elemento riferito.

Converter: Convertitore da utilizzare per calcolare il valore della proprietà. Utilizziamo una Markup Extension ancora una volta per riferire unìistanza di AngleConverter inserita nelle risorse della Window. Questo convertitore non fa altro che applicare un rapporto di demoltiplicazione all'angolo.

ConverterParameter: Parametro generico da passare al convertitore. Il parametro in questo caso sarà il fattore di demoltiplicazione da applicare alla ruota precedente.

1 <Canvas.Triggers> 2 <EventTrigger RoutedEvent="Canvas.Loaded"> 3 <EventTrigger.Actions> 4 <BeginStoryboard> 5 <Storyboard Name="animation"> 6 <DoubleAnimation 7 Duration="0:0:3.0" 8 To="360" 9 RepeatBehavior="Forever" 10 Storyboard.TargetName="ruota1Anim" 11 Storyboard.TargetProperty="Angle" /> 12 </Storyboard> 13 </BeginStoryboard> 14 </EventTrigger.Actions> 15 </EventTrigger> 16 </Canvas.Triggers>

A Completare l'esempio, viene applicata una animazione alla ruota arancione. Per capire il risultato, che comunque è spiegato nella sua completezza nel video, bisogna pensare a come i dati vengono propagati. L'animazione si occupa di applicare una rotazione da 0 a 360 gradi alla ruota arancione. Mediante DataBinding questo valore, opportunamente demoltiplicato passa alla ruota gialla. Il rapporto di conversione è negativo perchè in questo modo la ruota girerà alla rovescia. Infine un analogo Binding avviene tra la ruota gialla e quella viola. Ancora una volta la conversione sarà negativa per far ruotare l'ingranaggio al contrario rispetto alla sua fonte.

Date un'occhiata al risultato e creto che rimarrete affascinati dalla precisione con cui le ruote si ingranano le une con le altre senza alcuna sovrapposizione e senza il minimo errore. Personalmente la cosa che mi alletta di più è pensare che grazie al DataBinding la simulazione del movimento si svolge proprio come si svolgerebbe nella realtà in cui ogni ruota applica una forza alla successiva trasferendole il movimento.

Download Video

(14 MB)

(4 MB)

Sorgenti:

Il video è liberamente ridistribuibile se non subisce tagli e contraffazioni
tags: - categories: XAML

Con questo post inizia una nuova categoria nel mio weblog che ho deciso di chiamare XAML Playground. Letteralmente, per i pochi che non siano avvezzi all'inglese, il parco dei divertimenti di XAML. Ho scelto questo nome perchè l'obbiettivo dei post che daranno vita, spero con continuità a questa serie, è di spiegare Windows Presentation Foundation per mezzo di una serie di "giocattoli" realizzati appositamente per chiarire il funzionamento e le caratteristiche di questa piattaforma.

In questa prima puntata affronteremo una delle componenti più importanti di WPF e cioè il Dependency Property System. Questo sistema - alla base del funzionamento di pressochè qualunque cosa in WPF, dal DataBinding, alle Animazioni - è stato creato per rispondere ad una esigenza importante. La natura dichiarativa di XAML, ha portato gli sviluppatori che hanno realizzato Windows Presentation Foundation a privilegiare le proprietà degli oggetti rispetto ai metodi, arrivando a rappresentare con esse anche i comportamenti e gli eventi. Per questo motivo, a supporto delle proprietà è stato creato il Dependency Property System, che ha l'onere di conferire a dei particolari tipi di proprietà, denominate DependencyProperty, una serie di caratteristiche quali Notifica, Validazione, Coercizione, Ereditarietà, etc. In particolare nel sorgente scaricabile in coda a questo post, è presente un esempio di come creare una dependency property che supporti l'ereditarietà.

I passi per creare la DependencyPropery sono quattro:

Creare un identificatore della proprietà

Il sistema di Dependency Property richiede che le proprietà cui viene conferito questo incarico dispongano di un identificatore sotto forma di un campo statico di tipo DependencyProperty esposto pubblicamente dalla classe cui appartiene. Questo campo dovrà essere usato ogni qualvolta ci si riferisca in qualche modo alla DependencyProperty, ad esempio per associarla ad una animazione oppure ad una trasformazione.

Registrazione

La fase di registrazione consente di stabilire le caratteristiche della proprietà. Nel nostro caso ad esempio associeremo ad essa un metadata che informerà il runtime che la proprietà supporta l'ereditarietà. Questi metadata regolano svariati aspetti della DP, ad esempio relativamente le animazioni, il DataBinding, il layout. Inoltre ad essa è possibile associare uno o più eventi relativi il cambio di valore, la validazione, la coercizione etc. Infine durante la registrazione si da alla proprietà il nome, il tipo e il valore di default.

Creazione del Wrapper

La Dependency Property a questo punto viene esposta per mezzo di una normale proprietà della classe, che utilizza i metodi SetValue() e GetValue() ereditati dall'oggetto DependencyObject, per assegnare e  leggere il valore.

Gestione degli Eventi

Durante la vita dell'oggetto è nostro compito gestire gli eventi che sono generati dal runtime in svariate occasioni. La gestione degli eventi consente ad esempio di conferire alla proprietà la caratteristica di influire sul comportamento della classe cui essa appartiene. Nel codice allegato a questo articolo ad esempio, il valore della proprietà distance viene utilizzato per impostare il margine attorno ad un rettangolo.

Al compimento di questi semplici passi, la nostra DependencyProperty e' pronta all'uso. Per capire meglio quanto descritto è opportuno osservare l'esempio che viene illustrato dal video. In questo screencast, viene appunto dimostrata la creazione di una proprietà Distance, applicata ad una classe che eredita da Border. Scopo di questa proprietà è quello di definire la distanza tra due bordi annidati. Grazie all'ereditarietà il valore della proprietà si propaga ai bordi annidati ottenendo un simpatico effetto tunnel del tutto simile a quello visibile nell'immagine che accompagna l'articolo.

Download Video

640x480 Flash (6,6MB)

640x480 Windows Media Video (2,5 MB)

Sorgenti: XamlPlayground.Screencasts.DependencyProperty.zip

Il video è liberamente ridistribuibile se non subisce tagli e contraffazioni

tags: - categories: XAML

Finalmente grazie alle feste ho avuto un po' il tempo di provare la CTP di WPF/e che è stata pubblicata da qualche giorno. Dirò più avanti le mie impressioni che al momento non sono del tutto positive, ma per il momento vorrei dare qualche indicazione su ciò che ho scoperto per preparare il proprio PC allo sviluppo con WPF/e grazie a un po' di ricerche in rete.

Il primo problema da risolvere è di procurarsi i package da installare per far girare le applicazioni WPF/e. Ecco un breve riepilogo dei link:

Download per Windows:

Download per Mac:

WPF/e SDK:

Update VS2005 per WAP:

Web Application Project:

I file scaricati debbono essere installati nello stesso ordine in cui sono elencati. Il primo è naturalmente il package principale che installerà sulla vostra macchina il necessario per far girare gli esempi che si trovano in rete. Poi vi renderete conto che vi manca un minimo di documentazione perciò l'SDK diventerà vitale. Nel menù di avvio l'SDK aggiunge alcune voci tra cui una che aggiorna Visual Studio 2005 installando un template di progetto. Questi template però non possono essere installati a meno che non siano state installati i seguenti download. Si tratta dell'aggiornamento di Visual Studio per il Web Application Project e il Web Application Project stesso sul quale è basato il template di WPF/e.

Se a questo punto pensate di essere pronti vi sbagliate. In effetti il namespace di WPF/e http://schemas.microsoft.com/client/2007 non è riconosciuto da Visual Studio perciò vi troverete senza intellisense oppure, nel peggiore dei casi se avete precedentemente installato "Cider" vi troverete l'intellisense completo di WPF che non farà altro che creare confusione. Infatti bisogna ricordare che WPF/e è un subset, anche piuttosto limitato, di WPF perciò almeno il 50% del markup che è utilizzabile nei file XAML di WPF non lo è con WPF/e. Per ricondurre Visual Studio alla ragione conviene innanzitutto assegnare l'estenzione .xaml all'editor xml e poi copiare il file wfpe.xsd dalla cartella dell'SDK a quella degli schemi di VS e cioè:

da: C:\Programmi\Microsoft SDKs\WPFE\Help\XSD
a:  C:\Programmi\Microsoft Visual Studio 8\Xml\Schemas

A questo punto sarete in grado di lavorare abbastanza agevolmente anche se devo avvertirvi che la documentazione dell'SDK è quanto di più fallace potreste incontrare nella vostra vita... buon lavoro.

tags: - categories: XAML