In Silverlight ogni elemento grafico può essere trasformato in un oggetto con funzioni di tipo "button" che possa reagire all'interazione dell'utente ed eseguire determinate azioni all'entrata, all'uscita ed alla pressione del mouse su di esso. Queste funzionalità sono possibili attraverso la gestione degli eventi MouseEnter, MouseLeave e MouseLeftButtonDown esposti da un oggetto.
Per sfruttare le caratteristiche di Silverlight si possono associare anche alcune animazioni agli eventi del mouse sull'oggetto, tali le animazioni dovranno essere eseguite nei vari eventi attraverso una gestione in javascript.
La prima attività è realizzare la grafica del bottone, per comodità viene posizionato dentro un Canvas e chiamato Button1:
<Canvas RenderTransformOrigin="0.5,0.5" x:Name="Button1" MouseEnter="Button1_onMouseEnter" MouseLeave="Button1_onMouseLeave" MouseLeftButtonDown="Button1_onMouseLeftButtonDown" Width="115.38" Height="44.935" Canvas.Left="20" Canvas.Top="20"> <Canvas.RenderTransform> <TransformGroup> <ScaleTransform ScaleX="1" ScaleY="1"/> <SkewTransform AngleX="0" AngleY="0"/> <RotateTransform Angle="0"/> <TranslateTransform X="0" Y="0"/> </TransformGroup> </Canvas.RenderTransform> <Rectangle Width="114" Height="45.429" Stroke="#FF000000" StrokeLineJoin="Round" RadiusX="11" RadiusY="11" Canvas.Left="0" Canvas.Top="0" x:Name="rectangle"> <Rectangle.Fill> <RadialGradientBrush RadiusX="0.490286" RadiusY="0.512683" Center="0.448772,0.548938" GradientOrigin="0.448772,0.548938"> <RadialGradientBrush.RelativeTransform> <TransformGroup/> </RadialGradientBrush.RelativeTransform> <GradientStop Color="#FFFF0000" Offset="0"/> <GradientStop Color="#FFFFC800" Offset="0.986425"/> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <TextBlock Width="60" Height="22.286" Canvas.Left="26" Canvas.Top="11" TextWrapping="Wrap"><Run Text="Button1"/></TextBlock> </Canvas>
Per associare un evento del mouse ad una funzione è possibile inserire la corrispondente dichiarazione anche direttamente nello XAML:
MouseEnter="Button1_onMouseEnter" MouseLeave="Button1_onMouseLeave" MouseLeftButtonDown="Button1_onMouseLeftButtonDown"
Successivamente è necessario preparare le animazioni per i tre eventi, con l'aiuto di Blend si può procedere anche in maniera visuale; per semplicità all'entrata del mouse (MouseEnter) il pulsante viene fatto ingrandire e viene cambiato di colore, al click invece diventerà leggermente più piccolo:
<Canvas.Resources> <Storyboard x:Name="Button1OnMouseEnter"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Button1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"> <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1.05" KeySpline="1,0,1,1"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Button1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"> <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1.05" KeySpline="1,0,1,1"/> </DoubleAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)"> <SplineColorKeyFrame KeyTime="00:00:00.3000000" Value="#FF5FC84E" KeySpline="1,0,1,1"/> </ColorAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Name="Button1OnMouseLeave"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Button1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"> <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1.0" KeySpline="0,0,1,1"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Button1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"> <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1.0" KeySpline="0,0,1,1"/> </DoubleAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)"> <SplineColorKeyFrame KeyTime="00:00:00.3000000" Value="#FFFF0000" KeySpline="0,0,1,1"/> </ColorAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Name="Button1OnMouseLeftButtonDown"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Button1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"> <DiscreteDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.95"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Button1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"> <DiscreteDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.95"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </Canvas.Resources>
E' importante preparare gli storyboard delle animazioni come risorse, in questo modo è possibile gestirne la riproduzione in seguito agli eventi del mouse:
function Button1_onMouseEnter(sender, mouseEventArgs) { var _Button1OnMouseEnter = sender.findName("Button1OnMouseEnter"); _Button1OnMouseEnter.begin(); sender.Cursor = "Hand"; } function Button1_onMouseLeave(sender, mouseEventArgs) { var _Button1OnMouseLeave = sender.findName("Button1OnMouseLeave"); _Button1OnMouseLeave.begin(); } function Button1_onMouseLeftButtonDown(sender, mouseEventArgs) { var _Button1OnMouseLeftButtonDown = sender.findName("Button1OnMouseLeftButtonDown"); _Button1OnMouseLeftButtonDown.begin(); alert(sender.Name); }
Nell'evento mouseEnter è possibile cambiare l'icona del mouse con la proprietà Cursor, questo aiuta l'utente a capire che può fare click; nell'evento del click del mouse è possibile usare le classiche funzioni Javascript per far aprire una nuova finestra:
window.open("https://www.silverlightitalia.com",'_blank');
oppure per spostare l'utente ad un nuovo indirizzo:
location.href = "https://www.silverlightitalia.com";
Una particolarità delle animazioni in Silverlight è la possibilità di specificare animazioni con un solo "keyFrame" nel quale viene specificato lo stato finale dell'oggetto; non specificare il keyFrame "iniziale" consente all'animazione di mouseLeave di iniziare da qualunque stato si trovi l'oggetto, creando una animazione fluida e naturale.
Ecco il risultato: https://www.silverlightitalia.com/script/demo/5/
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Track 1: @andysal74 con real world #dotnet architectureTrack 2: @apomic80 con modernizzazione di applicazioni #wpf e #winforms con #blazor Siamo in live streaming da: https://aspit.co/netconf-22 #aspilive #netconfit
Organizzare il codice JavaScript utilizzando i moduli
Organizzare i moduli sfruttando CommonJS
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Utilizzare il metodo reduce in JavaScript
Ottimizzare il codice JavaScript utilizzando WeakMap e WeakSet
Confronto tra moduli in Javascript: ES e commonJS
Utilizzo di Set e Array in JavaScript
Utilizzare l'API del browser fetch
3 metodi JavaScript che ogni applicazione web dovrebbe contenere
Utilizzare flat e flatMap per appiattire array innestati in array
I più letti di oggi
- Rilasciata la Beta 2 di Visual Studio 2008
- Specificare il versioning nel path degli URL in ASP.NET Web API
- Cancellare un utente NT con ADSI
- RT @dbochicchio chi ha detto una maglietta di #html5 a tutti i partecipanti? :) http://yfrog.com/gyiqkuhj #RCD6 e non è tutto... :)
- ecco novità e funzionalità aggiunte a #win81 e #wp81 per gli scenari enterprise: https://aspit.co/atq #bldwin