Sunday, March 16, 2008

Silverlight 2.0: Resize MediaElement

. Sunday, March 16, 2008

Nel Framework Silverlight attraverso l'oggetto MediaElement è possibile gestire contenuti multimediali( WMV, mp3, WMA, ASX).
In questo semplice tutorial( in cui faccio uso della versione 2 Beta 1) mostrerò come sia possibile avere un MediaElement che si adatta alla dimensione del browser.
Dopo aver creato un'applicazione Silverlight è sufficiente posizionare l'oggetto in esame all'interno di un pannello Canvas:

   1: <Canvas x:Name="box" Background="White">
   2:   <MediaElement x:Name="media" Source="Media\farcry2.wmv" AutoPlay="True">
   3:   </MediaElement>
   4: </Canvas>

I primi problemi compaiono appena si lancia la pagina che mostra il seguente messaggio di errore:
ErrorCode: 4001
Message: AG_E_NETWORK_ERROR
Dopo diversi tentativi l'unico modo per evitare l'errore è stato quello di settare la property Source con un path assoluto:

   1: <Canvas x:Name="box" Background="White">
   2:  <MediaElement x:Name="media" Source="http://localhost:1589/Media/farcry2.wmv" AutoPlay="True" 
   3:                Stretch="Fill">
   4:  </MediaElement>
   5: </Canvas>

Il valore di Stretch indica la modalità di riempimento del video nell'oggetto MediaElement.
MediaElement1 
A questo punto non ci rimane che posizionare nella pagina aspx il controllo server Silverlight:

   1: <asp:Silverlight ID="Xaml1" runat="server" 
   2:      Source="~/ClientBin/SilverlightApplication.xap" 
   3:      Version="2.0"  Width="100%" Height="100%"
   4: />

( NB: per poter utilizzare il controllo server è necessario che nella pagina ci sia un controllo ScriptManager. )
Nell'ultimo passaggio non ci rimane che modificare i valori degli attributi
Width ed Height dell'oggetto MediaElement, con quelli del plugin attraverso l'evento Content.Resized:

   1: App.Current.Host.Content.Resized += new EventHandler(Content_Resized);
   2: ......
   3: void Content_Resized(object sender, EventArgs e)
   4: {
   5:   media.Width = App.Current.Host.Content.ActualWidth;
   6:   media.Height = App.Current.Host.Content.ActualHeight;
   7: }

Un piccolo screencast per osservare il risultato finale:

0 commenti:

Post a Comment