给 ListBox 的 DataTemplate 模板中的 元素设置动画

首先定义模板:

 <DataTemplate x:Key="ItemTemplate">
            <Grid Width="470" Margin="0,30,0,0" Tap="Grid_Tap" x:Name="grid">
           <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="370"/>
                    <ColumnDefinition Width="100"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="60"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="25" />
                </Grid.RowDefinitions>
                <TextBlock Text="{Binding comments_count}" Width="41" Margin="60,18,0,-4" HorizontalAlignment="Left" Foreground="#FFABD623"/>
                <!--<TextBlock Text="{Binding created_time}" Margin="8,34,145,0" VerticalAlignment="Top" Grid.Row="0"/>-->
                <CheckBox IsChecked="{Binding has_uped, Mode=TwoWay}" Margin="0,8,85,-37" Content="has_uped" Visibility="Collapsed" HorizontalAlignment="Right" Width="63"/>
                <Image Source="{Binding img_url}" Margin="0,20,0,0" Grid.Row="1" VerticalAlignment="Top" Grid.Column="1" HorizontalAlignment="Left" Height="90" Width="90"/>
                <CheckBox IsChecked="{Binding is_break, Mode=TwoWay}" Margin="0,8,-15,0" VerticalAlignment="Top" HorizontalAlignment="Right" Width="66" Content="is_break" Visibility="Collapsed"/>
                <TextBlock Text="{Binding title}" TextWrapping="Wrap"  Margin="0,1,0,0" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Top" Foreground="White"/>
                <TextBlock  Text="{Binding url}" Grid.Row="2" Margin="60,-4,38,4" Grid.ColumnSpan="2" d:LayoutOverrides="GridBox" Foreground="#FF956020"/>
                <TextBlock HorizontalAlignment="Left" Margin="0,19,0,-1" TextWrapping="Wrap" Text="评论数:" Width="56" FontSize="16" Foreground="#FFABD623"/>
                <TextBlock HorizontalAlignment="Left" Grid.Row="2" TextWrapping="Wrap" Text="网址:"  FontSize="16" Foreground="#FF956020"  />

                <Button Content="查看评论" Margin="80,2,152,-1" Style="{StaticResource ButtonStyle}" Tap="Button_Tap"/>
                <!--<TextBlock Grid.Column="1" TextWrapping="Wrap" Text="顶:" Foreground="#FFABD623"  Height="56" Padding="15,13,0,0" Margin="0,2,10,2" Tap="TxtbUps_Tap">
                    <Run Text="{Binding ups}"/>                    
                </TextBlock>-->
                <Button  Grid.Column="1" BorderBrush="{x:Null}" Tap="TxtbUps_Tap">
                    <Button.Resources>
                        <Storyboard x:Name="AddOneStoBoard">
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="image">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0.01"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.01"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="image">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="-270.5"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="image">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="100"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="image">
                                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="100"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="image">
                                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="100"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </Button.Resources>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="顶:" FontSize="16" Grid.Column="0"/>
                        <TextBlock Text="{Binding ups}"  FontSize="16" Grid.Column="1"/>
                        
                    </Grid>
                </Button>
                <Image x:Name="image"  Source="images/+1.png" Grid.Column="2" Stretch="Fill" Width="1" Height="1" RenderTransformOrigin="0.5,0.5">
                    <Image.RenderTransform>
                        <CompositeTransform/>
                    </Image.RenderTransform>
                </Image>
                <TextBlock Margin="0,19,0,8" TextWrapping="Wrap" Text="{Binding created_time,Converter={StaticResource LongToTimeSpanConverter}}" Foreground="#FFCECACA" FontSize="16" HorizontalAlignment="Right" Width="184"/>

            </Grid>
        </DataTemplate>


在 codebehind 页面中捕获sender,并播放动画

 private void TxtbUps_Tap(object sender, System.Windows.Input.GestureEventArgs e)
        {
           
                    Button btn = sender as Button;
                    Storyboard sb = btn.Resources["AddOneStoBoard"] as Storyboard;
                    if (sb != null)
                    {
                        sb.Begin();
                    }
                            
           
            //e.Handled = true;
        }


点击按钮后,动画播放。

posted @ 2012-04-11 13:32  博琼  阅读(475)  评论(0编辑  收藏  举报