Question

我的Windows Phone应用程序中有一个数据绑定ListBox。我想在将它们添加到Observable集合时添加到ListBox的动画（实际上我的ListBox绑定到我在Observable集合上使用过滤的CollectionViewSource）。

我的应用程序的当前体验是，我有一个很好的页面转换，然后列表框中的所有项目“出现”，只要集合被填充，使得体验不如应用程序的其余部分流畅。

这样做的最佳方式是什么？

Answer 1

在浏览网页超过一周并评估了许多不同的技术之后，这个解决方案非常棒。

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

它使用Reactive Extensions基本上将项目加载到具有延迟的Observable Collection中，使用Bahaviors为加载动画。

Answer 2

我在添加到列表框中的项目中完成了动画。我将列表框项目添加到类而不是可观察的集合。试试吧。

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

动画添加到数据绑定ListBox的项目

2 个答案: