Animating Windows Phone Listboxes: Listing 3

XAML showing images' visual states.

• By Nick Randolph
• 08/27/2012

<DataTemplate x:Key="ItemTemplate">
    <Grid Margin="12,0,0,12">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <VisualStateManager.CustomVisualStateManager>
            <ec:ExtendedVisualStateManager/>
        </VisualStateManager.CustomVisualStateManager>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="ImageStates">
            	<VisualStateGroup.Transitions>
            		<VisualTransition GeneratedDuration="0:0:2"/>
            		<VisualTransition GeneratedDuration="0:0:2" To="ImageLoaded">
            			<Storyboard>
            				<DoubleAnimation 
     Duration="0:0:1" To="0" 
     Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" 
     Storyboard.TargetName="DisplayImage"/>
            				<DoubleAnimation 
     BeginTime="0:0:1" Duration="0:0:2" To="0" 
     Storyboard.TargetProperty="(UIElement.Opacity)" 
     Storyboard.TargetName="PlaceholderBorder"/>
            			</Storyboard>
            		</VisualTransition>
            	</VisualStateGroup.Transitions>
            	<VisualState x:Name="ImageLoaded">
            		<Storyboard>
            			<DoubleAnimation 
     Duration="0" To="0" 
     Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" 
     Storyboard.TargetName="DisplayImage" d:IsOptimized="True"/>
            			<DoubleAnimation 
     Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" 
     Storyboard.TargetName="PlaceholderBorder" d:IsOptimized="True"/>
            		</Storyboard>
            	</VisualState>
            	<VisualState x:Name="ImageFailedToLoad">
            		<Storyboard>
            			<ColorAnimation 
     Duration="0" To="Red" 
     Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" 
     Storyboard.TargetName="PlaceholderBorder" d:IsOptimized="True"/>
            		</Storyboard>
            	</VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Border x:Name="PlaceholderBorder" Width="100"
            Height="100" Background="Gray" >
            <Border.Projection>
            	<PlaneProjection CenterOfRotationX="0" CenterOfRotationY="0"/>
            </Border.Projection>
        </Border>
        <Image x:Name="DisplayImage"  Width="100"
                Height="100"
                Source="{Binding ImageUrl}" >
            <Image.Projection>
                <PlaneProjection RotationY="90" CenterOfRotationX="0" CenterOfRotationY="0" />
            </Image.Projection>
        </Image>
        <TextBlock Grid.Column="1"
                    Text="{Binding Title}"
                    Style="{StaticResource PhoneTextLargeStyle}" />
    </Grid>
</DataTemplate>