Animating Windows Phone Listboxes: Listing 3

XAML showing images' visual states.

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

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


  • Top 3 Blazor Extensions for Visual Studio Code

    Some developers prefer to create applications with Microsoft's open-source Blazor tooling from within the open-source, cross-platform Visual Studio Code editor. Here are the top tools in the VS Code Marketplace for those folk, as measured by the number of installations.

  • How to Invert a Machine Learning Matrix Using C#

    VSM Senior Technical Editor Dr. James McCaffrey, of Microsoft Research, explains why inverting a matrix -- one of the more common tasks in data science and machine learning -- is difficult and presents code that you can use as-is, or as a starting point for custom matrix inversion scenarios.

  • Microsoft Engineer: 'It's Time to Move OData to .NET 5'

    Microsoft engineer Sam Xu says "it’s time to move OData to .NET 5" and in a new blog post he shows how to do just that.

  • Microsoft Goes Virtual with Developer Education in Face of COVID-19

    Like many organizations that host developer educational events, Microsoft has gone virtual amid shelter-in-place directives and a surge in remote work stemming from the COVID-19 pandemic.

  • Microsoft Enhances Low-Code Power Apps

    Microsoft's nod to the low-code movement, Power Apps, has been enhanced with a bevy of new features, including mixed reality, canvas/model support in a new mobile app, UX improvements and more.

.NET Insight

Sign up for our newsletter.

Terms and Privacy Policy consent

I agree to this site's Privacy Policy.

Upcoming Events