Ciao,
in Silverlight ogni elemento grafico può essere trasformato in un bottone gestendo gli eventi MouseEnter, MouseLeave e MouseLeftButtonDown.
Puoi preparare il tutto realizzando in Blend le animazioni che dovranno essere eseguite nei vari eventi e farne gestione attraverso javascript.
Ad esempio potresti iniziare creando la grafica del tuo bottone, per comodità io lo metterei dentro un Canvas e lo chiamo 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>
Come vedi ho già inserito le dichiarazioni degli eventi direttamente nello XAML :
MouseEnter="Button1_onMouseEnter" MouseLeave="Button1_onMouseLeave" MouseLeftButtonDown="Button1_onMouseLeftButtonDown"
Poi preparare le animazioni per i tre eventi, per semplificare faccio che all'entrata del mouse (MouseEnter) il pulsante si ingrandisce un po' e cambia di colore, al click invece lo faccio
diventare 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>
Ho preparato gli storyboard delle animazioni come risorse, in questo modo posso gestirne la riproduzione in seguito agli eventi del mouse, così:
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 puoi 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 puoi usare le classiche funzioni Javascript per far aprire una nuova finestra:
window.open("http://www.silverlightitalia.com",'_blank');
oppure spostando l'utente ad un nuovo indirizzo:
location.href = "http://www.silverlightitalia.com";
E se necessario aggiungendo i dovuti controlli per scrivere del Javascript compatibile con tutti i browser.
Il concetto è che in seguito all'evento del mouse dai inizio alla specifica animazione che hai preparato, all'inizio può sembrare macchinoso in quanto non c'è un controllo specifico Button che ha già tutta la logica pronta, ma ti da grande flessibilità di buttonizzare ogni cosa.
Ti voglio far notare una particolarità, se ci fai caso ho preparato tutte animazioni con un solo "keyFrame", diciamo quello finale in cui voglio che la forma assuma una certa grandezza o colore, non specificando il keyFrame "iniziale" consente all'animazione di mouseLeave di iniziare da qualunque stato si trovi l'oggetto, creando una animazione fluida e naturale.
In Flash dovevamo scrivere un codice particolare per scorrere all'indietro i fotogrammi di una animazione.
Spero ti sia utile.
