2011-07-24 76 views
4

我有一個WPF視圖與一個ItemsControl綁定從ViewModel的ObservableCollection。現在我想慢慢淡出我從ObservableCollection中刪除的項目。淡出刪除項目itemscontrol

視圖模型:

public class ViewModel 
{ 
    public ObservableCollection<string> Items { get; set; } 
} 

查看:

<Window x:Class="Sandbox.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525" 
    Name="mainWindow"> 
<Window.Resources> 
    <DataTemplate x:Key="mytemplate"> 
     <DataTemplate.Resources> 
      <Storyboard x:Key="OnUnloaded"> 
       <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="grid"> 
        <EasingDoubleKeyFrame KeyTime="0" Value="1"/> 
        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-0"/> 
       </DoubleAnimationUsingKeyFrames> 
       <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="grid"> 
        <EasingDoubleKeyFrame KeyTime="0" Value="0"/> 
        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-10"/> 
       </DoubleAnimationUsingKeyFrames> 
      </Storyboard> 
     </DataTemplate.Resources> 
     <Grid x:Name="grid" RenderTransformOrigin="0.5,0.5"> 
      <Grid.RenderTransform> 
       <TransformGroup> 
        <ScaleTransform/> 
        <SkewTransform/> 
        <RotateTransform/> 
        <TranslateTransform/> 
       </TransformGroup> 
      </Grid.RenderTransform> 
      <TextBox Text="{Binding Mode=OneWay}"/> 
     </Grid> 
     <DataTemplate.Triggers> 
      <EventTrigger RoutedEvent="FrameworkElement.Unloaded"> 
       <BeginStoryboard Storyboard="{StaticResource OnUnloaded}"/> 
      </EventTrigger> 
     </DataTemplate.Triggers> 
    </DataTemplate> 
</Window.Resources> 
<StackPanel> 
    <ItemsControl Grid.Row="1" ItemsSource="{Binding Items}" ItemTemplate="{StaticResource mytemplate}"/> 
</StackPanel> 

這個問題我已經是現在的故事板從集合刪除一個項目開始,但在同一時間itemscontrol刪除項目,爲此,動畫不在視線中...

任何想法如何防止在動畫終止之前刪除該項目?

+0

請參閱此以瞭解淡入淡出動畫:http://stackoverflow.com/questions/6747491/wpf-showing-and-hiding-items-in-an-itemscontrol-with-effects –

回答

8

這比應該要困難得多。 「刪除」動畫的問題在於,一旦從數據綁定集合中刪除項目,其相應的視覺效果將自動從元素樹中移除。這意味着沒有什麼需要動畫了。

要解決該問題,您需要找到一種方法來在從數據綁定集合中刪除項目之前對動畫進行排隊,並在動畫完成後通知ViewModel可以刪除該項目。

另一種解決方案是修改ItemsControl的行爲以更好地控制容器視覺效果的生命週期。

無論哪種方式,這是不幸的是不是一個微不足道的任務來完成。

+0

謝謝你的答案!我想也許在xaml有一個更簡單的方法,但我會嘗試你上面描述的方式。 – rhe1980