Question

I’m new to silverlight and wpf programming

I’ve just created a simple storyboard in silverlight which increases height and width of a button.

As I wanted, I wrote this code so that whenever I move cursor on the button storyboard begins.

here is the code used for silverlight.

private void button_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
{
    if(Storyboard1.GetCurrentState()!=ClockState.Active)
        Storyboard1.Begin();
}

Everything is fine in above scenario as far as I use silverlight.

But now I wanted to use the same functionality in WPF.

But the problem I faced is that in WPF button click event handler I can’t access the Storyboard1 object.

Please help me to access the storyboard object in event handler.

Answer 1

In WPF, you don’t need code to do this kind of animation; it can all be done in XAML. Example:

    <Button>
        <Button.Style>
            <Style TargetType="Button">
                <Setter Property="Width" Value="50" />
                <Setter Property="Height" Value="20" />
                <Style.Triggers>
                    <EventTrigger RoutedEvent="MouseEnter">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Width" To="100" />
                                <DoubleAnimation Storyboard.TargetProperty="Height" To="40" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="MouseLeave">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Width" To="50" />
                                <DoubleAnimation Storyboard.TargetProperty="Height" To="20" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
    </Button>

Actually, since it’s all in the style, so you can easily apply this animation to multiple buttons without duplication of code:

<Window.Resources>
    <Style x:Key="myGrowingButton" TargetType="Button">
        ...
    </Style>
</Window.Resources>
...
    <Button Style="{StaticResource myGrowingButton}">Button1</Button>
    <Button Style="{StaticResource myGrowingButton}">Button2</Button>
...