State Animation on ListBox ItemTemplate
- by Peanut
I have a listbox which reads from Observable collection, and is ItemTemplate'ed:
<DataTemplate x:Key="DataTemplate1">
<Grid x:Name="grid" Height="47.333" Width="577" Opacity="0.495">
<Image HorizontalAlignment="Left" Margin="10.668,8,0,8" Width="34" Source="{Binding ImageLocation}"/>
<TextBlock Margin="56,8,172.334,8" TextWrapping="Wrap" Text="{Binding ApplicationName}" FontSize="21.333"/>
<Grid x:Name="grid1" HorizontalAlignment="Right" Margin="0,10.003,-0.009,11.33" Width="26" Opacity="0" RenderTransformOrigin="0.5,0.5">
<Image HorizontalAlignment="Stretch" Margin="0" Source="image/downloads.png" Stretch="Fill" MouseDown="Image_MouseDown" />
</Grid>
</Grid>
</DataTemplate>
<ListBox x:Name="searchlist" Margin="8" ItemTemplate="{DynamicResource DataTemplate1}" ItemsSource="{Binding SearchResults}" SelectionChanged="searchlist_SelectionChanged" ItemContainerStyle="{DynamicResource ListBoxItemStyle1}" />
In general, my question is "What is the easiest way to do Animation on Particular Items in this listbox As they are selected? Basically the image inside the "grid1" will be setting its opacity to 1, slowly.
I would prefer to use states, but I do not know of any way to just tell blend and xaml to "When a selected item is changed, change the image opacity to 1 over a period of .3 seconds". Infact, I have been doing this in the .cs file using the VisualStateManager.
Also, there is another issue. When the selected index is changed, we goto the CS file and look at SelectedItem. SelectedItem returns an instance of the Object in which it was bound to (The object inside the observable collection), and NOT an instance of the DataTemplate/ListItem etc. So how am I able to pull the correct image out of this list?
State animation with VisualStateManager I can handle fine if its just normal things, but when it comes to generated listboxes' items, I'm lost.
Thanks
