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
Evitare memory leaks nelle closure JavaScript
Gestire progetti .NET + React in .NET Aspire
Introduzione ai web component HTML
Gestire codice JavaScript con code splitting e lazy loading
Implementare il throttle in JavaScript
Fornire parametri ad un Web component HTML
Gestione degli eventi nei Web component HTML
Gestire progetti NPM in .NET Aspire
I più letti di oggi
- prenota subito i nostri nuovi libri su #aspnet45, #aspnetmvc 4, #csharp5, #vb2012, #vs2012: https://aspit.co/ad1 15% di sconto @Hoepli_1870
- #Windows10 e #UWP: non perdere il 15/12 il nostro streaming gratuito #aspilive https://aspit.co/Win10-Live
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Impostare una policy di retry con Polly e IHttpClientFactory in #aspnetcore2.1 https://aspit.co/bpm di @GentiliMoreno #webapi #aspnetcore1
- Gestire il warmup di una web app #azure in bilanciamento di carico https://aspit.co/bqo di @CristianCivera
- Gestire la documentazione di più versioni della stessa API su #aspnetcore2.1 https://aspit.co/bqs di @crad77 #webapi
- Web UI interattive con #blazor Server https://aspit.co/bw9 di @GentiliMoreno #aspnetcore3 #netcore3
- Use Firebase in #PWA https://aspit.co/b2g
- Testare le impostazioni CORS di un'applicazione #aspnetcore https://aspit.co/b4p di @crad77 #webapi
- @scottgu mostra come creare app per #wp7 a #pdc10 http://u.aspitalia.com/n3