data triggers wpf and animations

Question

Im working on a custom control that derives from a button, I have 2 column definitions column 0 is set to grid length * and column 1 is set to auto. Column 0 has a few control in it and is working ok, column 1 has a grid that's width is set to 0, this is all set in the control template. The custom control I made has several dependency properties I have put in, and one of them is a bool type eg IsShowingInfoPlane and has default value of false, id like to attach a double animation on the grid that is in column 1 width to this dependency property so if its true run the animation from 0 to 150 and if its false run from 150 to 0 that is in column 1 which has a default value of 0. Im sure I have to go down the data trigger route as the style ones are not accepting animations.

Here is the dependency property of the button

 public bool IsShowingInfoPlane
    {
        get { return (bool)GetValue(IsShowingInfoPlaneProperty); }
        set
        {
            SetValue(IsShowingInfoPlaneProperty, value);
            OnPropertyChanged("IsShowingInfoPlane");
        }
    }

and here is the data trigger I have tried to attach to the grid in column 1 that I want to animate on its width property

<Grid.Triggers>
    <DataTrigger Binding="{TemplateBinding IsShowingInfoPlane}" Value="True" >
         <DataTrigger.EnterActions>
              <BeginStoryboard>
                    <Storyboard>
                         <DoubleAnimation Duration="0:0:0.150" From="{Binding ElementName=InfoGrid, Path=Width}" To="150" Storyboard.TargetProperty="Width" />
                     </Storyboard>
               </BeginStoryboard>
          </DataTrigger.EnterActions>
    </DataTrigger>
</Grid.Triggers>

As Im going to have many of these buttons on the frontend I don't fancy creating individual animations and as Im so far down the road with this button I cant go and use other peoples controls. Ive used animations elsewhere in the program with success but this is the first time ive tried to use them with triggers, usually I can them from code and attach them to some control, Any help would be much appreciated.

Regards

OnPropertyChanged is not needed since DependencyProperty by itself informs about changes. TemplateBinding is used in case of overwriting template in order to refer to parent's properties. — Maximus
ok your answer doesn't help me at all but thanks for the info, yeah I used template binding as the grid is embedded within other controls. — user1791240

Unknown Unknown · Accepted Answer · 2014-08-16T09:10:16

You can't bind the From & To properties in a Storyboard, Storyboard have to be freezable.

Anyway, you'll need an EnterAction (like you did) to handle the True value and an ExitAction for the False value.

Keep also in mind that a Storyboard, once started doesn't stop until you say it to stop (correct me if I'm wrong). You'll need to add a StopStoryboard in your ExitAction for the Storyboard in your EnterAction to stop it (same thing, you'll need to add a StopStoryboard in your EnterAction for the storyboard in your ExitAction).

The XAML will look like something like this (didn't test the code):

    <Grid.Triggers>
        <DataTrigger Binding="{TemplateBinding IsShowingInfoPlane}" Value="True" >
             <DataTrigger.EnterActions>
                  <StopStoryboard BeginStoryboardName="SbExitAction"/>
                  <BeginStoryboard x:Name="SbEnterAction">
                        <Storyboard>
                            <DoubleAnimation Duration="0:0:0.150" From="0" To="150" Storyboard.TargetProperty="Width" />
                        </Storyboard>
                   </BeginStoryboard>
              </DataTrigger.EnterActions>

              <DataTrigger.ExitActions>
                  <StopStoryboard BeginStoryboardName="SbEnterAction"/>
                  <BeginStoryboard x:Name="SbExitAction">
                        <Storyboard>
                            <DoubleAnimation Duration="0:0:0.150" From="150" To="0" Storyboard.TargetProperty="Width" />
                        </Storyboard>
                   </BeginStoryboard>
                </DataTrigger.ExitActions>
        </DataTrigger>
    </Grid.Triggers>

data triggers wpf and animations

1 Answers