Alessandro Del Sole's Blog

{ A programming space about Microsoft® .NET® }
posts - 1909, 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

WPF: Animazioni su video in riproduzione

Riprendendo l'esempio illustrato in un post di qualche giorno fa, nel quale avevamo visto come animare un'ellisse facendola ruotare in un contenitore, oggi vediamo che animare un controllo MediaElement facendogli fare due cose carine: ruoterà su se stesso e in più si muoverà all'interno di un contenitore, il tutto mentre è in corso la riproduzione di un video. Per praticità, utilizzeremo la modalità dichiarativa (quindi XAML). Qualunque sia il vostro linguaggio di interesse, avviatelo e create un nuovo progetto per WPF.

In primo luogo sostituiamo ancora l'elemento Grid con un Canvas. Quindi, implementiamo subito il MediaElement, al cui interno specificheremo anche il codice per la rotazione di 360 gradi (sempre nei Trigger):

        <MediaElement

            Width="160" Height="120"

            Name="MyMedia" RenderTransformOrigin="0.5, 0.5"

            Source="bear.wmv" Stretch="UniformToFill">

           

            <MediaElement.RenderTransform>

                <RotateTransform x:Name="RuotaVideo" />

            </MediaElement.RenderTransform>

           

            <MediaElement.Triggers>

                    <EventTrigger RoutedEvent="MediaElement.Loaded">

                        <BeginStoryboard>

                            <Storyboard>

                                <DoubleAnimation Storyboard.TargetName="RuotaVideo"

   Storyboard.TargetProperty="Angle" From="0" To="360" Duration="0:0:5" RepeatBehavior="Forever" />

                            </Storyboard>

                        </BeginStoryboard>

                    </EventTrigger>

            </MediaElement.Triggers>

        </MediaElement>

La proprietà RenderTransform indica l'oggetto Transformation da applicare al controllo (in questo caso RotateTransform). L'identificatore viene specificato tramite il tag x:Name e ci servirà per implementare l'animazione, che consente di ruotare il controllo di 360 gradi all'infinito.

Ovviamente, la riproduzione del video può essere controllata (soprattutto da codice gestito), ma qui ci interessa vedere come animare il MediaElement e quindi va bene anche la riproduzione automatica. L'ultimo passaggio è quello di aggiungere ancora una doppia animazione congiunta all'interno del contenitore Canvas, affinchè il MediaElement si "muova" all'interno dello stesso:

        <Canvas.Triggers>

            <EventTrigger RoutedEvent="Canvas.Loaded">

                <EventTrigger.Actions>

                    <BeginStoryboard>

                        <Storyboard BeginTime="0" Duration="Forever">

                            <DoubleAnimation Storyboard.TargetName="MyMedia" Storyboard.TargetProperty="(Canvas.Top)" From="0" To="200" AutoReverse="true" BeginTime="0:0:0" Duration="0:0:3" RepeatBehavior="Forever"/>

                            <DoubleAnimation Storyboard.TargetName="MyMedia" Storyboard.TargetProperty="(Canvas.Left)" From="0" To="300" AutoReverse="true" BeginTime="0:0:0" Duration="0:0:2" RepeatBehavior="Forever"/>

                        </Storyboard>

                    </BeginStoryboard>

                </EventTrigger.Actions>

            </EventTrigger>

        </Canvas.Triggers>

Questo è un piccolo screenshot:

ma, ovviamente, provandolo sul vostro pc il risultato a video sarà molto più gradevole! :-) Vi ricordo che nel mio nuovo libro, che dedica 3 capitoli a WPF, si parla molto anche di animazioni e di riproduzione di contenuti multimediali.

Alessandro

Print | posted on martedì 22 gennaio 2008 00:17 | Filed Under [ Windows Presentation Foundation ]

Powered by:
Powered By Subtext Powered By ASP.NET