start animation at button click

Question

Hi,

I have a simple query. I want to increase the width of a Canvas from 0 to 200, at the click of a button. Its very simple to animate it using DoubleAnimation.  However, I want the animation to start on click of button, not on any event raised by Canvas itself. Also, I want to do it through XAML only, no code. Can you please suggest me what to write in TargetType of style and Target Property etc.

I have written some code which is working fine, but the animation triggers on Canvas.IsMouseOver. I want it on Button.Click. (Button is not inside Canvas)

<Style x:Key 

="expandStyle"> 

 <Style.Triggers> > 

   <MultiTrigger.Conditions> 

    <Condition Property="Canvas.IsMouseOver" Value="True"/> 

    <Condition Property="Canvas.Width"Value="440"/> 

   </MultiTrigger.Conditions> 

   <MultiTrigger.EnterActions> 

    <BeginStoryboard Name ="ExpandGrid"> 

     <Storyboard > 

      <DoubleAnimation Duration="00:00:20" From="1" To="450" Storyboard.TargetProperty="Width"/>

     </Storyboard> 

    </BeginStoryboard> 

   </MultiTrigger.EnterActions> 

  </MultiTrigger> 

 </Style.Triggers> 

</Style>

... 

<Canvas Name="Canvas1" Height="250" Width="440" Background="Blue" 

 

HorizontalAlignment="Left" Style="{StaticResourceexpandStyle}" > 

 

  <MultiTrigger

Answer 1

You can do that with a behavior.

Probably best if you read up a bit on behaviors.

http://www.wpftutorial.net/Behaviors.html

The demo version of blend has a free trial.

The code will be something like

            <i:Interaction.Triggers> 
                <i:EventTrigger EventName="MouseLeftButtonDown"> 
                    <ei:ControlStoryboardAction Storyboard="{StaticResource ExpandGrid}"/> 
                </i:EventTrigger> 
            </i:Interaction.Triggers> 

Answer 2

Hi,

Please look at the code snippet below for ur issue.

XAML:

<Window x:Class="SandBox.Window28"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window28" Height="300" Width="300">
    <Window.Resources>
        <Storyboard x:Key="ExpandGrid">

            <DoubleAnimation Duration="00:00:20" From="1" To="450" Storyboard.TargetProperty="(Canvas.Width)" Storyboard.TargetName="cnv"/>

        </Storyboard>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Button Grid.Row="0" Height="25" Width="150" Content="Button" x:Name="btn">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click" >
                    <BeginStoryboard  Storyboard="{StaticResource ExpandGrid}">
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
        <Canvas Height="100" Width="100" Grid.Row="1" Background="Orange" x:Name="cnv">
            
        </Canvas>

    </Grid>
</Window>

Here we aer beginning the story board for canvas based on the click of a button.

Please mark it as an answer if it resolves ur issue

---

Regards, Parth Shah

Answer 3

Hi,

Any updates over this?

If ur issue is resolved please close the post and mark it as an answer.

---

Regards, Parth Shah

Answer 4

Thanks... it worked!