Alessandro Del Sole's Blog

{ A programming space about Microsoft® .NET® }
posts - 1908, comments - 2047, trackbacks - 352

My Links

News

Your host

This is me! Questo spazio è dedicato a Microsoft® .NET®, di cui sono molto appassionato :-)

Cookie e Privacy

Disabilita cookie ShinyStat

Microsoft MVP

My MVP Profile

Microsoft Certified Professional

Microsoft Specialist

Xamarin Certified Mobile Developer

Il mio libro su VB 2015!

Pre-ordina il mio libro su VB 2015 Pre-ordina il mio libro "Visual Basic 2015 Unleashed". Clicca sulla copertina per informazioni!

Il mio libro su WPF 4.5.1!

Clicca sulla copertina per informazioni! E' uscito il mio libro "Programmare con WPF 4.5.1". Clicca sulla copertina per informazioni!

These postings are provided 'AS IS' for entertainment purposes only with absolutely no warranty expressed or implied and confer no rights.
If you're not an Italian user, please visit my English blog

Le vostre visite

I'm a VB!

Guarda la mia intervista a Seattle

Follow me on Twitter!

Altri spazi

GitHub
I miei progetti open-source su GitHub

Article Categories

Archives

Post Categories

Image Galleries

Privacy Policy

Silverlight e Visual Basic 2008: esempio di controllo utente animato

Notoriamente non sono l’uomo delle applicazioni ASP.NET bensì di quelle Windows con Visual Basic 2008. Devo dire, però, che Microsoft Silverlight 2.0 mi sta davvero appassionando quindi ho intenzione di affrontare in futuro questa straordinaria tecnologia dal punto di vista di noi developer Visual Basic, visto che per C# ci sono fin troppi esempi! J

 

In attesa di scrivere qualche articolo introduttivo su VB T&T dedicato all’argomento e di realizzare alcuni screen-cast, iniziamo a scrivere un po’ di codice in questo blog su situazioni specifiche. Quella di oggi nasce da una richiesta fattami da un mio amico, il quale mi ha chiesto come, in un’applicazione Silverlight, si possa creare uno user control personalizzato ed utilizzarlo più volte nella pagina principale dell’applicazione stessa. Nello user control ci dev’essere un pulsante: quando si fa clic sul pulsante, deve essere visualizzato un messaggio di testo, diverso per ciascuna istanza del controllo utente, gestendo il tutto nella pagina principale.

 

Vediamo subito, quindi, come raggiungere questo obiettivo. Supponendo di avere già installato Silverlight 2.0 Beta 2 e i relativi tool per Visual Studio 2008, apriamo l’IDE e creiamo un nuovo progetto Silverlight in Visual Basic utilizzando l’apposito template illustrato in figura:

 

 

Il nome del progetto è del tutto irrilevante. Successivamente, Visual Studio 2008 ci mostra una finestra richiedendo il tipo di applicazione che vogliamo creare. Dalla combo box, selezionate il tipo Web Application Project. Quando la creazione del progetto è terminata, l’IDE si presenta in modo familiare a chi ha già lavorato con WPF, quindi designer e editor di codice XAML. Silverlight, infatti, analogamente a WPF, gestisce il lato design proprio tramite il noto linguaggio di markup. Noterete, poi, come la soluzione sia costituita da due progetti, uno costituente il progetto Silverlight vero e proprio, l’altro costituente un’applicazione Web per ASP.NET che gestisce il funzionamento del tutto all’interno del browser web.

La prima cosa che vogliamo fare, quindi, è creare un controllo utente custom. In Solution Explorer, fate clic destro sul progetto Silverlight e selezionate il comando Add new item del menu contestuale. Quando la finestra riportante i template disponibili compare, selezionate il modello chiamato Silverlight User Control, come in figura:

 

 

Abbiamo così a disposizione un nuovo file .Xaml in cui definire il nostro nuovo controllo. Trattandosi di un esempio puramente didattico, il nostro controllo implementerà solamente un pulsante (il cui funzionamento verrà gestito dalla pagina principale) e una scritta (controllo TextBlock) che, grazie a un’animazione, si dimensionerà ad intermittenza. Una volta apprese le nozioni di base potrete poi creare i vostri controlli utente complessi. In primo luogo, modificate gli attributi Width ed Height dell’oggetto UserControl affinchè i loro valori siano, rispettivamente, 300 e 200.

 

Utilizzeremo il controllo Grid proposto per default dall’IDE, suddividendolo in due righe, una per il TextBlock e una per il pulsante:

 

        <Grid.RowDefinitions>

            <RowDefinition/>

            <RowDefinition Height="50"/>

        </Grid.RowDefinitions>

 

 

In Silverlight, le animazioni possono essere definite all’interno delle risorse di un contenitore. Utilizzando la Grid, procediamo con lo scrivere il seguente XAML:

 

        <Grid.Resources>

            <Storyboard x:Name="TextAnimation">

                <DoubleAnimation Storyboard.TargetName="ClickText"

                                 Storyboard.TargetProperty="FontSize"

                                 From="0" To="36"

                                 Duration="0:0:1"

                                 RepeatBehavior="Forever"

                                 AutoReverse="True"/>

            </Storyboard>

        </Grid.Resources>

 

Se avete familiarità con WPF, sapete che l’oggetto Storyboard può essere considerate come un contenitore di animazioni. In questo caso assegnamo allo Storyboard un identificatore perché l’animazione verrà avviata da codice Visual Basic. Nella DoubleAnimation, l’animazione vera e propria, stiamo dicendo a Silverlight che l’oggetto da animare è ClickText (TargetName), ossia il successivo TextBlock, nella sua proprietà FontSize (TargetProperty) il cui valore deve andare da 0 a 36 in un secondo di tempo (Duration), all’infinito (RepeatBehavior), in andata e in ritorno (AutoReverse).

Quindi, giusto per rendere un po’ più gradevole il nostro controllo, attribuiamo uno sfondo a gradiente che vada dal marrone al rosso al bianco anche al contrario:

 

        <Grid.Background>

            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

                <GradientStop Offset="0" Color="Brown"/>

                <GradientStop Offset="0.3" Color="Red"/>

                <GradientStop Offset="0.5" Color="White"/>

                <GradientStop Offset="0.7" Color="Red"/>

                <GradientStop Offset="1" Color="Brown"/>

            </LinearGradientBrush>

        </Grid.Background>

 

Ovviamente, il designer si aggiorna automaticamente alle modifiche fatte tramite XAML. Ora predisponiamo il nostro TextBlock, che conterrà una semplice scritta il cui colore è definito da un gradiente lineare:

 

        <TextBlock Text="Clicca il pulsante!" FontSize="8" x:Name="ClickText">

               <TextBlock.Foreground>

                   <LinearGradientBrush>

                       <GradientStop Color="Yellow" Offset="0"/>

                       <GradientStop Color="Orange" Offset="1"/>

                   </LinearGradientBrush>

               </TextBlock.Foreground>

        </TextBlock>

 

Notate, anche in questo caso, l’assegnazione di un identificatore che serve all’animazione precedentemente definita. Da ultimo, aggiungiamo al controllo un normalissimo pulsante:

 

      <Button x:Name="Button1"

                    Margin="100,100,0,0"

                    Width="100" Height="30" Content="Click me!"/>

 

Al termine, il nostro UserControl si presenta così:

 

 

Come accennato in precedenza, l’animazione che abbiamo definito non parte automaticamente. Infatti, non si trova all’interno di un elemento BeginStoryBoard (come magari avremmo fatto in WPF). Dobbiamo, quindi, avviarla esplicitamente da codice Visual Basic. Attivate l’editor Visual Basic sul file di code-behind corrispondente al nuovo controllo e scrivete il codice seguente, relativo al gestore dell’evento Loaded del controllo:

 

    Private Sub SilverlightControl1_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded

        TextAnimation.Begin()

    End Sub

 

Ciascuna animazione espone un metodo Begin che ne consente l’avvio. Esistono anche i metodi Pause e Stop il cui significato si spiega da solo. Volutamente non gestiamo l’evento Click del pulsante, poiché lo faremo nella pagina principale dell’applicazione. Questo è lo scenario prospettatomi dal mio amico e quindi intraprendiamo questa strada. Pertanto, ora attiviamo l’editor XAML sul file Page.Xaml che costituisce il controllo di partenza della nostra applicazione Silverlight. Per utilizzare controlli utente personalizzati definiti nell’applicazione, è necessario definire un namespace Xml nel nostro codice XAML. Ciò premesso, modificate il tag di apertura dell’oggetto UserControl in questo modo:

 

<UserControl x:Class="SilverlightApplication1.Page"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:a="clr-namespace:SilverlightApplication1"

    Width="600" Height="600">

 

Abbiamo definito un namespace Xml identificato dalla lettera “a” che fa riferimento al namespace di primo livello della nostra applicazione, grazie al quale saremo in grado di utilizzare tutti gli user control personalizzati che intendiamo prevedere. Ora suddividiamo la Grid in tre righe: le prime due conterranno altrettante istanze del controllo utente precedentemente definito, la terza conterrà un TextBlock che mostrerà, con animazione, uno specifico testo a seconda di quale pulsante viene premuto. Lo XAML di suddivisione in righe:

 

        <Grid.RowDefinitions>

            <RowDefinition/>

            <RowDefinition/>

            <RowDefinition Height="200"/>

        </Grid.RowDefinitions>

 

Vogliamo ora far sì che, quando viene premuto il pulsante sul nostro user control, venga mostrata una scritta che appaia roteando e ingrandendo le proprie dimensioni col passare dei secondi. Prima di definire il controllo TextBlock che verrà animato, definiamo, all’interno di una singola Storyboard, due DoubleAnimation, una per la rotazione del controllo e una per l’ingrandimento del carattere (tenete in considerazione anche i commenti):

 

        <Grid.Resources>

            <!--Una Storyboard può contenere più di un'animazione

                In questo caso la prima esegue la rotazione a 360°,

                la seconda l'ingrandimento del testo, il tutto

                avviene contestualmente proprio perchè sono nella

                stessa Storyboard-->

            <Storyboard x:Name="labelAnimation">

                <DoubleAnimation Storyboard.TargetName="rotateText"

                                 Storyboard.TargetProperty="Angle"

                                 From="0" To="360"

                                 Duration="0:0:2"/>

                <DoubleAnimation Storyboard.TargetName="myText"

                                 Storyboard.TargetProperty="FontSize"

                                 From="0" To="36"

                                 Duration="0:0:2"/>

            </Storyboard>

        </Grid.Resources>

 

 

Le due animazioni sono piuttosto intuitive. RotateText e MyText sono, rispettivamente, l’effetto di rotazione e il TextBlock che definiremo tra breve. Così facendo, in un sol colpo avremo due animazioni applicate contemporaneamente allo stesso oggetto (attiveremo l’animazione più avanti da codice Visual Basic). Ora possiamo aggiungere, per esempio, due istanze del nostro controllo utente:

 

        <!--Per richiamare il mio user control definito nell'altro

            XAML, utilizzo il mio namespace (a) seguito dai :

            Anche qui Intellisense aiuta nella scelta del controllo-->

        <a:SilverlightControl1 Grid.Row="0" x:Name="Controllo1"/>

 

        <a:SilverlightControl1 Grid.Row="1" x:Name="Controllo2"/>

 

Notate come si renda necessario l’utilizzo del namespace Xml da noi definito e come Intellisense ci venga in aiuto nella selezione dei controlli disponibili. A entrambi i controlli assegnamo una posizione nella griglia e un identificatore. Concludiamo lo XAML scrivendo il codice che definisce un TextBlock il cui testo sarà determinato a run-time e che comparirà mediante doppia animazione:

 

        <TextBlock Grid.Row="2" FontSize="36" FontWeight="Bold"

                   x:Name="myText">

            <TextBlock.RenderTransform>

                <RotateTransform Angle="0" CenterX="300" CenterY="0" x:Name="rotateText"/>

            </TextBlock.RenderTransform>

           

            <TextBlock.Foreground>

                <ImageBrush ImageSource="DSCF0356.JPG" Stretch="UniformToFill"/>

            </TextBlock.Foreground>

        </TextBlock>

 

Due cose da sottolineare. In primo luogo, abbiamo applicato un effetto di rotazione (RotateTransform). In realtà, l’oggetto non viene ruotato perché l’angolo specificato è zero, ma la definizione dell’effetto ci occorre perché su questo interverrà l’animazione sopra definita. In secondo luogo, il colore di primo piano del testo è costituito da una fotografia. Nel progetto sorgente che potete scaricare da questo indirizzo, troverete una fotografia inclusa ma potrete utilizzarne una vostra. E’ molto interessante ricordare, come già avveniva in WPF, che è possibile utilizzare immagini e video come riempimento degli oggetti.

Ora la nostra pagina contiene due controlli personalizzati identici tra loro ma che, eccezion fatta per l’avvio di un’animazione, non sono affatto operativi. Ciò posto, attivate l’editor di codice Visual Basic 2008 sul file Page.Xaml.vb. Lo scenario richiesto è quello di visualizzare testo differente a seconda di quale pulsante viene cliccato. Noi ne abbiamo due, pertanto possiamo prevedere due delegati aggiunti a run-time, che vadano a intervenire sull’evento Click di ciascun pulsante, come nel seguente codice:

 

    Private Sub OnFirstButtonClick(ByVal sender As Object, ByVal e As RoutedEventArgs)

        myText.Text = "Hai cliccato il primo!"

        labelAnimation.Begin()

    End Sub

 

    Private Sub OnSecondButtonClick(ByVal sender As Object, ByVal e As RoutedEventArgs)

        myText.Text = "Hai cliccato il secondo!"

        labelAnimation.Begin()

    End Sub

 

Oltre a mostrare il testo, viene avviata l’animazione sul testo stesso (la vedremo tra breve in azione). Ora utilizziamo l’istruzione AddHandler affinché i gestori di evento siano correttamente riconosciuti:

 

    Public Sub New()

        InitializeComponent()

 

        AddHandler Me.Controllo1.Button1.Click, AddressOf OnFirstButtonClick

        AddHandler Me.Controllo2.Button1.Click, AddressOf OnSecondButtonClick

    End Sub

 

Il tutto è pronto. Potete avviare l’applicazione e premere entrambi i pulsanti per vedere in azione l’animazione sul testo specificato, oppure potete vederne un’anteprima qui sotto grazie a Silverlight Streaming J

 

 

Il codice sorgente è disponibile a questo indirizzo dell’area download di VB T&T e spero vi sia stato utile.

 

Alessandro

 

Print | posted on sabato 16 agosto 2008 22:17 | Filed Under [ Visual Basic Silverlight e Windows Phone ]

Powered by:
Powered By Subtext Powered By ASP.NET