WPF and Expression Blend development example: Make full use of Blend to achieve a searchlight effect, wpfblend

WPF and Expression Blend development example: Make full use of Blend to achieve a searchlight effect, wpfblend

The basis of this article is that readers have some knowledge about WPF and relevant coding experience, and have basic knowledge about Blend interface layout. in this article, the corresponding operations in the Blend are demonstrated, and each attribute is not described in detail. at the same time, the Blend version used in this article is 5.0.40218.0, that is, the corresponding version of VS2012. For the operation differences of other versions, Please study it on your own. OK. Now, the final effect of this article is as follows:

Well, let's start the step-by-step introduction process. In addition to the background code of the last button to be designed, we use graphical operations for other operations.

 

1. Create a project

Open Blend and create a new WPF application named WPF_SearchLight. The process is as follows:

 

 

2. Click the MainWindow automatically generated by the project to adjust the attributes:

WindowStyle is set to None;

Set Background to pure black;

Height: 200;

Width is set to 600;

Set WindowsStartupLocation to CenterScreen.

The final result is as follows:
Used to exit the program, place it on the right side of the TextBlock, and add processing events to the background code.

5. next we need to design a circle and a rectangle. draw A rectangle to cover the TextBlock. The length of the rectangle must be more than twice that of the TextBlock, and the Background must be set to pure black, and the value of A is set to 80%. for example:

Next, draw a circle. The diameter of the circle is equal to the height of TextBlock. effect:

In the object and timeline window, select (hold down Shift), right-click, select merge> subtract, and a Path is generated. (in this case, you must first press the rectangle and then press the circle, that is, the rectangle-circle)

6. design the animation. Click Path in the object and timeline, and then click "+" to create an animation named "SearchLight:

 

At this time, the time panel will appear ,:

Click the button on the left of the time to record the Path position;

Drag the timeline to six places, move the Path horizontally to the exit button, and click the button on the left of the time to record the Path position;

Drag the timeline to seven places without moving the Path. click the button on the left of the time to record the Path position.

After setting the animation, you can click the play button to view the effect.

7. There are other operations. Select SearchLight and set the animation attributes. For example, select AutoReverse and select Forever as RepeatBehavior ,:

In the trigger window, you can select the time to trigger the animation ,:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

The final effect is the same as that shown in the beginning.

Source code download:

Http://files.cnblogs.com/youngytj/WPF_SearchLight.rar