• 给 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;
            }


    点击按钮后,动画播放。

  • 相关阅读:
    python接口自动化测试二十四:上传多个附件,参数化
    python接口自动化测试二十三:文件上传
    python接口自动化测试二十二:文件下载
    python接口自动化测试二十一:类和方法
    Delphi开发ocx插件的调试
    Confluence 6 推荐的更新通知设置和禁用
    Confluence 6 配置推荐更新邮件通知默认的初始化设置
    为 Confluence 6 分发包设置一个邮件会话
    Confluence 6 测试电子邮件设置
    为 Confluence 6 配置发送邮件消息
  • 原文地址:https://www.cnblogs.com/hebeiDGL/p/2442207.html
Copyright © 2020-2023  润新知