Animowane elementy dodane do listy danych ListBox

Question

Posiadam listBox databox w mojej aplikacji Windows Phone. Chciałbym animować elementy dodawane do ListBox, gdy są one dodawane do kolekcji Observable (w rzeczywistości mój ListBox jest powiązany z CollectViewSource gdzie używam filtrowania w kolekcji Observable).

Obecne doświadczenie w mojej aplikacji polega na tym, że mam przyjemne przejście strony, a następnie wszystkie elementy w polu listy "pojawiają się", gdy tylko kolekcja zostanie wypełniona, dzięki czemu doświadczenie będzie mniej płynne niż reszta aplikacji.

Jaki jest najlepszy sposób robienia tego?

Answer 1

Wykonałem animację w elementach dodanych do listbox po dodaniu. Zlikwidowałem elementy listbox do klasy zamiast obserwowalnej kolekcji. Spróbuj.

<ListBox Name="listBox1" Width="Auto" HorizontalAlignment="Left" ItemsSource="{Binding Img}" DataContext="{Binding}" Margin="0,70,0,0" HorizontalContentAlignment="Left" VerticalContentAlignment="Stretch" Background="White"> 
    <ListBox.ItemTemplate> 
     <DataTemplate> 
      <Border BorderThickness="0,0.3,0,0.3" Width="Auto" BorderBrush="Black" > 
       <Grid> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="Auto" /> 
         <RowDefinition Height="*" /> 
        </Grid.RowDefinitions> 
        <Image Grid.Row="0" Source="{Binding thumb}" Stretch="Fill" Height="174" Opacity="0.04"></Image> 
        <StackPanel Name="ContentGrid" Grid.Row="0" Height="175" Orientation="Vertical" Width="Auto"> 
         <StackPanel.Resources> 
          <EventTrigger x:Name="event" RoutedEvent="StackPanel.Loaded"> 
           <EventTrigger.Actions> 
            <BeginStoryboard> 
             <Storyboard x:Name="mystoryboard"> 
              <DoubleAnimationUsingKeyFrames 
              Storyboard.TargetName="Trans" 
              Storyboard.TargetProperty="X"> 
               <LinearDoubleKeyFrame Value="-387" KeyTime="0:0:1" /> 
              </DoubleAnimationUsingKeyFrames> 
              <DoubleAnimationUsingKeyFrames 
              Storyboard.TargetName="Trans1" 
              Storyboard.TargetProperty="X"> 
               <LinearDoubleKeyFrame Value="350" KeyTime="0:0:1" /> 
               <LinearDoubleKeyFrame Value="-350" KeyTime="0:0:1.6" /> 
              </DoubleAnimationUsingKeyFrames> 
              <DoubleAnimationUsingKeyFrames 
              Storyboard.TargetName="Trans2" 
              Storyboard.TargetProperty="X"> 
               <LinearDoubleKeyFrame Value="350" KeyTime="0:0:2" /> 
               <LinearDoubleKeyFrame Value="-350" KeyTime="0:0:2.5" /> 
              </DoubleAnimationUsingKeyFrames> 
              <DoubleAnimationUsingKeyFrames 
              Storyboard.TargetName="Trans3" 
              Storyboard.TargetProperty="Y"> 
               <LinearDoubleKeyFrame Value="-165" KeyTime="0:0:2" /> 
              </DoubleAnimationUsingKeyFrames> 
              <DoubleAnimation 
              Storyboard.TargetName="Imageopac" 
              Storyboard.TargetProperty="Opacity" 
              From="0.0" To="0.5" Duration="0:0:5" 
               /> 
             </Storyboard> 
            </BeginStoryboard> 
           </EventTrigger.Actions> 
          </EventTrigger> 
         </StackPanel.Resources> 
         <Image Height="165" HorizontalAlignment="Left" Margin="400,40,-400,0" VerticalAlignment="Top" Width="175" Source="{Binding thumb}"> 
          <Image.RenderTransform> 
           <TranslateTransform x:Name="Trans" X="0" Y="0" /> 
          </Image.RenderTransform> 
         </Image> 
         <Image Height="100" Name="Imageopac" HorizontalAlignment="Left" Margin="150,63.5,-400,0" Source="{Binding thumb}" Opacity="0.5"> 
          <Image.RenderTransform > 
           <CompositeTransform ScaleY="-1" SkewX="50" CenterY="-13.5" TranslateX="0" TranslateY="0"/> 
          </Image.RenderTransform> 
          <Image.OpacityMask> 
           <LinearGradientBrush StartPoint="0,1" EndPoint="0,0"> 
            <GradientStop Offset="-1.8" Color="Black"></GradientStop> 
            <GradientStop Offset="0.9" Color="Transparent"></GradientStop> 
           </LinearGradientBrush> 
          </Image.OpacityMask> 
         </Image> 
         <TextBlock Name="text1" Width="1000" TextWrapping="NoWrap" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="550,-335,-200,0" Text="{Binding title}" Foreground="Black" > 
          <TextBlock.RenderTransform> 
           <TranslateTransform x:Name="Trans1" X="0" Y="0" /> 
          </TextBlock.RenderTransform> 
         </TextBlock> 
         <TextBlock Name="text2" TextWrapping="Wrap" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="550,-300,-200,0" Text="{Binding page}" Foreground="Black" > 
           <TextBlock.RenderTransform> 
         <TranslateTransform x:Name="Trans2" X="0" Y="0" /> 
         </TextBlock.RenderTransform> 
         </TextBlock> 
         <TextBlock FontSize="16" TextWrapping="Wrap" Margin="198,-100,0,0" Text="{Binding Name}" Foreground="Black" > 
         <TextBlock.RenderTransform> 
         <TranslateTransform x:Name="Trans3" X="0" Y="0" /> 
         </TextBlock.RenderTransform> 
         </TextBlock> 
        </StackPanel> 
       </Grid> 
      </Border> 
     </DataTemplate> 
    </ListBox.ItemTemplate> 
</ListBox> 

---

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 < 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); 
} 

Answer 2

Po rozglądając się po internecie przez ponad tydzień i oceny wielu różnych technik, to rozwiązanie działa tu fantastyczne.

http://tozon.info/blog/post/2010/10/13/Reactive-Extensions-3-Windows-Phone-7.aspx

http://fiercedesign.wordpress.com/2011/12/27/windows-phone-reactive-extensions-rx-2

Wykorzystuje Reactive Extensions w zasadzie załadować elementy do obserwowanej Collection z opóźnieniem, wykorzystując Bahaviors animować załadunek.