Create A Customized Loader Using Blend For Visual Studio 2015

In this article we will learn how to design a loader which will be like the following:



We'll be using Blend for Visual Studio 2015 to build this animation.

1. Create a new Blank App (Universal Windows) Project and name it "Loader" or whatever you want.
   
   Before we actually start building the animation, I want you to go ahead and select a desktop screen from the top-left corner of the designer view, because we will be working and testing this animation on a desktop.
   
   
   
   
2. Now, we're all set. From the toolbar on the left side of the designer view, click and hold the rectangle icon and select ellipse form the pop-up.
   
   
   
   Draw a circle by holding down the shift key and color it black from the properties window.
   
   
   
   
3. Now draw another circle, color it white and place it on the top of our black circle like below:
   
   
   
   We want our inner circle to rotate around the center of our outer circle. This is really simple to achieve, as we know all shapes rotate around their center dot, and by moving that dot we can shift their center of rotation.
   
   
4. Select the black circle, hold down Ctrl key and select the white circle. Now move the center dot of the white circle exactly on top of the center dot of the black circle.
   
   
   
   
   
   And we are done mingling with the ellipses for now.
   
   
5. Go to the Objects and Timeline (View, then Objects and Timeline) window, click on "+" sign to create a storyboard as shown below.
   
   
   
   After creating a storyboard, you'll notice quite a bit of change in the interface.
   
   
   
   a. Indicates the name of the open storyboard, if you have created a bunch of storyboards, you can switch between them from the drop down.
   
   b. The plus sign next to a diamond shape allows you to record a keyframe. In blend, keyframes are marker on timeline which indicates when a property change will occur.
   
   
6. Click on the record keyframe button and drag the playhead (the yellow line) to the point in time where the animation should finish, in our case 1 sec.
   
   
   
   
7. After that, select your inner white circle and rotate it as shown below.
   
   
   
   To check what we have recorded so far, go to the objects and timeline window and click on the green play button, above the playhead position timer.
   
   
8. Now go to Assets, then Behaviors and click on the "Install 'Behaviors' NuGet Package".
   
   
   
   
9. After the installation, drag and drop the 'ControlStoryBoardAction' from behaviors window, on the Page in objects and timeline window.
   
   
   
   
10. Click on the name of your storyboard, from the top left corner of the Objects and timeline window and from the properties window set the repeat behavior to forever.
    
    
11. Finally select ControlStoryBoardAction and from properties window assign its storyboard property the name of your storyboard.
    
    
    
    In the gif above, the motion does not appear to be smooth but believe me it will be when you run the animation on your local machine.

Read more articles on Visual Studio:

• Write Code Refactoring Extensions In Visual Studio 2015
• Top 5 Features Of Visual Studio 2015 IDE