Fade effect for Silverlight 4 "list" - silverlight

Question

I'd like a way to display a list of text strings that fades like the following:
If you're using Office 2010, the effect is used in the new splash screens.
What I'd like is to have the last item selected and all items above faded so we achieve a similar affect. As items are added, the new item is selected and the previous item moves up and fades away.
Any ideas?

Answer 1

You can use a ListBox to achieve what you want.
In Silverlight 4, there is a new group of states LayoutStates available within ListBoxItem style.
It has three visual states, AfterLoaded, BeforeUnloaded and BeforeLoaded.
As the names imply, the BeforeLoaded state occurs right before the
ListBoxItem is added to the ListBox and the AfterLoaded state happens
after the ListBoxItem is added. BeforeUnloaded happens right before the ListBoxItem is removed.
In your case, you need to animate the fade in (Opacity and TranslateY) in the BeforeLoaded state when you try to add a new line of text, and animate the fade out in the BeforeUnloaded state when you try to remove the top line. Below is just one simple example.
<Style x:Key="AnimatedListBoxItemStyle" TargetType="ListBoxItem">
...
<VisualStateGroup x:Name="LayoutStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.4" To="BeforeUnloaded">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="LayoutRoot">
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-37" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot">
<EasingDoubleKeyFrame KeyTime="0" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition GeneratedDuration="0:0:1" />
</VisualStateGroup.Transitions>
<VisualState x:Name="BeforeUnloaded" />
<VisualState x:Name="BeforeLoaded">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="LayoutRoot">
<EasingDoubleKeyFrame KeyTime="0" Value="37" />
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot">
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="AfterLoaded" />
</VisualStateGroup>
Because after you removed the first line, the rest ListBoxItems will jump up at once to fill the empty space. To make this transition fluidly, you can overwrite the ListBox's ItemsPanel with a normal StackPanel, and attach a FluidMoveBehavior to it. Remeber to set the AppliesTo to Children. This means the animation will happen to the ListBox's children which are the ListBoxItems.
<ItemsPanelTemplate x:Key="ItemsPanelTemplate">
<StackPanel>
<i:Interaction.Behaviors>
<ei:FluidMoveBehavior AppliesTo="Children"/>
</i:Interaction.Behaviors>
</StackPanel>
</ItemsPanelTemplate>
Hope this helps. :)
UPDATE
You use OpacityMask to create the fade.
<ScrollViewer Padding="0" HorizontalAlignment="Center" Width="180" Height="300" VerticalAlignment="Center" VerticalScrollBarVisibility="Disabled" BorderThickness="0">
<ScrollViewer.OpacityMask>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="Transparent" Offset="0" />
<GradientStop Color="Black" Offset="0.1" />
</LinearGradientBrush>
</ScrollViewer.OpacityMask>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Text="First Line" FontSize="14.667"/>
<TextBlock Text="Second Line" Grid.Row="1" FontSize="14.667"/>
</Grid>
</ScrollViewer>