Xaml ScaleTransform.ScaleY UIElement不保留空间

我有一个ListView，它的ItemTemplate是一个自定义控件，充当扩展器，它有一个始终可见的切换，以及根据需要展开的边框内容

<ControlTemplate TargetType="local:ExpanderControl">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="ExpandStateGroup">
                                <VisualState x:Name="Collapsed">
                                    <!--<Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="PART_ExpandableContent" 
                                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
                                                         To="0.0"
                                                         Duration="0:0:0.2"
                                                         AutoReverse="False"
                                                         EnableDependentAnimation="True"></DoubleAnimation>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Expanded">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="PART_ExpandableContent" 
                                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
                                                         To="1.0"
                                                         Duration="0:0:0.2"
                                                         AutoReverse="False"
                                                         EnableDependentAnimation="True"></DoubleAnimation>
                                    </Storyboard>-->
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="PART_ExpandableContent" 
                                                         Storyboard.TargetProperty="Height"
                                                         To="0.0"
                                                         Duration="0:0:0.2"
                                                         AutoReverse="False"
                                                         EnableDependentAnimation="True"></DoubleAnimation>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Expanded">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="PART_ExpandableContent" 
                                                         Storyboard.TargetProperty="Height"
                                                         To="100.0"
                                                         Duration="0:0:0.2"
                                                         AutoReverse="False"
                                                         EnableDependentAnimation="True"></DoubleAnimation>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ToggleButton x:Name="PART_expanderButton" Foreground="{TemplateBinding Foreground}"
                                      Style="{StaticResource ExpanderButtonStyle}" Background="{TemplateBinding Background}"
                                      BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
                                      IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsExpanded , Mode=TwoWay}">
                            <ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              ContentTemplate="{TemplateBinding HeaderContentTemplate}" Content="{TemplateBinding Header}"
                                              Foreground="{TemplateBinding Foreground}" FontSize="{TemplateBinding FontSize}"
                                              FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}"
                                              Margin="{TemplateBinding Padding}"/>
                        </ToggleButton>
                        <Border Grid.Row="1" x:Name="PART_ExpandableContent" Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
                                Height="0">
                            <!--<Border.RenderTransform>
                                <ScaleTransform ScaleY="0.0" />
                            </Border.RenderTransform>-->
                            <ContentPresenter x:Name="PART_ExpandableContentPresenter" Content="{TemplateBinding Content}"
                                    ContentTemplate="{TemplateBinding ContentTemplate}">
                            </ContentPresenter>
                        </Border>
                    </Grid>
                </ControlTemplate>

我一直在使用VisualState，试图实现一个简单的动画：单击时项目会展开，再次单击时项目会折叠

在可展开控件上使用可见性将是一个选项，但我想要一个不断增长的动画，使高度增加到完全高度，而不是可见性提供的捕捉效果

我还弄乱了ScaleY效果，这几乎是我想要的，除了父控件保留可扩展控件的高度，即使ScaleY=0，在列表中的每个元素之间都留下一个不需要的大空间，这也是有意义的

现在，如上所示的工作解决方案是在控件上设置高度值，并在该值和0之间变化。但我希望实现一个更可重用的解决方案，而不必硬编码高度

任何帮助都将不胜感激。

---

谢谢

我最近构建了一个自定义控件，它可以执行与您所追求的行为类似的操作。这里是一个测试版本，以显示我的意思，因为您可能能够适应您的项目

两个关键点是控制要移动的项在StackPanel中的位置，并且操作Height属性而不是使用Transform.ScaleY

MainPage.xaml

<Grid Background="Black">
    <StackPanel Orientation="Vertical" Margin="20"
                VerticalAlignment="Top">
        <Button x:Name="ExpandButton" Width="200" Height="75" Content="expand"
                Foreground="White" BorderBrush="White"
                Click="ExpandButton_Click" />

        <Rectangle x:Name="Red" Width="200" Height="200" Fill="Red" />
        <Rectangle x:Name="Green" Width="200" Height="200" Fill="Green" />
        <Rectangle x:Name="Blue" Width="200" Height="200" Fill="Blue" />
    </StackPanel>
</Grid>

OpenCloseAnimation.cs

public class OpenCloseAnimation
{
    public Storyboard sb { get; set; }
    private double _height;
    private FrameworkElement _element;

    public OpenCloseAnimation(FrameworkElement element, double height)
    {
        _element = element;
        _height = height;
        CreateStoryboard();
    }

    public void CreateStoryboard()
    {
        sb = new Storyboard();

        var animation = new DoubleAnimationUsingKeyFrames { EnableDependentAnimation = true };
        var easing = new EasingDoubleKeyFrame { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(200)), Value = _height };
        animation.KeyFrames.Add(easing);

        Storyboard.SetTargetProperty(animation, "(FrameworkElement.Height)");
        Storyboard.SetTarget(animation, _element);
        sb.Children.Add(animation);
    }
}

希望能有所帮助

public class OpenCloseAnimation
{
    public Storyboard sb { get; set; }
    private double _height;
    private FrameworkElement _element;

    public OpenCloseAnimation(FrameworkElement element, double height)
    {
        _element = element;
        _height = height;
        CreateStoryboard();
    }

    public void CreateStoryboard()
    {
        sb = new Storyboard();

        var animation = new DoubleAnimationUsingKeyFrames { EnableDependentAnimation = true };
        var easing = new EasingDoubleKeyFrame { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(200)), Value = _height };
        animation.KeyFrames.Add(easing);

        Storyboard.SetTargetProperty(animation, "(FrameworkElement.Height)");
        Storyboard.SetTarget(animation, _element);
        sb.Children.Add(animation);
    }
}