無法得到（相當簡單）WPF動畫工作

Question

我試圖在WPF中獲得一個消息面板動畫，但迄今沒有取得成功。

情況是這樣的：

1. 我有包含StackPanel綁定到該控件的視圖模型對象（ViewModel.Messages）的（可觀察的）收集一個ItemsControl用戶控制。
2. 當我需要向用戶顯示消息時，我會將這些消息（如MessageVM實例）添加到可觀察集合中。

的ItemsControl的知名度勢必整數屬性稱爲ViewModel.CountVisibleMessages，有一個轉換器轉換採取0到Visibility.Hidden和積極的價值觀Visibility.Visible的照顧。

這工作得很好。當消息被添加到集合中時，StackPanel自動變爲可見，並且當用戶（或計時器）移除最後被隱藏的消息時。當然，高度會自動調整以適應所有消息。

爲了使一切看起來更好，我更喜歡它，如果StackPanel使用300毫秒運行的動畫本身調整大小。 （最後，我也想它加速deccelerate但是這超出了我的野心現在。

我已經嘗試了幾個小時，但現在我覺得我還差得遠。 下面是我目前（還差得遠在工作的時刻）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慢慢自動調整這只是一項實驗，以獲取任何發生）

這不能太困難，我想（這是一個非常標準的用戶界面行爲許多程序），所以我會很感激，如果有人能指出我在正確的方向。

乾杯

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" /> 

讓我知道，如果這有助於。