Coding, How to

Windows Phone – Listbox animate item when added

Really quick one that might help out others. This datatemplate is used in my listbox as follows:

<ListBox ItemsSource="{Binding example}" ItemTemplate="{StaticResource ListNewsItem}"  ... />

then the template looks as follows, mine is wrapped in a button as I then bind commands but I’ve removed that for this example.

<DataTemplate x:Key="ListNewsItem">
<Button x:Name="newsItemBtn">
<EventTrigger x:Name="event" RoutedEvent="Canvas.Loaded">
<Storyboard x:Name="FadeIn">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="newsItemBtn">
<EasingDoubleKeyFrame KeyTime="0" Value="0.01"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
<StaticResource ResourceKey="InvisibleButtonStyle"/>

<TextBlock Text="{Binding ItemBindingExample}"/>

You now get a nice fade in when the an item is added to the list rather than a rough jump, looks much nicer!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s