首先定义模板:
<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; }
点击按钮后,动画播放。