Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>I have done animation in the items added to the listbox when it is added.I ounded the listbox items to a class instead of observable colection. Try it.</p> <pre><code>&lt;ListBox Name="listBox1" Width="Auto" HorizontalAlignment="Left" ItemsSource="{Binding Img}" DataContext="{Binding}" Margin="0,70,0,0" HorizontalContentAlignment="Left" VerticalContentAlignment="Stretch" Background="White"&gt; &lt;ListBox.ItemTemplate&gt; &lt;DataTemplate&gt; &lt;Border BorderThickness="0,0.3,0,0.3" Width="Auto" BorderBrush="Black" &gt; &lt;Grid&gt; &lt;Grid.RowDefinitions&gt; &lt;RowDefinition Height="Auto" /&gt; &lt;RowDefinition Height="*" /&gt; &lt;/Grid.RowDefinitions&gt; &lt;Image Grid.Row="0" Source="{Binding thumb}" Stretch="Fill" Height="174" Opacity="0.04"&gt;&lt;/Image&gt; &lt;StackPanel Name="ContentGrid" Grid.Row="0" Height="175" Orientation="Vertical" Width="Auto"&gt; &lt;StackPanel.Resources&gt; &lt;EventTrigger x:Name="event" RoutedEvent="StackPanel.Loaded"&gt; &lt;EventTrigger.Actions&gt; &lt;BeginStoryboard&gt; &lt;Storyboard x:Name="mystoryboard"&gt; &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetName="Trans" Storyboard.TargetProperty="X"&gt; &lt;LinearDoubleKeyFrame Value="-387" KeyTime="0:0:1" /&gt; &lt;/DoubleAnimationUsingKeyFrames&gt; &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetName="Trans1" Storyboard.TargetProperty="X"&gt; &lt;LinearDoubleKeyFrame Value="350" KeyTime="0:0:1" /&gt; &lt;LinearDoubleKeyFrame Value="-350" KeyTime="0:0:1.6" /&gt; &lt;/DoubleAnimationUsingKeyFrames&gt; &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetName="Trans2" Storyboard.TargetProperty="X"&gt; &lt;LinearDoubleKeyFrame Value="350" KeyTime="0:0:2" /&gt; &lt;LinearDoubleKeyFrame Value="-350" KeyTime="0:0:2.5" /&gt; &lt;/DoubleAnimationUsingKeyFrames&gt; &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetName="Trans3" Storyboard.TargetProperty="Y"&gt; &lt;LinearDoubleKeyFrame Value="-165" KeyTime="0:0:2" /&gt; &lt;/DoubleAnimationUsingKeyFrames&gt; &lt;DoubleAnimation Storyboard.TargetName="Imageopac" Storyboard.TargetProperty="Opacity" From="0.0" To="0.5" Duration="0:0:5" /&gt; &lt;/Storyboard&gt; &lt;/BeginStoryboard&gt; &lt;/EventTrigger.Actions&gt; &lt;/EventTrigger&gt; &lt;/StackPanel.Resources&gt; &lt;Image Height="165" HorizontalAlignment="Left" Margin="400,40,-400,0" VerticalAlignment="Top" Width="175" Source="{Binding thumb}"&gt; &lt;Image.RenderTransform&gt; &lt;TranslateTransform x:Name="Trans" X="0" Y="0" /&gt; &lt;/Image.RenderTransform&gt; &lt;/Image&gt; &lt;Image Height="100" Name="Imageopac" HorizontalAlignment="Left" Margin="150,63.5,-400,0" Source="{Binding thumb}" Opacity="0.5"&gt; &lt;Image.RenderTransform &gt; &lt;CompositeTransform ScaleY="-1" SkewX="50" CenterY="-13.5" TranslateX="0" TranslateY="0"/&gt; &lt;/Image.RenderTransform&gt; &lt;Image.OpacityMask&gt; &lt;LinearGradientBrush StartPoint="0,1" EndPoint="0,0"&gt; &lt;GradientStop Offset="-1.8" Color="Black"&gt;&lt;/GradientStop&gt; &lt;GradientStop Offset="0.9" Color="Transparent"&gt;&lt;/GradientStop&gt; &lt;/LinearGradientBrush&gt; &lt;/Image.OpacityMask&gt; &lt;/Image&gt; &lt;TextBlock Name="text1" Width="1000" TextWrapping="NoWrap" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="550,-335,-200,0" Text="{Binding title}" Foreground="Black" &gt; &lt;TextBlock.RenderTransform&gt; &lt;TranslateTransform x:Name="Trans1" X="0" Y="0" /&gt; &lt;/TextBlock.RenderTransform&gt; &lt;/TextBlock&gt; &lt;TextBlock Name="text2" TextWrapping="Wrap" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="550,-300,-200,0" Text="{Binding page}" Foreground="Black" &gt; &lt;TextBlock.RenderTransform&gt; &lt;TranslateTransform x:Name="Trans2" X="0" Y="0" /&gt; &lt;/TextBlock.RenderTransform&gt; &lt;/TextBlock&gt; &lt;TextBlock FontSize="16" TextWrapping="Wrap" Margin="198,-100,0,0" Text="{Binding Name}" Foreground="Black" &gt; &lt;TextBlock.RenderTransform&gt; &lt;TranslateTransform x:Name="Trans3" X="0" Y="0" /&gt; &lt;/TextBlock.RenderTransform&gt; &lt;/TextBlock&gt; &lt;/StackPanel&gt; &lt;/Grid&gt; &lt;/Border&gt; &lt;/DataTemplate&gt; &lt;/ListBox.ItemTemplate&gt; &lt;/ListBox&gt; </code></pre> <hr> <pre><code>public class img { public string thumb { get; set; } public string Name { get; set; } public string page { get; set; } public string title { get; set; } } for (i = 0; i &lt; result.Length; i++) { Img data = new Img() { thumb = "/PhoneApp9;component/images/1_thump.jpg.jpg", page = "Page", Name = "string", title = "Ikea Catalogue" }; listBox1.Items.Add(data); } </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload