Hello,
I have a listbox with a custom itemtemplate (stackpanels). I try to animate the items so that they all move down from the top of the listbox. The problem is that when I modify the Y coordinate, it moves the listboxitem text only inside the item's boundaries, so I cannot simulate falling items down from the top.
<DataTemplate x:Key="CustomListBoxItemTemplate">
<StackPanel x:Name="item" Orientation="Horizontal" Margin="5, 5, 5, 5" Opacity="0" Loaded="item_Loaded">
<StackPanel.RenderTransform>
<TranslateTransform x:Name="translate" />
</StackPanel.RenderTransform>
<StackPanel.Resources>
<Storyboard x:Name="item_Loaded" BeginTime="00:00:00">
<DoubleAnimation From="0" To="0" Storyboard.TargetProperty="translate.Y" Duration="00:00:00.4"/>
<DoubleAnimation From="0" To="1" Storyboard.TargetProperty="Opacity" Duration="00:00:00.4"/>
</Storyboard>
</StackPanel.Resources>
<TextBlock Margin="15, 0, 0, 0" Text="{Binding}" FontSize="24" TextWrapping="NoWrap" />
</StackPanel>
</DataTemplate>
Here is the code of the animation:
private double starttime = 0.0;
...
DropDownList = new ListBox();
DropDownList.ItemTemplate = (DataTemplate)this.Resources["CustomListBoxItemTemplate"];
...
private void item_Loaded(object sender, RoutedEventArgs e)
{
this.StartAnimationFromResource("item_Loaded", sender as FrameworkElement);
}
private void StartAnimationFromResource(string animationName, FrameworkElement element)
{
Storyboard sb = element.Resources[animationName] as Storyboard;
sb.Stop();
Storyboard.SetTarget(sb.Children[0], element.RenderTransform);
(sb.Children[0] as DoubleAnimation).From = (starttime/0.05) * -30; //Canvas.GetTop(element);
//(sb.Children[0] as DoubleAnimation).To = (starttime / 0.05) * 30; //Canvas.GetTop(element);
Storyboard.SetTarget(sb.Children[1], element);
sb.BeginTime = TimeSpan.FromSeconds(starttime);
starttime += 0.05;
sb.Begin();
}