Microsoft: video portale

Il portale annunciato al MIX08 avrà lo scopo di raggruppare tutti i video disponibili sul sito Microsoft in modo da poterli consultare in modo più rapido/semplice, attraverso l'uso di parole chiavi e categorie.
Inoltre sarà possibile condividerli con i propri amici o linkarli dai propri siti/blog.
Il tutto sfruttando la nuova tecnologia: Silverlight.
Il preview è disponibile al seguente indirizzo:
http://preview.microsoft.com/video/
NB: Sarà attivo ad aprile.
Fonte: Channel 10

Read More »»

Silverlight: control skin

Dal blog di Corrina Barber è possibile provare/scaricare 4 diversi skin per i controlli Silverlight:

	Bubbly test, download
	Red test, download
	Flat test, download
	Rough test, download

Read More »»

Cropper: cattura schermate

Di software freeware e di terze parti che ci consentono di catturare una schermata c'è ne sono veramente tanti. 
Fra questi, personalmente vi segnalo Cropper, di Brian Scott, scritto in C#( con tanto di codice sorgente a disposizione).
E' possibile sia catturare un'intera pagina che una determinata area .
Nel primo caso basta premere il tasto stamp, nel secondo è sufficiente fare doppio click sull'icona di Clopper e ridimensionare il frame mobile che compare.
Possiamo salvare l'immagine ottenuta, direttamente su disco nel formato Bmp, Jpg o Png, oppure nella Clipboard o inviarla a stampante.

Read More »»

Esempio Deep Zoom

DeepZoom è una tecnologia che ci consente di navigare attraverso una collezione di immagini e di poter zoomare fino a giungere al massimo del dettaglio.
Tutto questo inviando al client solo ciò che viene effettivamente visualizzato.
La tecnologia è stata presentata in occasione del MIX08, con la seguente demo.
Qui è stato pubblicato il codice di un interessante esempio( è necessario Silverlight 2 Beta 1)

Read More »»

Poster Silverlight 2.0

Per chi desidera scaricare e/o stampare il poster su Silverlight 2.0 può farlo direttamente dal blog del grande Brad Abrams:
Versione Jpg ( circa 6 Mb)
Versione Png ( 6.5 Mb)
Versione Tif ( circa 20 Mb)

Read More »»

Silverlight 2.0: Resize MediaElement

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

Read More »»

StickyNotes per VS 2008

Add-in per Visual Studio 2008 che aggiunge all'ambiente la possibilità di inserire delle note per ciascun file che compone la solution.
Per maggiori dettagli al progetto vi rimando alla Code Gallary di MSDN.

Read More »»

aNobii

aNobii è un servizio in stile web 2.0 che permette a chiunque di mostrare sul sito/blog la propria collezione di libri, con la possibilità di scoprire altri volumi interessanti, di utenti che presentano gusti simili in fatto di lettura.
E' un mezzo per replicare online la propria biblioteca indicando quali libri, eventualmente, devono essere pubblici o privati. Inoltre è possibile inserire commenti, tag, partecipare a discussioni, visionare le collezioni degli altri lettori, aggiungere un particolare utente come vicino e tanto altro.
Un social network  che può creare dipendenza ma su cui vale la pena farsi almeno un giro.

Read More »»

ASP.NET 3.5: Playlist per MediaPlayer

Tra i vari formati supportati dal controllo MediaPlayer, avevo menzionato in un precedente post, anche l'ASX, quest'ultimo è un metafile XML che può definire una playlist di file audio/video:

   1: <ASX version="3.0">

   2:  <TITLE>Client Playlist</TITLE>

   3:   <ENTRY>

   4:     <TITLE>Pirates, Vikings and Knights II</TITLE>

   5:     <REF HREF="media/Pirates, Vikings and Knights II.wmv"/>

   6:   </ENTRY>

   7:   <ENTRY>

   8:       <TITLE>Farcry2</TITLE>

   9:       <REF HREF="media/Farcry2.wmv"/>

  10:   </ENTRY>

  11:   <ENTRY>

  12:       <TITLE>Duke Nukem Forever</TITLE>

  13:       <REF HREF="media/DNF.wmv"/>

  14:   </ENTRY>

  15: </ASX>

All'interno del tag ENTRY andiamo a definire i sub elementi che nel caso specifico descrivono tre file video.
Tramite i tag TITLE e REF vado a definire rispettivamente il titolo e il puntatore al contenuto multimediale.
Oltre ai tag appena citati possiamo indicare anche:
AUTHOR l'autore del file,

COPYRIGHT per specificare le informazioni sul copyright del video/audio,
STARTTIME indica l'inizio del rendering del flusso,
DURATION la durata totale del flusso.
Per conoscere la lista degli elementi utilizzabili in un file asx vi rimando alla documentazione su msdn. 
La nostra playlist si può arricchire nel seguente modo:

   1: <ASX version="3.0">

   2:  <TITLE>Client Playlist</TITLE>

   3:   <ENTRY>

   4:     <TITLE>Pirates, Vikings and Knights II</TITLE>

   5:     <REF HREF="media/Pirates, Vikings and Knights II.wmv"/>

   6:     <STARTTIME VALUE="00:00:00.00" />

   7:     <DURATION VALUE="00:02:59.00" />

   8:   </ENTRY>

   9:   <ENTRY>

  10:       <TITLE>Farcry2</TITLE>

  11:       <REF HREF="media/Farcry2.wmv"/>

  12:       <STARTTIME VALUE="00:00:00.00" />

  13:       <DURATION VALUE="00:01:21.00" />

  14:   </ENTRY>

  15:   <ENTRY CLIENTSKIP="NO">

  16:       <TITLE>Duke Nukem Forever</TITLE>

  17:       <REF HREF="media/DNF.wmv"/>

  18:       <STARTTIME VALUE="00:00:00.00" />

  19:       <DURATION VALUE="00:01:10.00" />

  20:   </ENTRY>

  21: </ASX>

A questo punto possiamo anche definire dei marcatori utilizzando delle miniature di immagini:

   1: <asp:MediaPlayer ID="mpPlayer" runat="server" Height="640px" Width="480px" 

   2:    MediaSource="Media/myPlayList.asx" MediaSkin="Expression" AutoPlay="true">

   3:   <Chapters>

   4:     <asp:MediaChapter ThumbnailImageSource="~/media/image1.jpg" 

   5:        Position="0" Title="Titolo" />

   6:     <asp:MediaChapter ThumbnailImageSource="~/media/image2.jpg" 

   7:        Position="60.00" Title="Titolo1" />

   8:     <asp:MediaChapter ThumbnailImageSource="~/media/image3.jpg" 

   9:        Position="120.00" Title="Titolo2" />

  10:   </Chapters>

  11: </asp:MediaPlayer>

L'oggetto MediaChapter presenta tre property ThumbnailImageSource, Position e Title.
In particolare Position corrisponde ai secondi di inizio sequenza di quel particolare marcatore.
(Un aiuto nella creazione dei marcatori ci viene dato da Microsoft Expression Media Encoder.)
Il risultato finale:

Read More »»

Sono fra noi...

Dopo il post del mitico Scott Guthrie possiamo anche noi sperimentare:
Microsoft Silverlight Tools Beta 1 for Visual Studio 2008
Inoltre è stato rilasciato anche ASP.NET MVC Preview 2

Read More »»

Expression Community

Da qualche ora è online la nuova community dedicata interamente ai prodotti Expression Studio:
Expression Studio
Expression Web
Expression Design
Expression Blend
Expression Media
Expression Encoder.
Per un migliore apprendimento di questi nuovi strumenti sono presenti tutorials, video training, webcast, virtual labs, forum ecc.

Read More »»

Style Button in WPF

Questo post nasce da una richiesta di un utente su di un forum, in cui si cercava di utilizzare una tecnologia di ben 20 anni fa, GDI, per la costruzione di un'interfaccia abbastanza complessa che a mio modesto parere può essere resa, dal punto di vista della costruzione, molto semplice, se si utilizza una tecnologia moderna come WPF.
L'articolo è suddiviso in due parti.
La prima in cui tramite uno screencast di circa 5 minuti, mostro come con la potenza di un'ambiente come Blend è possibile creare facilmente qualsiasi interfaccia.
Nella seconda parte invece ci spostiamo in Visual Studio 2008, in cui con il codice XAML prodotto è possibile definire gli stili dei 4 button.
(NB: Purtroppo per problemi tecnici il video non presenta l'audio, ma spero sia comunque autoesplicativo).
Per il video con una risoluzione più alta, cliccare qui.

 
Il codice XAML, come detto in precedenza, è alla base dell'oggetto Style che rappresenta il punto principale in cui definire le caratteristiche grafiche dei controlli presenti a livello di Page se stiamo creando una WPF Browser Application o a livello di Windows nel caso di WPF Application.
Il concetto di stile se vogliamo è molto simile a quello dei css per il web, ma come avrete già compreso tale concetto è stato esteso anche alle applicazioni windows. 
Il file di risorse Application.Resources della WPF Browser Application in cui definisco gli stili è così formato:

   1: <Application.Resources>

   2:  <Style x:Key="TestButton1" TargetType="Button">

   3:   <Setter Property="Template">

   4:    <Setter.Value>

   5:     <ControlTemplate TargetType="{x:Type Button}">

   6:      <Grid Cursor="Hand">

   7:       <Path Name="btnUpRight" Width="50" Height="50" Fill="#FFF44E06" Stretch="Fill" 
          StrokeThickness="1" 
          Data="M0,0 C27.614237,0 50,22.385763 50,50 L25,50 C25,36.192883 13.807119,25 0,25 L0,0 z">

   8:        <Path.Stroke>

   9:         <RadialGradientBrush>

  10:          <GradientStop Color="#FF000000" Offset="0"/>

  11:          <GradientStop Color="#FF000000" Offset="1"/>

  12:          <GradientStop Color="#FF00E7FA" Offset="0.553"/>

  13:         </RadialGradientBrush>

  14:        </Path.Stroke>

  15:       </Path>

  16:      </Grid>

  17:      <ControlTemplate.Triggers>

  18:       <Trigger Property="IsFocused" Value="True"/>

  19:       <Trigger Property="IsDefaulted" Value="True"/>

  20:       <Trigger Property="IsMouseOver" Value="True">

  21:        <Setter Property="Stroke"  TargetName="btnUpRight">

  22:         <Setter.Value>

  23:          <RadialGradientBrush>

  24:           <GradientStop Color="#FF000000" Offset="0"/>

  25:           <GradientStop Color="#FF000000" Offset="1"/>

  26:           <GradientStop Color="#FF002FFA" Offset="0.553"/>

  27:          </RadialGradientBrush>

  28:         </Setter.Value>

  29:        </Setter>

  30:       </Trigger>

  31:       <Trigger Property="IsPressed" Value="True">

  32:        <Setter Property="Fill" Value="#FF633319" TargetName="btnUpRight"/>

  33:       </Trigger>

  34:       <Trigger Property="IsEnabled" Value="False"/>

  35:      </ControlTemplate.Triggers>

  36:     </ControlTemplate>

  37:    </Setter.Value>

  38:   </Setter>

  39:  </Style>

  40:  <Style x:Key="TestButton2" TargetType="Button">

  41:   <Setter Property="Template">

  42:    <Setter.Value>

  43:     <ControlTemplate TargetType="{x:Type Button}">

  44:      <Grid Cursor="Hand">

  45:       <Path Name="btnBottomRight" Width="50" Height="50" Fill="#FFFC750A" Stretch="Fill" 
           StrokeThickness="1" 
           Data="M0,0 C27.614237,0 50,22.385763 50,50 L25,50 C25,36.192883 13.807119,25 0,25 L0,0 z" 
           RenderTransformOrigin="0.5,0.5">

  46:        <Path.Stroke>

  47:         <RadialGradientBrush>

  48:          <GradientStop Color="#FF000000" Offset="0"/>

  49:          <GradientStop Color="#FF000000" Offset="1"/>

  50:          <GradientStop Color="#FF00E7FA" Offset="0.553"/>

  51:         </RadialGradientBrush>

  52:        </Path.Stroke>

  53:        <Path.RenderTransform>

  54:         <TransformGroup>

  55:          <ScaleTransform ScaleX="1" ScaleY="1"/>

  56:          <SkewTransform AngleX="0" AngleY="0"/>

  57:          <RotateTransform Angle="90"/>

  58:          <TranslateTransform X="0" Y="0"/>

  59:         </TransformGroup>

  60:        </Path.RenderTransform>

  61:       </Path>

  62:      </Grid>

  63:      <ControlTemplate.Triggers>

  64:       <Trigger Property="IsFocused" Value="True"/>

  65:       <Trigger Property="IsDefaulted" Value="True"/>

  66:       <Trigger Property="IsMouseOver" Value="True">

  67:        <Setter Property="Stroke"  TargetName="btnBottomRight">

  68:         <Setter.Value>

  69:          <RadialGradientBrush>

  70:           <GradientStop Color="#FF000000" Offset="0"/>

  71:           <GradientStop Color="#FF000000" Offset="1"/>

  72:           <GradientStop Color="#FF002FFA" Offset="0.553"/>

  73:          </RadialGradientBrush>

  74:         </Setter.Value>

  75:        </Setter>

  76:       </Trigger>

  77:       <Trigger Property="IsPressed" Value="True">

  78:        <Setter Property="Fill" Value="#FF633319" TargetName="btnBottomRight"/>

  79:       </Trigger>

  80:       <Trigger Property="IsEnabled" Value="False"/>

  81:      </ControlTemplate.Triggers>

  82:     </ControlTemplate>

  83:    </Setter.Value>

  84:   </Setter>

  85:  </Style>

  86:  <Style x:Key="TestButton3" TargetType="Button">

  87:   <Setter Property="Template">

  88:    <Setter.Value>

  89:     <ControlTemplate TargetType="{x:Type Button}">

  90:      <Grid Cursor="Hand">

  91:       <Path Name="btnBottomLeft" Width="50" Height="50" Fill="#FFFF9400" Stretch="Fill" 
          StrokeThickness="1" 
          Data="M0,0 C27.614237,0 50,22.385763 50,50 L25,50 C25,36.192883 13.807119,25 0,25 L0,0 z" 
          RenderTransformOrigin="0.5,0.5">

  92:        <Path.Stroke>

  93:         <RadialGradientBrush>

  94:          <GradientStop Color="#FF000000" Offset="0"/>

  95:          <GradientStop Color="#FF000000" Offset="1"/>

  96:          <GradientStop Color="#FF00E7FA" Offset="0.553"/>

  97:         </RadialGradientBrush>

  98:        </Path.Stroke>

  99:        <Path.RenderTransform>

 100:         <TransformGroup>

 101:          <ScaleTransform ScaleX="1" ScaleY="1"/>

 102:          <SkewTransform AngleX="0" AngleY="0"/>

 103:          <RotateTransform Angle="180"/>

 104:          <TranslateTransform X="0" Y="0"/>

 105:         </TransformGroup>

 106:        </Path.RenderTransform>

 107:       </Path>

 108:      </Grid>

 109:      <ControlTemplate.Triggers>

 110:       <Trigger Property="IsFocused" Value="True"/>

 111:       <Trigger Property="IsDefaulted" Value="True"/>

 112:       <Trigger Property="IsMouseOver" Value="True">

 113:        <Setter Property="Stroke"  TargetName="btnBottomLeft">

 114:         <Setter.Value>

 115:          <RadialGradientBrush>

 116:           <GradientStop Color="#FF000000" Offset="0"/>

 117:           <GradientStop Color="#FF000000" Offset="1"/>

 118:           <GradientStop Color="#FF002FFA" Offset="0.553"/>

 119:          </RadialGradientBrush>

 120:         </Setter.Value>

 121:        </Setter>

 122:       </Trigger>

 123:       <Trigger Property="IsPressed" Value="True">

 124:        <Setter Property="Fill" Value="#FF633319" TargetName="btnBottomLeft"/>

 125:       </Trigger>

 126:       <Trigger Property="IsEnabled" Value="False"/>

 127:      </ControlTemplate.Triggers>

 128:     </ControlTemplate>

 129:    </Setter.Value>

 130:   </Setter>

 131:  </Style>

 132:  <Style x:Key="TestButton4" TargetType="Button">

 133:   <Setter Property="Template">

 134:    <Setter.Value>

 135:     <ControlTemplate TargetType="{x:Type Button}">

 136:      <Grid Cursor="Hand">

 137:       <Path Name="btnUpLeft" Width="50" Height="50" Fill="#FFFFC300" Stretch="Fill" 
            StrokeThickness="1" 
            Data="M0,0 C27.614237,0 50,22.385763 50,50 L25,50 C25,36.192883 13.807119,25 0,25 L0,0 z" 
            RenderTransformOrigin="0.5,0.5">

 138:        <Path.Stroke>

 139:         <RadialGradientBrush>

 140:          <GradientStop Color="#FF000000" Offset="0"/>

 141:          <GradientStop Color="#FF000000" Offset="1"/>

 142:          <GradientStop Color="#FF00E7FA" Offset="0.553"/>

 143:         </RadialGradientBrush>

 144:        </Path.Stroke>

 145:       <Path.RenderTransform>

 146:        <TransformGroup>

 147:         <ScaleTransform ScaleX="1" ScaleY="1"/>

 148:          <SkewTransform AngleX="0" AngleY="0"/>

 149:          <RotateTransform Angle="-90.000000000000014"/>

 150:          <TranslateTransform X="0" Y="0"/>

 151:        </TransformGroup>

 152:       </Path.RenderTransform>

 153:      </Path>

 154:     </Grid>

 155:     <ControlTemplate.Triggers>

 156:      <Trigger Property="IsFocused" Value="True"/>

 157:      <Trigger Property="IsDefaulted" Value="True"/>

 158:      <Trigger Property="IsMouseOver" Value="True">

 159:       <Setter Property="Stroke"  TargetName="btnUpLeft">

 160:        <Setter.Value>

 161:         <RadialGradientBrush>

 162:          <GradientStop Color="#FF000000" Offset="0"/>

 163:          <GradientStop Color="#FF000000" Offset="1"/>

 164:          <GradientStop Color="#FF002FFA" Offset="0.553"/>

 165:         </RadialGradientBrush>

 166:        </Setter.Value>

 167:       </Setter>

 168:      </Trigger>

 169:      <Trigger Property="IsPressed" Value="True">

 170:       <Setter Property="Fill" Value="#FF633319" TargetName="btnUpLeft"/>

 171:      </Trigger>

 172:      <Trigger Property="IsEnabled" Value="False"/>

 173:     </ControlTemplate.Triggers>

 174:    </ControlTemplate>

 175:   </Setter.Value>

 176:  </Setter>

 177: </Style>

 178: </Application.Resources>

Come si può notare a differenza dei css, gli stili in WPF presentano il concetto dei trigger, cioè la possibilità di indicare delle condizioni per regolare lo stile dei controlli, per esempio come deve apparire un button nel caso dello stato IsPressed.
A questo punto non ci resta che associare ai 4 button i relativi stili:

   1: <Grid Height="336" Name="grid1" Width="460">

   2:  <Button Name="button1" Width="50" Height="50" 

   3:         Style="{StaticResource TestButton1}" 

   4:         Canvas.Left="330" Canvas.Top="216"

   5:         Click="button1_Click">

   6: </Button>

   7: <Button Name="button2" Width="50" Height="50" 

   8:         Style="{StaticResource TestButton2}" 

   9:         Canvas.Left="330" Canvas.Top="216"

  10:         Click="button2_Click"  

  11:         HorizontalAlignment="Right" 

  12:         Margin="0,0,205,93" VerticalAlignment="Bottom">

  13: </Button>

  14: <Button Name="button3" Width="50" Height="50"

  15:         Style="{StaticResource TestButton3}" 

  16:         Canvas.Left="280" Canvas.Top="216" 

  17:         Click="button3_Click"

  18:         VerticalAlignment="Bottom" 

  19:         HorizontalAlignment="Left" Margin="155,0,0,93">

  20: </Button>

  21: <Button Name="button4" Width="50" Height="50"

  22:         Style="{StaticResource TestButton4}" 

  23:         Canvas.Left="280" Canvas.Top="216"

  24:         Click="button4_Click" Margin="155,143,0,143"

  25:         HorizontalAlignment="Left">

  26: </Button>

  27: <Label Height="28" Margin="182,0,0,130" 

  28:        Name="lblIdButton" VerticalAlignment="Bottom"

  29:        HorizontalAlignment="Left" Width="46">Tasto:

  30: </Label>       

  31: </Grid>

Per completezza ho implementato anche l'evento Click in cui semplicemente modifico il testo della label lblIdButton posta nel centro descritto dai 4 tasselli:

   1: private void button1_Click(object sender, RoutedEventArgs e)

   2: {

   3:   lblIdButton.Content = "1";

   4: }

Risultato finale:

Read More »»