欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2022-08-21 13:27:45
有些时候我们需要对listbox中的某项做出一种点击动画,即点击listbox的某项时,被点的item播放一个相应的动画。通常,我们需要自定义listbox的itemtemplate以做出自定义的...

有些时候我们需要对listbox中的某项做出一种点击动画,即点击listbox的某项时,被点的item播放一个相应的动画。通常,我们需要自定义listbox的itemtemplate以做出自定义的listboxitem。下面,我讲讲如何利用expression blend和visual studio 分别实现这样的效果。

一. 使用expression blend

1. 创建windows phone databound application

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

3. 编辑mainlistbox的模板

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

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

6.在objects and  timeline中选择第一个textblock,将其属性面板中的translatex设为204

7.切换到assets卡片,我们对stackpanel加上相应的behavior控制,选中gotostateaction,拖拽至objects and  timeline中的stackpanel上,如下图:

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

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

二、使用visual studio

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




 
 
<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事件 www.2cto.com
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 http://up.2cto.com/2012/0130/20120130030625213.rar

作者:alexis