Animating Windows Phone Listboxes: Listing 3

XAML showing images' visual states.

<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>

About the Author

Nick Randolph runs Built to Roam, a consulting company that specializes in training, mentoring and assisting other companies build mobile applications. With a heritage in rich client applications for both the desktop and a variety of mobile platforms, Nick currently presents, writes and educates on the Windows Phone platform.

comments powered by Disqus

Featured

.NET Insight

Sign up for our newsletter.

Terms and Privacy Policy consent

I agree to this site's Privacy Policy.

Upcoming Events