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