Windows Phone 实用开发技巧(26):对DataTemplate中的元素播放动画-阿里云开发者社区

开发者社区> 技术小胖子> 正文

Windows Phone 实用开发技巧(26):对DataTemplate中的元素播放动画

简介:
+关注继续查看

 有些时候我们需要对ListBox中的某项做出一种点击动画,即点击ListBox的某项时,被点的Item播放一个相应的动画。通常,我们需要自定义ListBox的ItemTemplate以做出自定义的ListBoxItem。下面,我讲讲如何利用Expression Blend和Visual Studio 分别实现这样的效果。

一. 使用Expression Blend

1. 创建Windows Phone Databound Application

image

2. 去掉MainListBox_SelectionChanged中的事件,由于模板中代码是选中ListBox某项就进去该项的Detail Page,我们不需要,所以暂时先注释掉,如下图:

image

3. 编辑MainListBox的模板

image

4. 选择States卡片,新建一个state group

image

5. 命名为Selected,这时候注意到页面外围有一个红框,表示我们正在录制相应的State

image

6.在Objects and  Timeline中选择第一个textBlock,将其属性面板中的TranslateX设为204

image

7.切换到Assets卡片,我们对StackPanel加上相应的Behavior控制,选中GoToStateAction,拖拽至Objects and  Timeline中的StackPanel上,如下图:

image

8. 运行程序,点击某项后,第一行文字会向右运动。

说明:上述方法其实是使用State去实现相应的动画的,下面以Visual Studio编码的形式真正实现播放动画。

二、使用Visual Studio

运行效果图下图,点击ListBox中的某项后,图片会旋转180度

image

<DataTemplate x:Key="DT_ListBox">     <Button BorderThickness="0" Click="Btn_Click">         <StackPanel Orientation="Horizontal">            <Image x:Name="imgD" Height="48" Width="48" Source="/appbar.back.rest.png" RenderTransformOrigin="0.5,0.5">                <Image.RenderTransform>                             <CompositeTransform />                </Image.RenderTransform>            </Image>            <TextBlock Text="{Binding}" />         </StackPanel>         <Button.Resources>               <Storyboard x:Name="sb_TurnRight" Storyboard.TargetName="imgD" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)">                   <DoubleAnimation From="0" To="180" />               </Storyboard>         </Button.Resources>      </Button> </DataTemplate> 

下面是Button的Click事件

private void Btn_Click(object sender, RoutedEventArgs e)
{
    var btn = sender as Button;
    if (btn!=null)
    {
        var sb = btn.Resources["sb_TurnRight"] as Storyboard;
        if (sb!=null)
        {
            sb.Begin();
        }
    }
}
说明:Visual Studio的方法其实是将StoryBoard存在模板的Resouce中,然后在代码中获取并播放,灵活性更大一些。

 

Expression Blend Source Code 

Visual Studio Souce Code



     本文转自xshf12345 51CTO博客,原文链接:http://blog.51cto.com/alexis/706531,如需转载请自行联系原作者







版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
UWP开发入门(十八)——使用ContentControl减少页面元素数量
原文:UWP开发入门(十八)——使用ContentControl减少页面元素数量   我们今天学习一下ContentControl,主要介绍如何使用ContentControl搭配DataTemplate来进行界面的复用,以及通过ContentTemplateSelector进一步减少页面元素数量,提高性能。
929 0
【iOS开发】添加设备到 iOSTeam Provisioning Profile
如果你是 iOS个人开发者的话,那么一定知道,可以在 https://developer.apple.com/account/ios/device/deviceList.action 这个地方添加内测设备的UDID 管理Devices 有一个叫做 iOSTeam Provisioning Profile 的文件。
1062 0
请问下开发DNN是不是一般都用CodeSmith,DNN Project Templates,CodeSmith Templates来开发?
Q: 1、我下载了04-06-02_zh_cn C#版的 我是搞C#的,请问下开发DNN,是不是一般都用模板 我说的模板是指 CodeSmith DNN Project Templates CodeSmith Templates 有没有VS2005支...
619 0
Win10 UWP xaml 延迟加载元素
原文:Win10 UWP xaml 延迟加载元素 xaml新增x:DeferLoadStrategy里面只有Lazy,查询了百度看到MSP_甄心cherish大神说的 xaml使用x:DeferLoadStrategy="Lazy"延迟加载元素 我写了代码 ...
596 0
区块链技术开发 结合金融产业的两大特点
区块链技术开发是数字时代的金融应用主要方向,发展程度有别于20世纪的传统金融,区块链技术改变了金融服务的表达方式和信任体系,毫不夸张的说,区块链技术开发的地位等同于蒸汽动力革命,是支撑第二次数字变革的大趋势,同时也将对互联网金融的发展产生深远影响。
1033 0
21119
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载