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

来源:未知 责任编辑:责任编辑 发表时间:2013-08-27 16:00 点击:

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

本文出自 “Alexis的51博客” 博客,请务必保留此出处http://alexis.blog.51cto.com/2621421/706531

    发表评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    用户名: 验证码:点击我更换图片
    最新评论 更多>>

    推荐热点

    • Windows Phone 项目实战之我的微盘(下)
    • Windows Phone 实用开发技巧(26):对DataTemplate中的元素播放
    • Windows Phone 实用开发技巧(25):Windows Phone读取本地数据
    • Windows Phone 实用开发技巧(27):创建透明Tile
    • Windows Phone 知识锦(12月版)
    • Windows Phone实用开发技巧(31):密码加密
    • Windows Phone 项目实战之我的微盘(上)
    • WP7实例篇之土豆搜索器(2)
    • [翻译]WP7 QuickStart-第七篇-布局
    网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
    Copyright © 2008-2015 计算机技术学习交流网. 版权所有

    豫ICP备11007008号-1