在切换时触发大小动画

Question

我试图在单击“显示详细信息”/“隐藏详细信息”按钮时切换高度动画，然后在再次单击该按钮时返回其初始值。

我有一个带有预定义样式的 DataControls:DataForm，我希望在单击按钮时将“高度”属性设置为更大的值。

DataControl:Dataform 看起来像这样。

<DataControls:DataForm x:Name="DataEdit"
                           Grid.Row="1"
                           ItemsSource="{Binding}"
                           Style="{DynamicResource CommonDataFormStyle}"
                           ContentLoaded="OnContentLoaded" 
                           Height="150">

按钮本身就在这样的 DataForm 中。

<DataControls:DataForm.ReadOnlyTemplate>
     <DataTemplate>          
         <Grid>
            <Grid.RowDefinitions>...
               <StackPanel Grid.Column="0" Grid.Row="0">            
                  <Button Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl} }, Path=DataContext.ToggleDetailsCommand, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" x:Name="ToggleDetailsButton"                                      
                             Content="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl} }, Path=DataContext.ToggleDetailsButtonText}"/> 
...

我只是通过使用一个名为“显示详细信息”的标签和一个标签上的 RoutedEvent="Label.MouseLeftButtonDown" 事件触发器来扩展详细信息。然后使用另一个名为“隐藏详细信息”的标签来再次切换动画。

我也尝试将这种样式放在按钮上，并尝试使用数据触发器来切换动画。但是，无论 StoryBoard.Target="{Binding ElementName=DataEdit}" 属性如何，这只会为按钮的高度设置动画。

<Style TargetType="{x:Type Button}" x:Key="ExpandDetailsStyle" >            
        <Style.Triggers>
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl} }, Path=DataContext.IsOpened}" Value="true">
                <DataTrigger.EnterActions>
                    <StopStoryboard BeginStoryboardName="EndAnimation" />
                    <BeginStoryboard Name="NewAnimation">
                        <Storyboard>
                            <DoubleAnimation Storyboard.Target="{Binding ElementName=DataEdit}" Storyboard.TargetProperty="Height" From="150" To="300" Duration="0:0:0.1" />
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
                <DataTrigger.ExitActions>

                </DataTrigger.ExitActions>

            </DataTrigger>
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl} }, Path=DataContext.IsOpened}" Value="false">
                <DataTrigger.EnterActions>
                    <StopStoryboard BeginStoryboardName="NewAnimation" />
                    <BeginStoryboard Name="EndAnimation">
                        <Storyboard>
                            <DoubleAnimation Storyboard.Target="{Binding ElementName=DataEdit}" Storyboard.TargetProperty="Height" From="300" To="150" Duration="0:0:0.1" />
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
            </DataTrigger>

        </Style.Triggers>
    </Style>

另外，我对 WPF 还很陌生，所以如果我在这里遗漏了一些东西，请原谅我。我无法在 DataForm 上放置新的自定义样式，因为它已经在使用通用样式，它也不会让我使用“BasedOn”属性。

我得到的最接近的是按钮高度的动画，如果我只能让它为 DataForm 高度属性设置动画。

提前致谢

Answer 1

环顾四周后，我找到了一个简单的解决方案，我认为是复杂的问题。

<UserControl.Resources>
    <Storyboard x:Key="ExpandDetails">
        <DoubleAnimation Storyboard.TargetProperty="Height"                                                     
                                                    Storyboard.TargetName="DataEdit"
                                                    From="120" To="230" Duration="0:0:0.05" />
    </Storyboard>
    <Storyboard x:Key="CollapsDetails">
        <DoubleAnimation Storyboard.TargetProperty="Height"                                                     
                                                Storyboard.TargetName="DataEdit"
                                                From="230" To="120" Duration="0:0:0.05" />
    </Storyboard>                
    <Style TargetType="{x:Type ToggleButton}" x:Key="ToggleButtonStyle">
        <Setter Property="Content" Value="Show Details"/>
        <Style.Triggers>
            <Trigger Property="IsChecked" Value="true">
                <Setter Property="Content" Value="Hide Details"/>
            </Trigger>
        </Style.Triggers>
    </Style>    
</UserControl.Resources>


<UserControl.Triggers>
    <EventTrigger RoutedEvent="ToggleButton.Checked" SourceName="DetailsToggleButton">
        <BeginStoryboard Storyboard="{StaticResource ExpandDetails}"/>
    </EventTrigger>
    <EventTrigger RoutedEvent="ToggleButton.Unchecked" SourceName="DetailsToggleButton">
        <BeginStoryboard Storyboard="{StaticResource CollapsDetails}"/>
    </EventTrigger>
</UserControl.Triggers>

在这种情况下，我无法弄清楚如何在数据表单中放置按钮，因为它所在的范围无法使用我已知的任何绑定技术找到“DataEdit”数据表单。

所以这必须放在 DataForm 之外。

<ToggleButton x:Name="DetailsToggleButton" Style="{StaticResource ToggleButtonStyle}" />

我的解决方案的来源：
WPF：如何在绑定更改时触发 EventTrigger（或动画）？
WPF - 选中时更改 ToggleButton 的内容