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">
<Button.Resources>
<EventTrigger x:Name="event" RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<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"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Resources>
<Button.Style>
<StaticResource ResourceKey="InvisibleButtonStyle"/>
</Button.Style>

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

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:

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: