Windows Phone 實用開發技巧(26):對DataTemplate中的元素播放動畫

來源:互聯網
上載者:User

有些時候我們需要對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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.