Silverlight getting started instance (image and text instance + Silverlight source code download)

Silverlight getting started instance (image and text instance + Silverlight source code download)

The Silverlight getting started instance is a basic step of Silverlight. It allows you to create basic animations and interact with JavaScript. If you are not familiar with this instance. We use blend2 to create a Silverlight Project (compatible with 1.0) and choose File> new project from the menu. The page shown in 1.0 is displayed. You can select a save path and select "Silverlight 1.0 site ".

Fig 1.1

Click OK to enter the design environment in the blend. If you want to change the layout, go to window> animation workspace settings. Result 1.2 is displayed.

Fig 1.2

Blend creates five files with the Silverlight template:
Default.html page file, which is executed by the browser and starts from the browser.
Default_html.js javascriptscript file, which is referenced by default.html.
The page. XAML Silverlight file displays animations and effects, which are compiled and executed by the Silverlight plug-in.
The page. XAML. js javascriptscript file, referenced by default.html, is used to process events in page. XAML.
The Silverlight. js javascriptscript file, which is referenced by default.html, generates the Silverlight plug-in.

Fig 1.3

Now the blend environment is clearly explained for you. If you are still not clear about it, you can open the blend software to check it out! The following shows the development process:
The first step is to set the canvas size. The white block in the drawing area is the canvas. Click Select, and then click "properties" in the screen switch to properties, as shown in Figure 1.2. Click layout to expand the layout panel, set the width to 800, and set the height to 260 (you can also adjust it by clicking the mouse in the drawing area ). Open the brushes (paint brush) panel and click "gradient Paint (gradient Paint Brush)", and set the gradient color in Figure 1.4.

 

Fig 1.4

Now that the canvas has been set up, we need to move the text in the next step. Draw a textblock control in the canvas. If you do not have any widgets, you can click at the bottom of the toolbox to add more widgets to the resource library. Enter textblock in the search. Click the textblock item in it. 1.5:

Fig 1.5

Drag a textblock control in the canvas and enter welcome to wpfhome. com. Then in the Color panel, select solid color brush (single color), and then select red in the panel (I believe I don't need to let it happen again ). The following is an animation. Create a storyboard in the objects and Timeline panel. A window appears. In Name (key), enter the storyboard name "loadstoryboard" and click OK. Timeline (timeline) appears below ).

Fig 1.6

Apply a yellow time needle to the position of 1.3 seconds. The textblock control in the drawing panel moves x = 208, y = 135, and rotate-359.686 degrees. You can also use Properties> transform> translate) the X and Y values under the Panel, and the properties (properties)-> transform (Transform)-> rotate (rotate) board directly enter a value, the color panel is set to black. Now, after completing the first step of the animation, move the color change time to 2.3 seconds and set the font color to # ff00ff11. Set the size of the text panel to 13. 1.7

Fig 1.7

The loadstoryboard animation has been created here. Now you can move the time needle to see the animation effect.
Next we will implement a button effect. The twisting event is controlled by JavaScript, And the animation part is no longer repeated here. Create a new rectangle (rectangle) on the form, and adjust the gradient in the attribute panel. Then name it btn_bg. Create an animation in the storyboard. The animation name is "btn_move_animation". Now we want to change the color of the animation when the mouse passes. We set the second color block in the gradient brush of the rectangle to light green (moderate adjustment ). Then we create a new "btn_out_animation". Now we want to achieve the animation effect when the mouse leaves, and change the color back. Move the time needle to 1 second, and then change the second Color Block of the gradient of the rectangle back to the first red.