Animate Listbox Items in Silverlight

I'm trying to add some sort of animation to items as they're added to a ListBox, as this blog purports to do Link

The trouble is, when I add my VisualStateGroup with my BeforeLoaded and Loaded state names, items fail to render at all in the ListBox. I get the blue highlighting when I hover, and the brighter blue when I click to select, but the actual content of the listbox item (the random rectangle) is absent.

When I remove that group, the rectangles render perfectly, but without any sort of animation (obviously). Attached is the complete style for the ItemContainerStyle of the ListBox. The rest of the code is verbatim from the link.

    <Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
        <Setter Property="Padding" Value="3"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalContentAlignment" Value="Top"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="TabNavigation" Value="Local"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Grid Background="{TemplateBinding Background}">
                        <VisualStateManager.VisualStateGroups>

                            <VisualStateGroup x:Name="LayoutStates">
                                <VisualState x:Name="BeforeLoaded">

                                    <Storyboard>
                                        <DoubleAnimation  
                                       Duration="00:00:00"  
                                       By="-196"  
                                       Storyboard.TargetName="contentProjection"  
                                       Storyboard.TargetProperty="GlobalOffsetX" />
                                       <DoubleAnimation  
                                       Duration="00:00:00"  
                                       By="-180"  
                                       Storyboard.TargetName="contentProjection"  
                                       Storyboard.TargetProperty="RotationY" />
                                        <DoubleAnimation  
                                       Duration="00:00:00"  
                                       By="-270"  
                                       Storyboard.TargetName="contentProjection"  
                                       Storyboard.TargetProperty="RotationX" />
                                    </Storyboard>


                                </VisualState>
                                <VisualState x:Name="Loaded">

                                    <Storyboard>
                                        <DoubleAnimation  
                                       Duration="00:00:01"  
                                       To="0"  
                                       Storyboard.TargetName="contentProjection"  
                                       Storyboard.TargetProperty="GlobalOffsetX" />
                                        <DoubleAnimation  
                                       Duration="00:00:01"  
                                       To="0"  
                                       Storyboard.TargetName="contentProjection"  
                                       Storyboard.TargetProperty="RotationY" />
                                        <DoubleAnimation  
                                       Duration="00:00:01"  
                                       To="0"  
                                       Storyboard.TargetName="contentProjection"  
                                       Storyb开发者_Python百科oard.TargetProperty="RotationX" />
                                    </Storyboard>

                                </VisualState>
                                <VisualState x:Name="Unloaded" />
                            </VisualStateGroup>

                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To=".35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected"/>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2"/>
                                    </Storyboard>

                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unfocused"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Rectangle x:Name="fillColor" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
                        <Rectangle x:Name="fillColor2" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
                        <!--<ContentPresenter x:Name="contentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"/>-->
                        <ContentPresenter x:Name="contentPresenter"  
                            Content="{TemplateBinding Content}"
                            ContentTemplate="{TemplateBinding ContentTemplate}"  
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"  
                            Margin="{TemplateBinding Padding}">

                            <ContentPresenter.Projection>
                                <PlaneProjection x:Name="contentProjection">
                                </PlaneProjection>
                            </ContentPresenter.Projection>
                        </ContentPresenter>
                        <Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed"/>
                    </Grid>



                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

---

One of the problems with following code in blogs is that many Blogs explaining exciting new features are written against CTP and Beta versions. As result some cease to work verbatim against the RTM versions.

In this case the State you (and Mike) are calling "Loaded" is infact called "AfterLoaded".