Using an image as a button in Silverlight. Why is my mouseOver method not working?

Using an image as a button in Silverlight. Why is my mouseOver method not working?

I want to use an image to create a button in Silverlight with a basic effect to make the button look clickable. I have created a .png icon and written some code to make this image slightly larger on mouseover in a storyboard. This is my first time trying to do something like this, so I assume I have left out some simple call to one of the static resources. What am I missing? :

<Style TargetType="Button"                  x:Key="styleA">             <Setter Property="Template">                 <Setter.Value>                     <ControlTemplate TargetType="Button">                         <Grid x:Name="RootElement"                             Background="Transparent">                             <Grid.Resources>                                 <Storyboard x:Key="MouseOver State">                                     <DoubleAnimation Storyboard.TargetName="buttonScale"                                                 Storyboard.TargetProperty="ScaleX"                                                 To="1.2"                                                 Duration="00:00:00.25"/>                                     <DoubleAnimation Storyboard.TargetName="buttonScale"                                                 Storyboard.TargetProperty="ScaleY"                                                 To="1.2"                                                 Duration="00:00:00.25" />                                 </Storyboard>                                  <Storyboard x:Key="Normal State">                                     <DoubleAnimation Storyboard.TargetName="buttonScale"                                                 Storyboard.TargetProperty="ScaleX"                                                 To="1"                                                 Duration="00:00:00.25" />                                     <DoubleAnimation Storyboard.TargetName="buttonScale"                                                 Storyboard.TargetProperty="ScaleY"                                                 To="1"                                                 Duration="00:00:00.25" />                                 </Storyboard>                                  <Storyboard x:Key="Pressed State">                                     <DoubleAnimation Storyboard.TargetName="buttonScale"                                                 Storyboard.TargetProperty="ScaleX"                                                 To="1.4"                                                 Duration="00:00:00.25" />                                     <DoubleAnimation Storyboard.TargetName="buttonScale"                                                 Storyboard.TargetProperty="ScaleY"                                                 To="1.4"                                                 Duration="00:00:00.25" />                                 </Storyboard>                               </Grid.Resources>                             <ContentPresenter Content="{TemplateBinding Content}"                                            RenderTransformOrigin="0.5,0.5">                                 <ContentPresenter.RenderTransform>                                     <ScaleTransform x:Name="buttonScale" />                                 </ContentPresenter.RenderTransform>                             </ContentPresenter>                         </Grid>                     </ControlTemplate>                 </Setter.Value>              </Setter>         </Style> 

A simple enough storyboard as you can see. Now, when I implement my button, nothing happens. What am I doing wrong? Here is my code to create a button :

    <StackPanel>         <Button Width="50"            x:Name="Test"            Style="{StaticResource styleA}">             <StackPanel Orientation="Vertical">                 <Image Source="test.png" />                 <TextBlock Text="Please get bigger" />             </StackPanel>         </Button>     </StackPanel> 

Answers & Comments...

Answer: 1

Have you looked at Button Styles and Templates? You need to place these storyboards inside a VisualStateManager.VisualStateGroups, like this:

<ControlTemplate TargetType="Button">     <Grid x:Name="RootElement" Background="Transparent">         <VisualStateManager.VisualStateGroups>             <VisualStateGroup x:Name="CommonStates">                 <VisualState x:Name="MouseOver">                     <Storyboard>                         <DoubleAnimation Storyboard.TargetName="buttonScale" Storyboard.TargetProperty="ScaleX" To="1.2" Duration="00:00:00.25"/>                         <DoubleAnimation Storyboard.TargetName="buttonScale" Storyboard.TargetProperty="ScaleY" To="1.2" Duration="00:00:00.25" />                     </Storyboard>                 </VisualState>                 <VisualState x:Name="Pressed">                     <Storyboard>                         <DoubleAnimation Storyboard.TargetName="buttonScale" Storyboard.TargetProperty="ScaleX" To="1.4" Duration="00:00:00.25" />                         <DoubleAnimation Storyboard.TargetName="buttonScale" Storyboard.TargetProperty="ScaleY" To="1.4" Duration="00:00:00.25" />                     </Storyboard>                 </VisualState>                 <VisualState x:Name="Normal"/>             </VisualStateGroup>         </VisualStateManager.VisualStateGroups>         <ContentPresenter Content="{TemplateBinding Content}" RenderTransformOrigin="0.5,0.5">             <ContentPresenter.RenderTransform>                 <ScaleTransform x:Name="buttonScale" />             </ContentPresenter.RenderTransform>         </ContentPresenter>     </Grid> </ControlTemplate> 

by : Zabavskyhttp://stackoverflow.com/users/1199711

---