WPF animation to expand-contract height

Question

Hey

I would like to have a trigger on an image which expands AND contracts an ItemsSource by animating its height property.

I have a generic ItemsSource bound to a ObservableCollection, so I do not know the total height of this control.

Once the image is clicked, it should change its image source glyph to show that the itemssource is expanded. Once it is clicked again, the ItemsSource should begin contracting from its current height back to 0 - because the first animation may not be completed.

Currently I have the following image trigger:

<Image Name="ExpandImage" Source="ArrowDown.png">
            <Image.Triggers>
                <EventTrigger RoutedEvent="Image.MouseLeftButtonDown">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Height"                                                     
                                            Storyboard.TargetName="myItemsControl"
                                             From="0" To="300" Duration="0:0:2" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Image.Triggers>
        </Image>

This is ugly because it animates to a fixed height - I need it to animate to the total (unknown height) of the ItemsControl. Also, it only supports one-way (expanding) animation.

My ItemsControl is simply:

 <ItemsControl Name="myItemsControl" 
        ItemsSource="{Binding Items}"  Height="0" >
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <c:CustomUserControl/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

Answer 1

You can get the actual height of the Items Control with the... well, ActualHeight property. The problem is that it's not a dependency property. However, you can bind to it using an attached behavior like Kent Boogaart did in this answer.

That should let you bind to the actual height. I'll leave it to you to write the attached behavior. :)