无法让（相当简单）WPF 动画工作

Question

我正在尝试在 WPF 中获取动画消息面板，但到目前为止尚未取得成功。

情况是这样的：

1. 我有一个带有 StackPanel 的用户控件，其中包含绑定到控件的视图模型对象 (ViewModel.Messages) 中的（可观察）集合的 ItemsControl ）。
2. 当我需要向用户展示消息时，我会将这些消息（作为 MessageVM 实例）添加到可观察集合中。

ItemsControl 的可见性绑定到名为 ViewModel.CountVisibleMessages 的整数属性，并且有一个转换器负责将 0 转换为 Visibility.Hidden 以及Visibility.Visible 的正值。

这很好用。当消息添加到集合中时，StackPanel 自动变得可见，并且当用户（或计时器）删除最后一条消息时，它会隐藏。当然，StackPanel 的高度会自动调整以适应所有消息。

为了让一切看起来更好，我更希望 StackPanel 使用运行 300 毫秒的动画来调整自身大小。 （最终我也希望它能够加速和减速，但这超出了我现在的野心。

我已经实验了几个小时，但我觉得我还没有接近。 下面是我目前的（甚至还没有接近工作）XAML：（

<StackPanel Orientation="Vertical" 
                VerticalAlignment="Top" 
                Visibility="{Binding CountVisibleMessages, Converter={StaticResource IntToVisibility}}"
                Height="Auto"
                Background="{DynamicResource HmiBackColorLightBrush}">
        <StackPanel.Style>
            <Style>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding CountVisibleMessagesChanged}" Value="True" ><!-- I suppose I shopuld've used a Routed Event here but I just needed to get it triggered -->
                        <DataTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation
                                        Storyboard.TargetProperty="Margin.Bottom"
                                        From="100" <!-- Just a made up value to test the concept -->
                                        To="0"
                                        Duration="0:0:0:3"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.EnterActions>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </StackPanel.Style>
        <ItemsControl ItemsSource="{Binding Messages}" >
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Vertical" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border Style="{DynamicResource Message}">
                        <Grid >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="15" />
                            </Grid.ColumnDefinitions>
                            <TextBlock Grid.Column="0" Text="{Binding Text}" Margin="3" Style="{Binding MessageType, Converter={StaticResource MessageTypeToStyle}, ConverterParameter={x:Type TextBlock}}" /> <!-- using dynamic styling here -->
                            <RadioButton Grid.Column="1" Style="{DynamicResource HmiCloseMessageButton}" IsChecked="{Binding IsVisible, Converter={StaticResource BoolToVisibility}, ConverterParameter=true}" />
                        </Grid>
                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </StackPanel>

我确实意识到上面的 XAML 不会让 StackPanel 缓慢地自动调整大小。这只是一个让任何事情发生的实验）。

我认为这不会太困难（这是许多程序中相当标准的 UI 行为），因此如果有人能够为我指出正确的方向，我将不胜感激。

干杯

Answer 1

您确定要调整下边距吗？堆栈面板 VerticalAlignment 位于顶部。如果您想更改高度，请将 StoryBoard 属性绑定到高度。您知道您的 StoryBoard 是否正在启动吗？

Answer 2

关键点是 ExitActions 对于基于 EnterAction 的 dataTrigger 动画是必需的。所以以下内容似乎适用于我的情况......

<StackPanel Grid.Row="0" Height="100" x:Name="MyGrid">
   <StackPanel.Style>
      <Style>
         <Style.Triggers>
            <DataTrigger
               Binding="{Binding ElementName=MyCheckBox,
                                 Path=IsChecked}" Value="True">
               <DataTrigger.EnterActions>
                  <BeginStoryboard>
                     <Storyboard>
                        <DoubleAnimation 
                           Storyboard.Target="{Binding
                             RelativeSource={RelativeSource
                               AncestorType={x:Type 
                                 StackPanel}},
                             BindsDirectlyToSource=True}"
                           Storyboard.TargetProperty="Height"
                           From="100" 
                           To="200"
                           Duration="0:0:1"/>
                     </Storyboard>
                  </BeginStoryboard>
               </DataTrigger.EnterActions>
               <DataTrigger.ExitActions>
                  <BeginStoryboard>
                     <Storyboard>
                        <DoubleAnimation 
                           Storyboard.Target="{Binding
                              RelativeSource={RelativeSource
                                 AncestorType={x:Type 
                                   StackPanel}},
                              BindsDirectlyToSource=True}"
                              Storyboard.TargetProperty="Height"
                              To="100"
                              Duration="0:0:1"/>
                     </Storyboard>
                  </BeginStoryboard>
               </DataTrigger.ExitActions>
            </DataTrigger>
         </Style.Triggers>
      </Style>
   </StackPanel.Style>
 </StackPanel>
 <CheckBox x:Name="MyCheckBox" Grid.Row="1" />

让我知道这是否有帮助。