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
Realizzare un effetto gradiente tramite composition API nella Universal Windows Platform
Creare un controllo Expander in un'app Xamarin Forms
Gestire un observable quando la finestra del browser non è attiva in Angular
Uso dei design-time data nelle applicazioni della Universal Windows Platform
Sviluppare applicazioni con supporto al doppio schermo con Xamarin
Modificare il behavior del controllo SwipeView in Xamarin Forms
Avviare una registrazione audio e video in una applicazione della Universal Windows Platform
Winget: un nuovo package manager per Windows
Utilizzare le JavaScript Resize Observer API per rispondere ai cambiamenti di dimensione di un oggetto HTML
Testare una pagina web con Puppeteer e Puppeteer recorder
Dark mode e selezione dei temi in un'applicazione Xamarin Forms
Blazor <3 Javascript
I più letti di oggi
- Creare template HTML con Slim
- Migrare da Entity Framework 6 ad Entity Framework Core 5
- Chiamare direttamente un numero di telefono con HTML5
- Introduzione al framework Javascript jQuery con esempi pratici di utilizzo
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Effettuare il redirect da HTTP a HTTPS con la Azure CDN