在数据透视表内的LongListSelector控件中的动画

时间:2013-10-24 12:05:05

标签: xaml windows-phone-8

我有一个Pivot控件,它有三个PivotItem,所有这些都是LongListSelectors,现在我需要在首先加载的任何枢轴项上显示特定类型的动画,即在启动时向用户显示的项目或导航回页面时。为此我已经将一个加载的事件附加到pivot控件,它在加载控件时为我提供显示的PivotItem,并基于此我将DataTemplates提供给pivot项内的LongListSelecor

       private async void MainPivot_Loaded(object sender, RoutedEventArgs e)
    {
        var sen = (Pivot)sender;

        for (int k = 0; k < sen.Items.Count; k++)
        {
            if (k == sen.SelectedIndex)
            {
                var navigatingTo = (LongListSelector)((PivotItem)((Pivot)sender).SelectedItem).Content;
                navigatingTo.ItemTemplate = Resources["AnimationDataTemplate"] as DataTemplate;

            }
            else
                ((LongListSelector)((PivotItem)sen.Items[k]).Content).ItemTemplate = Resources["DefaultDataTemplate"] as DataTemplate;

        }
    }

我有两个没有动画的DataTemplates

        <DataTemplate x:Key="DefaultDataTemplate">
        <StackPanel x:Name="Panel" Background="#f5f5f5" Width="430" Margin="2,0,0,10">

            <StackPanel Orientation="Horizontal">
                <Rectangle Fill="{Binding Condition, Converter={StaticResource conditionToColor}}" Height="Auto" Width="5"/>
                <StackPanel Margin="10,10,0,10" Height="{Binding  Converter={StaticResource conditionToStackPanelHeight}}" Width="330">
                    <TextBlock x:Name="Text1" Text="{Binding LineOne}" Foreground="#5ac8d5" FontFamily="Lato" FontWeight="SemiBold" FontSize="{Binding  Converter={StaticResource conditionToMainTextFontSize}}" Width="330" TextAlignment="Left" TextWrapping="Wrap" Margin="{Binding  Converter={StaticResource conditionToMainTextMargin}}" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                    <TextBlock x:Name="Text2" Text="Hospital" Foreground="#8fa7b3" FontSize="{Binding  Converter={StaticResource conditionToSubTextFontSize}}"  Width="330" TextAlignment="Left"  TextWrapping="Wrap" Margin="{Binding  Converter={StaticResource conditionToSubTextMargin}}" Style="{StaticResource PhoneTextSubtleStyle}"/>
                    <TextBlock x:Name="Text3" Text="Visited on" Foreground="#8fa7b3" FontSize="{Binding  Converter={StaticResource conditionToSubTextFontSize}}"  Width="330" TextAlignment="Left"  TextWrapping="Wrap" Margin="{Binding  Converter={StaticResource conditionToSubTextMargin}}" Style="{StaticResource PhoneTextSubtleStyle}"/>
                    <TextBlock x:Name="Text4" Text="By" Foreground="#8fa7b3" FontSize="{Binding  Converter={StaticResource conditionToSubTextFontSize}}"  Width="330" TextAlignment="Left"  TextWrapping="Wrap" Margin="{Binding  Converter={StaticResource conditionToSubTextMargin}}" Style="{StaticResource PhoneTextSubtleStyle}"/>
                </StackPanel>
                <Image Source="Assets/Images/SmallMale.png" Height="{Binding  Converter={StaticResource conditionToImageHeight}}" Margin="{Binding  Converter={StaticResource conditionToImageMargin}}" Opacity="0.25" VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
            </StackPanel>
        </StackPanel>
    </DataTemplate>

另一个有动画

<DataTemplate x:Key="AnimationDataTemplate">
        <StackPanel x:Name="PanelToAnimate" Background="#f5f5f5" Width="430" Margin="622,0,-622,10" Loaded="PanelToAnimate_Loaded" Unloaded="PanelToAnimate_Unloaded">
            <StackPanel.Resources>

                <Storyboard x:Name="myStackPanelboard">
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.GlobalOffsetX)" Storyboard.TargetName="PanelToAnimate">
                        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-620"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>

                <Storyboard x:Name="EndStoryBoard">
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.GlobalOffsetX)" Storyboard.TargetName="PanelToAnimate">
                        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                        <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="620"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </StackPanel.Resources>
            <StackPanel.Projection>
                <PlaneProjection/>
            </StackPanel.Projection>

            <StackPanel Orientation="Horizontal">
                <Rectangle Fill="{Binding Condition, Converter={StaticResource conditionToColor}}" Height="Auto" Width="5"/>
                <StackPanel Margin="10,10,0,10" Height="{Binding Converter={StaticResource conditionToStackPanelHeight}}" Width="330">
                    <TextBlock x:Name="Text1" Text="{Binding LineOne}" Foreground="#5ac8d5" FontFamily="Lato" FontWeight="SemiBold" FontSize="{Binding Converter={StaticResource conditionToMainTextFontSize}}" Width="330" TextAlignment="Left" TextWrapping="Wrap" Margin="{Binding  Converter={StaticResource conditionToMainTextMargin}}" Style="{StaticResource PhoneTextExtraLargeStyle}">
                        <TextBlock.Projection>
                            <PlaneProjection/>
                        </TextBlock.Projection>
                    </TextBlock>
                    <TextBlock x:Name="Text2" Text="Hospital" Foreground="#8fa7b3" FontSize="{Binding  Converter={StaticResource conditionToSubTextFontSize}}"  Width="330" TextAlignment="Left"  TextWrapping="Wrap" Margin="{Binding Converter={StaticResource conditionToSubTextMargin}}" Style="{StaticResource PhoneTextSubtleStyle}">
                        <TextBlock.Projection>
                            <PlaneProjection/>
                        </TextBlock.Projection>
                    </TextBlock>
                    <TextBlock x:Name="Text3" Text="Visited on" Foreground="#8fa7b3" FontSize="{Binding Converter={StaticResource conditionToSubTextFontSize}}"  Width="330" TextAlignment="Left"  TextWrapping="Wrap" Margin="{Binding  Converter={StaticResource conditionToSubTextMargin}}" Style="{StaticResource PhoneTextSubtleStyle}">
                        <TextBlock.Projection>
                            <PlaneProjection/>
                        </TextBlock.Projection>
                    </TextBlock>
                    <TextBlock x:Name="Text4" Text="By" Foreground="#8fa7b3" FontSize="{Binding Converter={StaticResource conditionToSubTextFontSize}}"  Width="330" TextAlignment="Left"  TextWrapping="Wrap" Margin="{Binding  Converter={StaticResource conditionToSubTextMargin}}" Style="{StaticResource PhoneTextSubtleStyle}">
                        <TextBlock.Projection>
                            <PlaneProjection/>
                        </TextBlock.Projection>
                    </TextBlock>
                </StackPanel>
                <Image Source="Assets/Images/SmallMale.png" Height="{Binding Converter={StaticResource conditionToImageHeight}}" Margin="{Binding Converter={StaticResource conditionToImageMargin}}" Opacity="0.25" VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
            </StackPanel>
        </StackPanel>
    </DataTemplate>

StackPanel里面的“AnimationDataTemplate”有一个加载的事件,我在其中执行开始故事板的逻辑,当应用程序启动时,我已经获得了7次PanelToAnimate_Loaded事件,如果有7个项目所有的longlistselectors,现在,如果我导航到(说我在第一个PivotItem LongListSelector从那里我去第二个PivotItem LongListSelector并从那里导航)  从下一页回来我得到了14次触发的PanelToAnimate_Loaded事件,但是longlistselector中的项目是7。

有人可以帮助我吗?

0 个答案:

没有答案