mty
mty

Reputation: 97

start wpf animation from other element

how can I start this animation not at Window.Loaded event? I want to fire it at the click method of this button in the xaml.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Button x:Name="myButton" Grid.Column="1" Height="25" Width="100">Start</Button>
    <Canvas Name="Can1">
        <Rectangle Name="Rect1" Canvas.Left="10" Fill="LightSeaGreen"
       Stroke="Bisque"
       StrokeThickness="5"
       Width="100" Height="100">
            <Rectangle.Triggers>
                <EventTrigger RoutedEvent="Window.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetName="Rect1"
                                Storyboard.TargetProperty="(Canvas.Left)"
                                From="10" To="100"
                                Duration="0:0:2"

                                />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Rectangle.Triggers>
        </Rectangle>
    </Canvas>
</Grid>

Upvotes: 1

Views: 1789

Answers (1)

Clemens
Clemens

Reputation: 128061

Move the Storyboard to the Button's Triggers, in an EventTrigger on the Button.Click event:

<Button x:Name="myButton" Grid.Column="1" Height="25" Width="100" Content="Start">
    <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="Rect1"
                                     Storyboard.TargetProperty="(Canvas.Left)"
                                     To="100" Duration="0:0:2"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Button.Triggers>
</Button>
<Canvas x:Name="Can1">
    <Rectangle x:Name="Rect1" Canvas.Left="10" Width="100" Height="100"
               Fill="LightSeaGreen" Stroke="Bisque" StrokeThickness="5"/>
</Canvas>

Upvotes: 1

Related Questions