How Can I update the Outer Control Height when Running an Animation on the content in that row?

Question

Currently I have a ControlTemplate I am trying to add a sliding animation to. When I run the animation it runs fine other than when I scale the content down I would like its parent container to scale down as well.

currently the control I am scaling down is inside of a stackpanel, I have also tried putting it in a Grid and Setting its RowDefinition to Auto, but when the content gets scaled down I am left with the outer control staying the same size in both cases.

Here is what I am curretly doing. the animations work fine, its the outer stackpanel thats not resizing. Its worth noting this is just the details of the problem, the stack panel actually contains other content so I can't just run the animation on the root.

<StackPanel x:Name="_root">

<StackPanel.Resources>
    <Storyboard x:Key="_expand">
        <DoubleAnimation
            Duration="0:0:0.25"
            From="0"
            To="1" 
            Storyboard.TargetName="_borderContent"
            Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(ScaleTransform.ScaleY)"
            />
    </Storyboard>
    <Storyboard x:Key="_collapse" >
        <DoubleAnimation
            Duration="0:0:0.25" 
            From="1"
            To="0" 
            Storyboard.TargetName="_borderContent"
            Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(ScaleTransform.ScaleY)"
            />
    </Storyboard>
</StackPanel.Resources>



<Border 
    x:Name="_borderContent"
    Grid.Row="1" BorderBrush="{TemplateBinding ExpandStroke}" BorderThickness="1" >

    <Border.RenderTransform>
        <ScaleTransform ScaleX="1" ScaleY="1"/>
    </Border.RenderTransform>
    <!-- Contains the Content to be presented in the card-->
    <ContentPresenter x:Name="_content">
    </ContentPresenter>



</Border>
</StackPanel>

Answer 1

It took a little bit but I had to go back to how I was working with it before. I changed the animation to work on the Height instead of a ScaleTransform. The problem with the ScaleTransform is that it reserves the controls space so its parent control wont actually update.

when updating the height, if the height was set to Double.NaN the animation wouldn't work because it doesn't know how to animate to Double.NaN

To fix that I actually pull out the animations from the template, and assign its values to the controls actualheight in the code behind.

public override OnApplyTemplate()
{
    //in the onapplytemplate overried
    _collapseHeightAnimation = (DoubleAnimation) GetTemplateChild("_collapseHeightAnimation");
    _expandHeightAnimation = (DoubleAnimation) GetTemplateChild("_expandHeightAnimation");

    //get controls for updating heights and angles once we know what that information will be
    var contentBorder = (Border) GetTemplateChild("_borderContent");

}

public void ContentBorderSizeChanged(object sender, SizeChangedEventHandler e)
{
    //once the size of my control has been determined
    // can set to and from values that weren't available before
    // in this case this happens in the size change event
    _collapseHeightAnimation.From = contentBorder.ActualHeight;
    _expandHeightAnimation.To = contentBorder.ActualHeight;
}

Answer 2

I don't see anything in regards to your stackpanel in the XAML that you have posted..

here is something of what I have that perhaps you could use as a Template.. or guide to try I know that it will not be the same as yours but I am sure that there is something here that you are missing that you may see in my template.

<ControlTemplate TargetType="ListBoxItem">
    <Border x:Name="LayoutRoot" Margin="0,10,0,10" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal"/>
                <VisualState x:Name="MouseOver"/>
                <VisualState x:Name="Disabled">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="SelectionStates">
                <VisualState x:Name="Unselected"/>
                <VisualState x:Name="Selected">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Panel">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <SolidColorBrush Color="Azure"/>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Top" To="0"/>
                        <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Bottom" To="0"/>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <StackPanel>
          <Rectangle x:Name="Top" Fill="Aquamarine" Height="20"/>
             <StackPanel x:Name="Panel" Orientation="Horizontal" Background="CadetBlue">
                <Image Source="logo.png" Stretch="None"/>
                <ContentControl Margin="10" x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
          </StackPanel>
          <Rectangle x:Name="Bottom" Fill="Aquamarine" Height="20"/>
        </StackPanel>
    </Border>
</ControlTemplate>