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事件

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