Windows Store 8.1 Animation in 6 Steps

Open Blend ans start a new blank Windows project.

1) Look for the "rectangle" in control box and drop it in the designer.

2) Click on the plus "+" sign in top right corner of "objects and timeline" window and name it anything for eg. "myStory".

3) Now drag the "objects and timeline" till it highlight the whole bottom of Microsoft Blend, then drop it.

4) Now click the "record key frame" button the one with diamond and plus shape. Make sure  that the rectangle is selected.

5) First move the timeline "yellow bar" at 3 seconds, then move the rectangle from left to right.

6) Play your story by clicking the Play button.

Designing Custom Button in Blend

Today i will show you a very simple way to create a custom button in Microsoft Blend 2013.

1) Open Blend for Visual Studio 2013.

2) File -> New Project -> XAML (Store Apps) -> Blank App (Windows Phone)

3) Select the main Grid and Drag drop the Button from Assets -> Controls

4) In Objects and timeline window, right click on button -> Edit template -> create empty

5) A dialog box will open. Name the button as "myButtonStyle" and define in Application level so that it can be used in our whole application.

6) A blank grid will open and now we are in Button template. In objects and timeline select Grid and set its Width = 200 and Height = 70 from Properties Tab under Layout.

7) From Assets tab, under Controls search for Content Presenter and double click on it so it will become child of parent grid.

8) Do the following from Layout Tab:

Width = Reset

Height = Reset

Horizontal Alignment = Stretch

Vertical Alignment = Stretch

9) Create a simple rectangle in Photoshop of size 200 * 70 and save it as .png

10) In Blend, right on project name -> add -> add existing item. Add the picture we just created in Photoshop.

11) Drag and drop the picture in the content presenter and we are all done.

12) If everything goes right, our page will look like this: