WPF e Expression Blend: Inserire un video in 3D

Ingredienti:

• .NET Framework 3.0 minimo installato e funzionante
• Expression Blend 2 December Preview
• una Window
• un video supportato da WPF da visualizzare
• un’immagine temporanea (maggiori dettagli dopo)

Cominciamo con il dire che la difficoltà della ricetta è alta, anche solo per il fatto che Blend ha il maledetto vizio di crashare un po’ troppo. Si vede che siamo ancora in CTP con questo prodotto. Ricordatevi di premere CTRL+S ad ogni minima modifica, così potete eventualmente riprendere nel punto in cui vi siete interrotti.

Dunque, l’idea è quella di usare esclusivamente l’IDE di Blend per posizionare sullo schermo un video qualsiasi e di renderizzarlo su un piano 3D, che potete ruotare a piacimento sui tre assi XYZ. Come vedremo fra poco, l’IDE non arriva ancora a fare tutto, perciò ad un certo punto dovremo entrare nello XAML per fare qualche modifica a mano.

Cominciamo con il posizionare su una Window vuota uno StackPanel con Width=Auto, Height=Auto, HorizontalAlignment=Center e VerticalAlignment=Center, Orientation=Vertical. Così facendo, qualsiasi controllo noi andremo ad aggiungere allo StackPanel si posizionerà al centro della Window, ben in vista.

Andiamo nel tab Project, clicchiamo con il destro sul file immagine (non il video!) e selezioniamo Insert.

L’immagine, di qualsiasi cosa si tratti, compare nella artboard di Expression Blend. Nello XAML viene aggiunto un tag Image. Se dovesse essere troppo grande, è sufficiente regolare Width e Height per farcela entrare nella Window. Selezioniamo l’immagine sulla artboard, poi andiamo sul menù Tools e poi clicchiamo su Make Image 3D. Questa operazione fa una cosa importantissima: crea nello XAML una struttura complessa composta principalmente da un oggetto Viewport3D, e al cui interno vengono definiti oggetti come Camera, GeometryModel3D, DiffuseMaterial, AmbientLight, etc. La morale è che viene definito l’aspetto che deve assumere l’immagine sul piano 3D: orientamento sui tre assi, illuminazione della scena, punto di vista, distanza dell’osservatore, ampiezza del campo visivo, etc. etc. Tutte queste informazioni vengono combinate dal runtime di WPF per renderizzare l’immagine, sia quando l’applicazione è in esecuzione, sia quando siamo in design-time dentro Blend. Sta di fatto che possiamo selezionare dalla toolbox lo strumento Camera Orbit per traslare/ruotare/zoomare l’immagine.

Ma siamo arrivati ad un punto cruciale. Noi vogliamo renderizzare un video, e non un’immagine. Qui dobbiamo entrare nello XAML per due motivi:

• non sono riuscito ad usare l’IDE per impostare la proprietà Brush del DiffuseMaterial
• ad un certo punto, credevo di esserci riuscito: dal pannello Object and Timeline, esplodete il path Viewport3D/ModelContainer/Content/Model. Da qui, andate nella finestra delle Proprietà. Potete accedere alla proprietà Material. Sorpresa: appare una finestra incompleta, flottante, nella quale è impossibile lavorare in modo decente.
• Blend crasha
• Blend crasha

Alla fine mi sono arreso: sono andato nello XAML e ho impostato a mano il video invece dell’immagine. Andate nello XAML e cercate questo codice:

<GeometryModel3D.Material>
    <DiffuseMaterial>
        <DiffuseMaterial.Brush>
            <ImageBrush Stretch="Fill" ImageSource="Imagesigor_rapper_small.jpg"/>
        </DiffuseMaterial.Brush>
    </DiffuseMaterial>
</GeometryModel3D.Material>

E’ sufficiente sostituire l’oggetto ImageBrush con un oggetto VisualBrush, che questa volta deve puntare al file video che ci interessa:

<GeometryModel3D.Material>
    <DiffuseMaterial>
        <DiffuseMaterial.Brush>
            <VisualBrush>
                <VisualBrush.Visual>
                    <MediaElement Source="Videos/DotNetMarche02.avi" />
                </VisualBrush.Visual>
            </VisualBrush>
        </DiffuseMaterial.Brush>
    </DiffuseMaterial>
</GeometryModel3D.Material>

Salvate lo XAML, ritornare nella visualizzazione Design e vedrete il primo frame del video che appare nello stesso punto dove prima c’era l’immagine. Se prima avevate utilizzate lo strumento Camera Orbiter per manipolare l’oggetto sul piano 3D, vedrete lo stesso effetto applicato al video.

Se compilare ed eseguite il progetto, vedrete partire il video automaticamente.

Technorati Tags: blend Video wpf XAML

Send to Kindle