首页 > 程序开发 > 移动开发 > Windows Phone >

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

2012-01-30

有些时候我们需要对ListBox中的某项做出一种点击动画,即点击ListBox的某项时,被点的Item播放一个相应的动画。通常,我们需要自定义ListBox的ItemTemplate以做出自定义的ListBoxItem。下面,我讲讲如何利用Expr...

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

相关文章
最新文章
热点推荐