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

  • 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