I have a button and list box which I have binded it to an observable collection object. I have also defined an item template for the list box where I used a color animation. When i click the button I change some property of observable collection and hence trigger an animation in the list box.
I wish to animate one item at a time in list box. (i.e animate one item wait for the animation to finish then start next animation) But instead the animation occurs for all items at once.
WPF code:
<Window x:Class="WPF4.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:src="clr-namespace:WPF4" Title="MainWindow" Height="250" Width="325" Loaded="Window_Loaded" Name="MyWindow"><Grid Margin="10" ><Grid.Resources><src:Students x:Key="students"/></Grid.Resources><StackPanel><ListBox Name="lbtest" ItemsSource="{Binding Students, IsAsync=True}" Height="150" Width="280"><ListBox.ItemTemplate><DataTemplate><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="100"/><ColumnDefinition Width="auto"/><ColumnDefinition Width= "100"/></Grid.ColumnDefinitions><TextBlock Grid.Column="0" Text="{Binding Path=Name}" /><TextBlock Grid.Column="1" Text="{Binding Path=Age}" /><Rectangle Name="myRect" Grid.Column="2" Width="10" Height="10"><Rectangle.Fill><SolidColorBrush x:Name="MyAnimatedBrush" Color="{Binding Color, NotifyOnTargetUpdated=True}" /></Rectangle.Fill><Rectangle.Triggers><EventTrigger RoutedEvent="Binding.TargetUpdated"><BeginStoryboard><Storyboard><ColorAnimation Storyboard.TargetName="MyAnimatedBrush" Storyboard.TargetProperty="Color" From="Orange" To="{Binding Color}" Duration="0:0:2" AutoReverse="False" /></Storyboard></BeginStoryboard></EventTrigger></Rectangle.Triggers></Rectangle></Grid></DataTemplate></ListBox.ItemTemplate></ListBox><Button Command="{Binding ChangeColorCommand}" Content="Change !" /></StackPanel></Grid></Window>
And the C# code is as follows.
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; using System.Collections.ObjectModel; using System.ComponentModel; using System.Windows.Threading; namespace WPF4 { /// <summary> /// Interaction logic for MainWindow.xaml /// </summary> public partial class MainWindow : Window { private ObservableCollection<Student> students; public MainWindow() { InitializeComponent(); this.DataContext = this; students = new ObservableCollection<Student>(); students.Add(new Student() { Name = "Rajesh", Age = 22, Color = "Orange" }); students.Add(new Student() { Name = "Dinesh", Age = 23, Color = "Orange" }); students.Add(new Student() { Name = "Padayappa", Age = 24, Color = "Orange" }); } public ObservableCollection<Student> Students { get { return this.students; } } private void Window_Loaded(object sender, RoutedEventArgs e) { } private ICommand changeColorCommand; public ICommand ChangeColorCommand { get { return changeColorCommand ?? (changeColorCommand = new DelegateCommand(ChangeColor)); } } private void ChangeColor() { students.ElementAt(0).Color = "Red"; students.ElementAt(1).Color = "Green"; students.ElementAt(2).Color = "Blue"; } } public class Student : INotifyPropertyChanged { string name; int age; string color; public string Color { set { color = value; if (this.color != String.Empty) { this.NotifyPropertyChanged("Color"); } } get { return color; } } public string Name { set { name = value; } get { return name; } } public int Age { set { age = value; } get { return age; } } public event PropertyChangedEventHandler PropertyChanged; public void NotifyPropertyChanged(string propName) { if (this.PropertyChanged != null) this.PropertyChanged(this, new PropertyChangedEventArgs(propName)); } } public class DelegateCommand : ICommand { private readonly Action _action; public DelegateCommand(Action action) { _action = action; } public void Execute(object parameter) { _action(); } public bool CanExecute(object parameter) { return true; } #pragma warning disable 67 public event EventHandler CanExecuteChanged { add { } remove { } } #pragma warning restore 67 } }
I am a new bee to WPF , kindly guide me in the right path to achieve this animation.