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編碼的形式真正實現播放動畫。

2、使用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事件

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