Practical development tips for Windows Phone (26): Play an animation on elements in the datatemplate

Sometimes we need to make a click animation for an item in ListBox, that is, when a item in ListBox is clicked, a corresponding animation is played by the clicked item. Generally, we need to customize the itemtemplate of ListBox to make a custom listboxitem. Next, I will explain how to use expression blend and Visual Studio to achieve this effect.

1. Use expression Blend

1. Create a Windows Phone databound Application

2. Remove the event in mainlistbox_selectionchanged.CodeIt is used to select an item in ListBox and enter the detail page of the item. We do not need to, so comment out it for the moment, for example:

3. Edit the mainlistbox Template

4. Select the States card and create a new state group

5. Name it selected. At this time, we noticed a red box on the periphery of the page, indicating that we are recording the corresponding state.

6. Select the first textblock in objects and timeline and set translatex to 204 in its attribute panel.

7. Switch to the assets card. Add the corresponding behavior control to the stackpanel, select gotostateaction, and drag it to the stackpanel in objects and timeline, for example:

8. RunProgramClick an item, and the first line of text will be moved to the right.

Note: The above method uses state to implement the corresponding animation. The following uses Visual Studio encoding to truly implement the playback animation.

Ii. Use Visual Studio

Run. After you click an item in ListBox, the image will rotate for 180 degrees.

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

Below is the button click event

Private voidBtn_click (ObjectSender,RoutedeventargsE ){VaRBTN = senderAsButton;If(BTN! =Null){VaRSB = BTN. Resources ["Sb_turnright"]AsStoryboard;If(SB! =Null) {Sb. Begin ();}}}
 

Note: The Visual Studio method is actually to store the storyboard in the template's resouce, and then get and play it in the code, with more flexibility.

 

Expression blend source code

Visual Studio Souce code