Friday, March 28, 2008

Microsoft: video portale

. Friday, March 28, 2008
0 commenti

MicrosoftVideoPortal 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 »»

Wednesday, March 26, 2008

Silverlight: control skin

. Wednesday, March 26, 2008
0 commenti

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

Bubbly Bubbly test, download
red Red test, download
flat Flat test, download
rough Rough test, download

Read More »»

Monday, March 24, 2008

Cropper: cattura schermate

. Monday, March 24, 2008
0 commenti

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 »»

Saturday, March 22, 2008

Esempio Deep Zoom

. Saturday, March 22, 2008
0 commenti

DeepZomm 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 »»

Tuesday, March 18, 2008

Poster Silverlight 2.0

. Tuesday, March 18, 2008
0 commenti

PosterSilverlight 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 »»

Sunday, March 16, 2008

Silverlight 2.0: Resize MediaElement

. Sunday, March 16, 2008
0 commenti

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:

Read More »»

Friday, March 14, 2008

StickyNotes per VS 2008

. Friday, March 14, 2008
0 commenti

scn1 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 »»

Wednesday, March 12, 2008

aNobii

. Wednesday, March 12, 2008
0 commenti

anobiiaNobii è 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 »»

Saturday, March 8, 2008

ASP.NET 3.5: Playlist per MediaPlayer

. Saturday, March 8, 2008
0 commenti

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:

playList

Read More »»

Wednesday, March 5, 2008

Sono fra noi...

. Wednesday, March 5, 2008
0 commenti

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 »»

Monday, March 3, 2008

Expression Community

. Monday, March 3, 2008
0 commenti

MicrosoftExpressionDa 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 »»

Saturday, March 1, 2008

Style Button in WPF

. Saturday, March 1, 2008
1 commenti

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:


ButtonWPF

Read More »»