Silverlight Layout states beforeloaded -> afterloaded transition just not working - silverlight

Question

I am trying to add a initial animation when items are added to a list box.
For this I'm using Layoutstates, generated by blend inside the itemcontainerstyle:
<VisualStateGroup x:Name="LayoutStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.2"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="AfterLoaded"/>
<VisualState x:Name="BeforeLoaded">
<Storyboard>
<DoubleAnimation Duration="0" To="35" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="BeforeUnloaded">
<Storyboard>
<DoubleAnimation Duration="0" To="0.85" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="0.85" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
my listbox looks like this:
<ListBox Grid.Row="1" ItemsSource="{Binding Days}" x:Name="Days"
HorizontalAlignment="Stretch"
SelectedItem="{Binding CurrentDay, Mode=TwoWay}"
ItemTemplate="{StaticResource TimeRecordByDayItemTemplate}"
ItemsPanel="{StaticResource ByMonthDaysItemsPanelTemplate}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ItemContainerStyle="{StaticResource DayListBoxItemStyle}" />
I just don't get any animation even though i was just following the channel9 tutorials step by step!
This is the first problem with my state manager, I am also encountering problems with datatriggers, that should go to a state when certain conditions are met, where some do work and some do not, but all of my bindings are correct!
Also all the animations do work in Expression Blend preview.
I can't make out the problem, I've had this so often with silverlight and animations copied from the simplest samples not working in the own environment (look here at channel 9)...
Thanks for you help!

Answer 1

Sounds like you need to add the items one by one once everything is loaded. Seems like a simple solution would be this in your view model:
public class MyViewModel
{
private string[] _items;
private ObservableCollection<string> _itemCollection;
public MyViewModel()
{
// meets requirement of loading items in constructor
_items = { "Johnny", "Thommy", "Jay", "Wommy" };
}
public ObservableCollection<string> Items
{
get
{
if (_itemCollection == null)
{
_itemCollection = new ObservableCollection<string>();
Dispatcher.Invoke(() => LoadItems());
}
return _itemCollection;
}
}
private void LoadItems()
{
foreach (var item in _items)
{
ItemCollection.Add(item);
}
}
}
Basically when the ListBox sets up the binding you queue up the adding of the items to the collection. This should have the items loaded at the right time so that they trigger your animations.