#5 - Realizzare un bottone in Silverlight

di Alessio Leoncini, in Silverlight 1.0, 28 febbraio 2008

Archiviato in: Javascript, Silverlight, Silverlight - animazioni, Windows Presentation Foundation, XAML

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("http://www.silverlightitalia.com",'_blank');

oppure per spostare l'utente ad un nuovo indirizzo:

 
location.href = "http://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: http://www.silverlightitalia.com/script/demo/5/

Nota: Questo script contiene un allegato.