एक डेटाबेस में जोड़े गए एनिमेटिंग आइटम ListBox

Question

मेरे पास मेरे विंडोज फोन ऐप में एक डाटाबेस सूचीबॉक्स है। जब वे वेधशाला संग्रह में जोड़े जाते हैं तो सूची सूची में जोड़े जाने वाले आइटम को एनिमेट करना चाहते हैं (वास्तव में मेरा लिस्टबॉक्स एक संग्रहव्यूसोर्स से जुड़ा हुआ है जहां मैं अवलोकन संग्रह पर फ़िल्टरिंग का उपयोग करता हूं)।

मेरे ऐप की वर्तमान अनुभव है कि मैं एक अच्छा पेज संक्रमण है और उसके बाद लिस्टबॉक्स में सभी आइटम "दिखाई" जैसे ही संग्रह अनुभव एप्लिकेशन के बाकी की तुलना में कम तरल पदार्थ बनाने से भर जाता है है।

ऐसा करने का सबसे अच्छा तरीका क्या है?

Answer 1

मैंने सूची बॉक्स में जोड़े गए आइटमों में एनीमेशन किया है जब इसे जोड़ा गया है। मैंने सूची बॉक्स को अवलोकन योग्य चयन के बजाय कक्षा में बढ़ा दिया है। कोशिश करो।

<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

सप्ताह से अधिक के लिए वेब के आसपास लग रही है और विभिन्न तकनीकों का मूल्यांकन करने के बाद, इस समाधान यहाँ शानदार काम करता है।

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

यह रिएक्टिव एक्सटेंशन का उपयोग करता है मूल रूप से देरी से एक नमूदार संग्रह में आइटम लोड करने, लोड हो रहा है चेतन करने के लिए Bahaviors का उपयोग कर।