XAML Binding / Animated Expander

Hi,
I'm trying to create an Expander that animates it's open/close.
So far, I've got what's below, which will animate the opening and
closing, but it will open to a fixed height of 150 for the content
(see "ExpandMe" story board). I want to make it so that it opens to
the auto content height.

Can anyone help me with this?

I thought that replacing the 150 with something like {Binding
ElementName=ContentGrid, Path=ActualHeight} should work but it throws
an exception.

Thanks
Greg


<Style TargetType="Expander">
<Style.Resources>
<Storyboard x:Key="ExpandMe">
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="Content" Storyboard.TargetProperty="Height"
BeginTime="00:00:00">
<LinearDoubleKeyFrame KeyTime="00:00:00.15" Value="150"/
>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="CollapseMe">
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="Content" Storyboard.TargetProperty="Height"
BeginTime="00:00:00">
<LinearDoubleKeyFrame KeyTime="00:00:00.15" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Style.Resources>

<Setter Property="Margin" Value="0,0,0,2"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Expander">
<StackPanel Name="ExpanderStacker">
<ToggleButton Name="Header"
IsChecked="{Binding Path=IsExpanded, Mode=TwoWay,
RelativeSource={RelativeSource
TemplatedParent}}"
OverridesDefaultStyle="True"
Template="{StaticResource ExpanderToggleButton}"
Background="{StaticResource NormalBrush}">
<ToggleButton.Content>
<ContentPresenter
Margin="4"
ContentSource="Header"
RecognizesAccessKey="True" />
</ToggleButton.Content>
</ToggleButton>
<Border Name="Content"
Height="150"
Background="{StaticResource WindowBackgroundBrush}"
BorderBrush="{StaticResource SolidBorderBrush}"
BorderThickness="1,0,1,1"
CornerRadius="0,0,4,4" >
<Grid Name="ContentGrid">
<ContentPresenter Margin="4" />
</Grid>
</Border>
</StackPanel>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Expander.Expanded">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource
ExpandMe}"/>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Expander.Collapsed">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource
CollapseMe}"/>
</EventTrigger.Actions>
</EventTrigger>

<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{StaticResource
DisabledForegroundBrush}"/>
</Trigger>

</ControlTemplate.Triggers>
</ControlTemplate>

try to use Scale LayoutTransform from 0 to 1 in animation

EggHeadCafe.com - .NET Developer Portal of Choice
http://www.eggheadcafe.com