c# - 切换时触发大小动画

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>

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

所以这必须放在 DataForm 之外。

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

我的解决方案的来源:
WPF: how to fire an EventTrigger (or Animation) when binding changes?
WPF - Changing the content of a ToggleButton when checked