Simple circularloader Creation

At the beginning of the year, I wrote an article on how to use blend to make simple loading animations. Microsoft provided the blend Suite, which is indeed very convenient.ProgramStaff handles some simple art design issues, this articleArticleBrief Description

How to Use blend to create a circular loader is a simple step without profound programming knowledge. As long as you are familiar with blend, you can simply process it according to the following process.

First, let's take a look at what we made:

Are you familiar with Silverlight? Next, we will explain the production process in detail.

1. Create a usercontrol named usercontrol. In order to adapt to the browser, replace the root element grid with viewbox.

2. Add an ellipse to the stage and convert it to pathlistbox

3. Add 8 ellipse in pathlistbox. The XAML code is as follows:

    ellipse   X: Name   =" ellipse1 "  Fill  =" {binding foreground, elementname = usercontrol}"   opacity  =" 0.3"   height   =" 20 "  width   =" 20 " />  

4. Set the attributes of pathlistbox. If you are not familiar with pathlistbox, we recommend that you read the relevant information first.

5. Add a storyboard named loadanimation. As a simple introduction, modify the visible attribute of the eight ellipse in the pathlistbox and change the repeatbehavior of loadanimation to forever.

6. After the animation is completed, add a controlstoryboardaction to usercontrol.

In this way, you can see the effect after running. However, when you click pathlistbox, you will find that its visual status is not so good.

7. Go to its template 8. Set the selected status.

<! -- <Doubleanimation duration = "0" to = "0" storyboard. targetproperty = "opacity" storyboard. targetname = "fillcolor2"/>->
 

In this way, this circular loader is ready and easy to use. Put it in mainpage to see the effect:

<My: pathlistbox Horizontalalignment= "Center" Verticalalignment= "Center" X: Name= "Pathlistbox1" Foreground= "Blueviolet" />
 

Because it is not about the basic application of blend, the details in many parts of the article are taken over. The beginning of the article has already stated that you need to have a certain degree of familiarity with blend, although it is just a circular loader, it also uses grid, viewbox layout, and basic animation in Silverlight.

Concept, the animation effect in the example is not so smooth, and can be modified and adjusted according to your own requirements. In the source code, there is also a canvas layout, which is simpler to do, for more information, see.

 

 

: Circularloader.rar