WPF animation to increase contract height

Question

I would like to have a trigger on an image that extends AND and truncates ItemSource, animating its height property.

I have a generic ItemSource associated with an ObservableCollection, so I don't know the overall height of this control.

After clicking the image, it should change its glyph of the image source to show that the items source is expanded. After clicking again, the ItemsSource element should begin to shrink from the current height to 0 - because the first animation may not end.

I currently 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 be close to the total (unknown height) of the ItemsControl element. In addition, it supports only one-way (expanding) animation.

My ItemsControl is simple:

  <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 ... well, the ActualHeight property. The problem is that this is not a dependency property. However, you can become attached to it using attached behavior such as Kent Boogaart in this answer .

This will allow you to snap to the actual height. I will leave it to you to write the attached behavior. :)