Windows Phone 实用开发技巧（26）：对DataTemplate中的元素播放动画

有些时候我们需要对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