Как я могу обновить Высота внешнего управления при запуске анимации для содержимого в этой строке?

Question

В настоящее время у меня есть ControlTemplate, к которому я пытаюсь добавить скользящую анимацию.Когда я запускаю анимацию, она работает отлично, за исключением того, что когда я уменьшаю содержимое, я бы хотел, чтобы его родительский контейнер также уменьшал.

В настоящее время масштабируемый элемент управления находится внутри панели стека, у меня также естьпопытался поместить его в Grid и установить для его RowDefinition значение Auto, но когда содержимое уменьшается, у меня остается внешний элемент управления, который остается одинакового размера в обоих случаях.

Вот что я сейчас делаю.анимация работает нормально, ее внешняя панель стека не изменяет размеры.Стоит отметить, что это только детали проблемы, панель стека фактически содержит другое содержимое, поэтому я не могу просто запустить анимацию в корне.

<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

Прошло немного, но мне пришлось вернуться к тому, как я работал с ним раньше. Я изменил анимацию для работы с Высота вместо ScaleTransform. Проблема с ScaleTransform заключается в том, что он резервирует пространство элементов управления, поэтому его родительский элемент управления фактически не обновляется.

при обновлении высоты, если высота была установлена ​​на Double.NaN, анимация не будет работать, потому что она не знает, как анимировать на Double.NaN

Чтобы исправить это, я фактически вытаскиваю анимации из шаблона и назначаю его значения элементам управления currentheight в коде позади.

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

Я не вижу ничего относительно вашей стековой панели в XAML, который вы опубликовали ..

вот кое-что из того, что у меня есть, что, возможно, вы могли бы использовать в качестве шаблона .. или руководство, чтобы попробовать Я знаю, что он не будет таким же, как ваш, но я уверен, что здесь есть что-то, чего вам не хватает, что вы можете увидеть в моем шаблоне.

<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>