Trigger size animation on toggle

Question

Im trying to toggle an animation on height when a button "Show Details"/"Hide Details" is clicked and then back to its initial value when the button is clicked again.

I have a DataControls:DataForm with predefined style to start with, and I want the "Height"-property to animate to a larger value when the button is clicked.

The DataControl:Dataform looks like this.

<DataControls:DataForm x:Name="DataEdit"
                           Grid.Row="1"
                           ItemsSource="{Binding}"
                           Style="{DynamicResource CommonDataFormStyle}"
                           ContentLoaded="OnContentLoaded" 
                           Height="150">

The button itself is inside the DataForm like this.

<DataControls:DataForm.ReadOnlyTemplate>
     <DataTemplate>          
         <Grid>
            <Grid.RowDefinitions>...
               <StackPanel Grid.Column="0" Grid.Row="0">            
                  <Button Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl} }, Path=DataContext.ToggleDetailsCommand, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" x:Name="ToggleDetailsButton"                                      
                             Content="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl} }, Path=DataContext.ToggleDetailsButtonText}"/> 
...

I have only gotten this to work by usina a label called "Show Details" and an eventtrigger for RoutedEvent="Label.MouseLeftButtonDown" on one label to expand the details. And then have another label called "Hide Details" to togge the animation back again.

I have alsto tried puting this style on the button and with datatriggers trying to toggle the animation. This, however, does only animate the height of the button regardless of the StoryBoard.Target="{Binding ElementName=DataEdit}" attribute.

<Style TargetType="{x:Type Button}" x:Key="ExpandDetailsStyle" >            
        <Style.Triggers>
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl} }, Path=DataContext.IsOpened}" Value="true">
                <DataTrigger.EnterActions>
                    <StopStoryboard BeginStoryboardName="EndAnimation" />
                    <BeginStoryboard Name="NewAnimation">
                        <Storyboard>
                            <DoubleAnimation Storyboard.Target="{Binding ElementName=DataEdit}" Storyboard.TargetProperty="Height" From="150" To="300" Duration="0:0:0.1" />
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
                <DataTrigger.ExitActions>

                </DataTrigger.ExitActions>

            </DataTrigger>
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl} }, Path=DataContext.IsOpened}" Value="false">
                <DataTrigger.EnterActions>
                    <StopStoryboard BeginStoryboardName="NewAnimation" />
                    <BeginStoryboard Name="EndAnimation">
                        <Storyboard>
                            <DoubleAnimation Storyboard.Target="{Binding ElementName=DataEdit}" Storyboard.TargetProperty="Height" From="300" To="150" Duration="0:0:0.1" />
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
            </DataTrigger>

        </Style.Triggers>
    </Style>

Also I'm fairly new to WPF so forgive me if I left something out here. Im unable to put a new custom style on the DataForm since it is already using a common style, it wouldnt let me use the "BasedOn" attribute either.

The closest I've got is the animation of the button height, if I only could get it to animate the DataForm height property instead.

Thanks in advance

Jobe Jobe · Accepted Answer · 2012-03-21T08:18:58

After quite some hours looking around I found a simple solution for my, what I thought, complex problem.

<UserControl.Resources>
    <Storyboard x:Key="ExpandDetails">
        <DoubleAnimation Storyboard.TargetProperty="Height"                                                     
                                                    Storyboard.TargetName="DataEdit"
                                                    From="120" To="230" Duration="0:0:0.05" />
    </Storyboard>
    <Storyboard x:Key="CollapsDetails">
        <DoubleAnimation Storyboard.TargetProperty="Height"                                                     
                                                Storyboard.TargetName="DataEdit"
                                                From="230" To="120" Duration="0:0:0.05" />
    </Storyboard>                
    <Style TargetType="{x:Type ToggleButton}" x:Key="ToggleButtonStyle">
        <Setter Property="Content" Value="Show Details"/>
        <Style.Triggers>
            <Trigger Property="IsChecked" Value="true">
                <Setter Property="Content" Value="Hide Details"/>
            </Trigger>
        </Style.Triggers>
    </Style>    
</UserControl.Resources>


<UserControl.Triggers>
    <EventTrigger RoutedEvent="ToggleButton.Checked" SourceName="DetailsToggleButton">
        <BeginStoryboard Storyboard="{StaticResource ExpandDetails}"/>
    </EventTrigger>
    <EventTrigger RoutedEvent="ToggleButton.Unchecked" SourceName="DetailsToggleButton">
        <BeginStoryboard Storyboard="{StaticResource CollapsDetails}"/>
    </EventTrigger>
</UserControl.Triggers>

I couldnt figure out how to have the button inside the data form in this case because of the scope it would be in it couldnt find the "DataEdit" dataform with any of my known binding techniques.

So this had to be placed outside the DataForm.

<ToggleButton x:Name="DetailsToggleButton" Style="{StaticResource ToggleButtonStyle}" />

Sources to my solution:
WPF: how to fire an EventTrigger (or Animation) when binding changes?
WPF - Changing the content of a ToggleButton when checked

Trigger size animation on toggle

1 Answers