Question

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>

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>