English Version

Questo è un applicativo per poter includere sul proprio sito web una sequenza di immagini correlate di testo descrittivo e di un link. Viene in genere utilizzata nelle Home Page per dare risalto a delle news o a delle pagine in particolare.

Nell’esempio che segue vengono riassunte tutte le applicazioni sviluppate nel presente blog.

Aggiungere questa applicazione alle vostre pagine web è piuttosto semplice, basta seguire i seguenti passi:

1. Scaricare il PhotoSlider da questo link. Potete anche scaricare l’esempio completo visibile sopra da questo link.
2. Scompattate l’archivio zip scaricato in una cartella e copiate il file PhotoSlider.xap in una cartella del vostro sito web.
3. Aggiungete in una pagina web il seguente codice, nel punto i cui vogliate che appaia il PhotoSlider
   ^?View Code XML

   <object data="data:application/x-silverlight," type="application/x-silverlight-2" width="400" height="270"> <param name="source" value="PhotoSlider.xap"/> <param Name="initParams" value="TextLoading=Caricamento Immagini...,UrlXmlSlides=blog_images.xml,TimeToSlide=5" /> <param name="onerror" value="onSilverlightError" /> <param name="background" value="white" /> <param name="minRuntimeVersion" value="2.0.30923.0" /> <param name="autoUpgrade" value="true" /> <a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;"> <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/> </a> </object>

4. Modificate i seguenti tags secondo le vostre esigenze:
   • <object data=”data:application/x-silverlight,” type=”application/x-silverlight-2″ width=”400″ height=”270″>
     Rispettivamente larghezza ed altezza (in pixels) del PhotoSlider (Si possono anche specificare delle percentuali: width=”100%” height=”80%”).
   • <param name=”source” value=”/ontheroad/photoslider/PhotoSlider.xap“/>Il path dove è posizionato il file PhotoSlider.xap nel vostro sito
     Esempio: se caricate il file PhotoSlider.xap in una cartella come http://www.yoursite.com/folder/PhotoSlider.xap allora il tag andrà modificato in questo modo<param name=”source” value=”http://www.yoursite.com/folder/PhotoSlider.xap“/>
   • <param name=”background” value=”white” />Rappresenta il colore di background del PhotoSlider durante il primo caricamento
   • <param Name=”initParams” value=”TextLoading=Caricamento Immagini…,UrlXmlSlides=blog_images.xml,TimeToSlide=5″ />
     TextLoading indica il testo che apparirà durante il caricamento delle immagini.
     UrlXmlSlides indica il path del file XML che descriverà le immagini da visualizzare.
     TimeToSlide indica l’intervallo di tempo in secondi tra un’immagine e l’altra.
5. Creare il file XML che descrive le immagini da utilizzare. Il formato è il seguente:
   ^?View Code XML

   <images> <picture> <title>FlipBook</title> <image>blog_gallery/flipbook.png</image> <description>Permette di realizzare delle animazioni frame per frame e di includerle nel proprio sito web.</description> <linkUrl>http://www.silverlight-blog.it/?p=60</linkUrl> </picture> <picture> <title>PhotoGallery</title> <image>blog_gallery/photogallery.jpg</image> <description>Includere una fotogallery sul proprio sito web non è mai stato così facile.</description> <linkUrl>http://www.silverlight-blog.it/?p=63</linkUrl> </picture> <picture> <title>Podcast Player</title> <image>blog_gallery/podcastplayer.png</image> <description>Permette di ascolare alcuni podcast soltanto utilizzando un Browser.</description> <linkUrl>http://www.silverlight-blog.it/?page_id=27</linkUrl> </picture> <picture> <title>MinoPlayer</title> <image>blog_gallery/videoplayer.png</image> <description>Tramite questo video player è possibile aggiungere filmati sul proprio sito web.</description> <linkUrl>http://www.silverlight-blog.it/?p=59</linkUrl> </picture> <picture> <title>Previsioni del tempo</title> <image>blog_gallery/weather.png</image> <description>Windget per inserire le previsioni del tempo, personalizzabili per ogni singolo visitatore.</description> <linkUrl>http://www.silverlight-blog.it/?page_id=25</linkUrl> </picture> </images>

   Dove title indica il titolo, image il path dell’immagine, description la descrizione e linkUlr la pagina da aprire quando si clicca sull’immagine (linkUrl può anche essere lasciato vuoto, in questo l’immagine non sarà cliccabile).

6. Infine caricate tutte il file XML e le immagini sul vostro sito.

2 comments

Pochi giorni fa è stata presentata una nuova metodologia di Streaming di contenuti video denominata Silverlight Smooth Streaming.
L’obiettivo di quest’ultima è quello di dare la possibilità agli utenti finali di visualizzare, tramite un player sviluppato in Silverlight, video ad alta definizione senza pre-buffering o buffering durante la riproduzione (che causano il freeze del video in attesa che il buffer si riempia nuovamente).
Il funzionamento è semplice e si basa sulla verifica costante, in tempo reale, della banda e della potenza della CPU disponibili per l’utilizzatore.
Il server invia al player sviluppato in Silverlight dell’utente pezzettini di video da 2 secondi codificati con una data qualità, il player verificando i parametri prima indicati (Banda e CPU) richiede di successivi pezzettini di video (da 2 secondi) codificati con qualità maggiore, se la banda e la CPU permettono, o minore nel caso contrario.
Tutto ciò permette di avere sempre un flusso di video costante e al massimo della qualità possibile che si adatta automaticamente alla banda disponibile (o al carico della CPU).
Il fenomeno del buffer praticamente scompare. Esiste già una prima applicazione Demo sviluppata da Akamai, una delle più grandi aziende di distribuzione di contenuti video via web.

Su questo sito è visibile la demo http://www.smoothhd.com/

No comments yet

Pochi giorni fa è stato rilasciato il nuovo Silverlight Toolkit. Quest’ultimo è una collezione di nuovi controlli che possono essere utilizzati in concomitanza a quelli già presenti in Silverlight.
Questo è un elenco dei nuovi controlli disponibili:

• TreeView
• AutoCompleteBox
• DockPanel
• WraPanel
• Label
• Expander
• HeaderedItemControl
• HeaderedContentControl
• NumericUpDown
• ViewBox
• ButtonSpinner
• ImplicitStyleManager
• Charts (Pie, Bar, Column, Scatter e Line)
• Vari temi

No comments yet

Tutte le applicazioni presenti sul Blog sono ora aggiornate all’ultima versione di Silverlight2.

No comments yet

English Version

Questo è un applicativo per poter includere facilmente sul proprio sito una Fotogallery.

Potete facilmente inserirlo all’interno del vostro sito web seguendo queste semplici istruzioni

1. Scaricate la foto gallery da questo link.Potete anche scaricare l’esempio completo visualizzato sopra, al quale basta semplicemente sostituire le mie immagini con le vostre, da questo link.
2. Scompattatelo e copiate il file SilverlightPhotoGallery.xap in una cartella del vostro sito web
3. Aggiungere il seguente codice HTML nella pagina del vostro sito nel punto in cui volete venga posizionato il player:
   ^?View Code XML

   <object data="data:application/x-silverlight," type="application/x-silverlight-2" width="405" height="350"> <param name="source" value="ClientBin/SilverlightPhotoGallery.xap"/> <param name="onerror" value="onSilverlightError" /> <param name="background" value="white" /> <param name="minRuntimeVersion" value="2.0.31005.0" /> <param name="autoUpgrade" value="true" /> <a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;"> <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/> </a> </object> <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>

4. Modificare i seguenti tags secondo le vostre esigenze:
   • <object data=”data:application/x-silverlight,” type=”application/x-silverlight-2″ width=”405″ height=”350″>
     Rispettivamente larghezza ed altezza (in pixels) del video player (Si possono anche specificare delle percentuali: width=”100%” height=”80%”).
   • <param name=”source” value=”ClientBin/SilverlightPhotoGallery.xap“/>
     Il path dove è posizionato il file SilverlightPhotoGallery.xap nel vostro sito
     Esempio: se caricate il file SilverlightPhotoGallery.xap in una cartella come http://www.yoursite.com/folder/SilverlightPhotoGallery.xap allora il tag andrà modificato in questo modo <param name=”source” value=”http://www.yoursite.com/folder/SilverlightPhotoGallery.xap“/>
   • <param name=”background” value=”black” />
     Rappresenta il colore di background della fotogallery durante il primo caricamento
5. Selezionare le immagini da caricare e crearne le miniature
   Le miniature (che possono essere create con qualsiasi programma di foto editing) devono essere grandi al massimo 45×45 pixel.
6. Modificare il file gallery.xml
   Questo file xml contiene i riferimenti alle foto ed alle loro miniature, nonchè il testo descrittivo di ciascuna foto. Il tutto racchiuso fra i tag <images> ed </images>. Per ogni foto bisogna specificare i seguenti tag:
   <picture>
   <thumbnail>path della miniature</thumbnail>
   <image>path della foto grande</image>
   <text>descrizione, titolo o testo da associare alla immagine</text>
   </picture>
   Nell’esempio sopra un immagine è definita nel seguente modo:
   <picture>
   <thumbnail>/gallery/thumbs/1.jpg</thumbnail>
   <image>/gallery/1.jpg</image>
   <text>A fountain on the Place de la Concorde</text>
   </picture>
7. Caricare il tutto nella cartella dove si trova il file SilverlightPhotoGallery.xap

2 comments

Con questa applicazione si possono creare simpatiche animazioni e condividerle sul proprio sito web.

I FlipBook sono quei disegni che fatti in sequenza su delle pagine di un piccolo quaderno e facendo scorrere velocemente le pagine di quest’ultimo creano un effetto animato.

Questo è un esempio.

No comments yet

English Version
Ecco a voi la nuova versione 1.2 di MinoPlayer, un Player di Video sviluppato in silverlight

Questa nuova versione supporta i Markers. I markers sono dei messaggi di testo che possono essere inseriti all’interno dei video in determinati punti.
Con i markers oltre a poter realizzare sottotitoli si possono anche creare dei messaggi pubblicitari testuali, oppure didascalie.Potete facilmente inserirlo all’interno del vostro sito web seguendo queste semplici istruzioni

1. Scaricate il player da questo link, pesa solo 26Kb :-)
2. Scompattatelo e copiate il file MinoPlayer_Ver1_2.xap in una cartella del vostro sito web
3. Aggiungere il seguente codice HTML nella pagina del vostro sito nel punto in cui volete venga posizionato il player:
   <object data=”data:application/x-silverlight,” type=”application/x-silverlight-2″ width=”500″ height=”330″>
   <param name=”source” value=”ClientBin/MinoPlayer_Ver1_2.xap”/>
   <param name=”onerror” value=”onSilverlightError” />
   <param name=”background” value=”black” />
   <param Name=”initParams” value=”VideoSource=http://silverlight.services.live.com/60107/HD%20Future%20Markers/video.wmv,AutoPlay=false,EnableScrubbing=true,InitialVolume=1,PreviewImage=http://www.silverlight-blog.it/vid/HD_future_Thumb.jpg,LogoImage=http://www.silverlight-blog.it/vid/Logo.png,MarkersTimeView=5″ />
   <param name=”minRuntimeVersion” value=”2.0.31005.0″ />
   <param name=”autoUpgrade” value=”true” />
   <a href=”http://go.microsoft.com/fwlink/?LinkID=124807″ style=”text-decoration: none;”>
   <img src=”http://go.microsoft.com/fwlink/?LinkId=108181″ alt=”Get Microsoft Silverlight” style=”border-style: none”/>
   </a>
   </object>
   <iframe style=’visibility:hidden;height:0;width:0;border:0px’></iframe>
4. Modificare i seguenti tags secondo le vostre esigenze:
5. <object data=”data:application/x-silverlight,” type=”application/x-silverlight-2″ width=”500″ height=”330″>
   Rispettivamente larghezza ed altezza (in pixels) del video player (Si possono anche specificare delle percentuali: width=”100%” height=”80%”).
6. <param name=”source” value=”ClientBin/MinoPlayer.xap“/>
   Il path dove è posizionato il file MinoPlayer.xap nel vostro sito
   Esempio: se caricate il file MinoPlayer.xap in una cartella come http://www.yoursite.com/folder/MinoPlayer.xap allora il tag andrà modificato in questo modo <param name=”source” value=”http://www.yoursite.com/folder/MinoPlayer.xap“/>
7. <param name=”background” value=”black” />
   Rappresenta il colore di background del player
8. <param Name=”initParams” value=”…parametri…“/>
   I Parametri sono delle coppie chiave=valore separate da virgola:
   VideoSource=.. url del video da visualizzare
   AutoPlay=.. true o false, attiva o disattiva l’autoplay del video [OPTIONAL]
   EnableScrubbing=.. true o false, attiva o disattiva la possibilità di spostare il video in avanti o indietro [OPTIONAL]
   InitialVolume=.. un valore numerico compreso tra 0 e 1 (ex. 0.4) che indica il volume iniziale del player (1=100% del volume) [OPTIONAL]
   PreviewImage=.. un url per l’immagine di preview del video[OPTIONAL]
   LogoImage=.. un url per l’immagine del Logo (il logo bianco “Silverlight-Blog.it” nel player sopra è una “Logo Image”) [OPTIONAL]
   MarkersTimeView=.. un intero che indica il numero di secondi da attendere prima che un marker scompaia (di default è 5 secondi). [OPTIONAL]

One comment

English Version
Ecco a voi un Player di Video sviluppato in silverlight

Potete facilmente inserirlo all’interno del vostro sito web seguendo queste semplici istruzioni

1. Scaricate il player da questo link, pesa solo 26Kb :-)
2. Scompattatelo e copiate il file MinoPlayer.xap in una cartella del vostro sito web
3. Aggiungere il seguente codice HTML nella pagina del vostro sito nel punto in cui volete venga posizionato il player:
   <object data=”data:application/x-silverlight,” type=”application/x-silverlight-2″ width=”500″ height=”330″>
   <param name=”source” value=”ClientBin/MinoPlayer.xap”/>
   <param name=”onerror” value=”onSilverlightError” />
   <param name=”background” value=”black” />
   <param Name=”initParams” value=”VideoSource=http://silverlight.services.live.com/60107/HD%20Future/video.wmv,AutoPlay=false,EnableScrubbing=true,InitialVolume=1,PreviewImage=http://www.silverlight-blog.it/vid/HD_future_Thumb.jpg,LogoImage=http://www.silverlight-blog.it/vid/Logo.png” />
   <param name=”minRuntimeVersion” value=”2.0.31005.0″ />
   <param name=”autoUpgrade” value=”true” />
   <a href=”http://go.microsoft.com/fwlink/?LinkID=124807″ style=”text-decoration: none;”>
   <img src=”http://go.microsoft.com/fwlink/?LinkId=108181″ alt=”Get Microsoft Silverlight” style=”border-style: none”/>
   </a>
   </object>
   <iframe style=’visibility:hidden;height:0;width:0;border:0px’></iframe>
4. Modificare i seguenti tags secondo le vostre esigenze:
5. <object data=”data:application/x-silverlight,” type=”application/x-silverlight-2″ width=”500″ height=”330″>
   Rispettivamente larghezza ed altezza (in pixels) del video player (Si possono anche specificare delle percentuali: width=”100%” height=”80%”).
6. <param name=”source” value=”ClientBin/MinoPlayer.xap“/>
   Il path dove è posizionato il file MinoPlayer.xap nel vostro sito
   Esempio: se caricate il file MinoPlayer.xap in una cartella come http://www.yoursite.com/folder/MinoPlayer.xap allora il tag andrà modificato in questo modo <param name=”source” value=”http://www.yoursite.com/folder/MinoPlayer.xap“/>
7. <param name=”background” value=”black” />
   Rappresenta il colore di background del player
8. <param Name=”initParams” value=”…parametri…“/>
   I Parametri sono delle coppie chiave=valore separate da virgola:
   VideoSource=.. url del video da visualizzare
   AutoPlay=.. true o false, attiva o disattiva l’autoplay del video [OPTIONAL]
   EnableScrubbing=.. true o false, attiva o disattiva la possibilità di spostare il video in avanti o indietro [OPTIONAL]
   InitialVolume=.. un valore numerico compreso tra 0 e 1 (ex. 0.4) che indica il volume iniziale del player (1=100% del volume) [OPTIONAL]
   PreviewImage=.. un url per l’immagine di preview del video[OPTIONAL]
   LogoImage=.. un url per l’immagine del Logo (il logo bianco “Silverlight-Blog.it” nel player sopra è una “Logo Image”) [OPTIONAL]

One comment

Ad Orlando, durante il TechEd, Bill Gates ha annunciato l’imminente rilascio della versione Beta 2 del plugin Silverlight2.

Le novità annunciate sono molto corpose, si parla di miglioramenti nei seguenti campi

• Framework di interfaccia
  migliorie in termini di perfomance per le animazioni, migliore gestione degli errori ed infine miglior supporto per l’accesibilità e gestione degli input da tastiera
• Nuovi controlli e miglioramenti degli esistenti
• Strato di Networking
  migliore gestione dei crossDomain, più sicurezza, integrazione dell’upload di contenuti e comunicazione bidirezionale tra server e plugin, addiritura il server potrà fare push verso il plugin
• Nuove Librerie
  tra le quali LINQ-to-JSON, ADO.NET e SOAP

Rimaniamo fiduciosi in attesa.

No comments yet

Per alcune tipologie di applicazioni, la possibilità di poter essere eseguite in modalità fullscreen è molto importante, pensiamo ad esempio ad player di video (magari sfruttando il support al VC-1, la codifica per l’alta definizione) oppure una galleria fotografica.

In questo post vedremo come realizzare un pulsante che porti la nostra applicazione in modalità fullscreen.

L’oggetto a cui faremo riferimento è Application.Current.Host.Content
Questo oggetto ha due proprietà che possono essere lette in qualsiasi momento e sono

• ActualWidth
  è di tipo double (sola lettura) e restituisce l’attuale larghezza in pixel della nostra applicazione Silverlight
• ActualHeight
  è di tipo double (sola lettura) e restituisce l’attuale altezza in pixel della nostra applicazione Silverlight

La terza proprietà rilevante per il nostro scopo è la IsFullScreen, quest’ultima è di tipo bool e può essere letta in qualsiasi momento ma può essere impostata soltanto dentro un evento di tipo:

1. MouseLeftButtonDown
2. MouseLeftButtonUp
3. KeyDown
4. KeyUp

Quindi se noi dentro il nostro metodo public Page() impostassimo la proprietà

 Application.Current.Host.Content.IsFullScreen = true;

per far si che la nostra applicazione vada subito in modalità fullscreen all’avvio, ebbene non succederebbe nulla.

Questa limitazione è stata voluta da Microsoft per impedire che applicazioni Silverlight possano passare alla modalità fullscreen senza nessun intervento da parte dell’utente finale.

Per verificare il funzionamento di quanto descritto creiamo un progetto di test con VisualStudio2008, il file Page.xaml sarà il seguente:

<UserControl x:Class="FullScreenTestSL.Page"
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="Auto" Height="Auto">
    <Grid x:Name="LayoutRoot" Background="White">
		<StackPanel>
			<TextBox x:Name="txtb1" Width="300" Height="30" Text=""></TextBox>
			<Button x:Name="btn1" Width="50" Height="30" MouseLeftButtonUp="btn1_MouseLeftButtonUp"></Button>
		</StackPanel>
	</Grid>
</UserControl>

Mentre il file Page.xaml.cs sarà:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
 
namespace FullScreenTestSL
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
            Application.Current.Host.Content.FullScreenChanged += new EventHandler(Content_FullScreenChanged);
 
            layoutUpdated(Application.Current.Host.Content.ActualHeight, Application.Current.Host.Content.ActualWidth);
        }
 
        void Content_FullScreenChanged(object sender, EventArgs e)
        {
            layoutUpdated(Application.Current.Host.Content.ActualHeight, Application.Current.Host.Content.ActualWidth);
        }
 
        private void btn1_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            Application.Current.Host.Content.IsFullScreen = !Application.Current.Host.Content.IsFullScreen;           
        }
 
        private void layoutUpdated(double height, double widht)
        {
            txtb1.Text = "Cur Height:" + height.ToString() + " Widht: " + widht.ToString();
        }
    }
}

Abbiamo associato all’evento MouseLeftButtonUp (che è uno degli eventi che sono abilitati a gestire la modalità fullscreen) il codice che modifica la proprietà IsFullScreen, in questo caso viene dato un effetto switch fullscreen/normalscreen alla pressione del pulsante.

One comment

Silverlight Blog

Meta Registrati Collegati Valid XHTML XFN WordPress

Feeds Posts Comments

Sponsor

• Ringraziamenti Speciali Hotel Turium in Calabria