在对该行中的内容运行动画时，如何更新外部控制高度

本文关键字：何更新 更新 高度 控制 外部 动画 运行 | 更新日期: 2023-09-27 18:22:10

目前我有一个ControlTemplate，我正试图向其中添加一个滑动动画。当我运行动画时，它运行得很好，而不是当我缩小内容时，我希望它的父容器也缩小。

目前，我正在缩小的控件位于stackpanel内部，我也尝试过将其放在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>

在对该行中的内容运行动画时，如何更新外部控制高度

我在您发布的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>

花了一点时间，但我不得不回到以前的工作方式。我更改了动画以处理"高度"而不是"缩放变换"。ScaleTransform的问题在于它保留了控件空间，因此其父控件实际上不会更新。

更新高度时，如果高度设置为Double.NaN，则动画将不起作用，因为它不知道如何将动画设置为Double.NaN

为了解决这个问题，我实际上从模板中提取了动画，并将其值分配给后面代码中的控件实际重量。

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;
}
相关文章：