Now that you know what Silverlight is and what Blend is I think it is time that we create your first Silverlight application and I show you what we can do. In this example I am going to go over only what to do, not why or how we are doing it. We will go over the why's and how's in later Refcardz; this example is merely meant to show you that you can easily and quickly do some very cool things with Blend in Silverlight. With that, open Blend and let's get started.
- 1) In Blend's menu click File>New Project
- 2) In the New Project dialog box select Silverlight as the Project Type, Silverlight 3 Application for the Template, name the project MyFirstSLApp, select Visual C# for the language and click OK like I am doing in Figure 1-1.
Figure 1-1: Create a new Silverlight project named MyFristSLApp.
Figure 1-2: The TextBlock tool.
- 3) Next double-click the TextBlock tool in the toolbar(shown in Figure 1-2).
- 4) This will put a TextBlock in the upper left corner of your artboard with the text selected (see Figure 1-3).
Figure 1-3: A default TextBlock.
- 5) Next start typing “Hello World”. Because your TextBlock is already highlighted this will now become the Text of your TextBlock.
- 6) Next go to the Properties panel and find the Text bucket and change the font to 20pt like I am doing in Figure 1-4.
Figure 1-4: Change the front to 20.
- 7) Now click the V key to get your Selection tool (the first tool on the top of the toolbar). Click and drag your TextBlock to the center of the artboard like I have done in Figure 1-5.
Figure 1-5: Drag your TextBlock to the center of the artboard.
- 8) Now right-click the TextBlock and left-click Path>Convert to Path like I am doing in Figure 1-6.
Figure 1-6: Convert the TextBlock to a Path.
- 9) Now right-click the TextBlock in the Objects and Timeline panel and right-click Path>Release Compound Path like I am doing in Figure 1-7
Figure 1-7: Release the Compound Path.
Now you will notice that each of your letters is now its very own Path. Now we can manipulate each individual letter of “Hello World”. Let's do that now.
- 1) Click V to select the Selection tool and click a draw a line around all of the letters to select them all like I am doing in Figure 1-8.
Figure 1-8: Select all letters.
- 2) Now with all of the letters selected click and drag them off the right of the artboard like I have done in Figure 1-9.
Figure 1-9: Move the letters off to the right of the artboard.
Now we can make a Storyboard that will make the letters fly into the screen.
- 3) First click F6 to go into Blend's Animation mode.
- 4) Click the New Storyboard button like I am doing in Figure 1-10.
Figure 1-10: Click the New Storyboard button.
- 5) When the Create Storyboard Resource dialog box appears name the Storyboard SlideInLetters and click OK like I am doing in Figure 1-11.
Figure 1-11: Name the new Storyboard SlideInLetters.
- 6) Notice how the artboard has a red line around it and a Timeline appears next to the Objects and Timeline panel to indicate you are recording.
- 7) Move your playhead out to one second like I have done in Figure 1-12.
Figure 1-12: Move your playhead out to one second.
- 8) Now select the last letter and move it out to the artboard like I am doing in Figure 1-13.
Figure 1-13: Move the last letter “d” to the artboard.
- 9) Now move your playhead out to 2 seconds and move the next letter, “r” onto the artboard next to the last letter, “d” like I am doing in Figure 1-14.
Figure 1-14: With the playhead at 2 seconds move in your second to last letter.
- 10) Keep repeating this for every letter, that is move the playhead out one more second and move the next letter onto the artboard.
When you have completed your Timeline should look like what I have in Figure 1-15.
Figure 1-15: Your Storyboard Timeline should look like this.
Now that we have created the Storyboard you can close it by clicking the Close Storyboard button like I am doing in Figure 1-16. Then Click F6 to exit the animation mode.
Figure 1-16: Close the Storyboard.
Now all we need to do it to trigger the Storyboards to start when the application loads. To do this we are going to use a Behavior.
- 1) Click the Asset Library, then click the Behaviors tab, and find the ControlStoryboardAction Behavior like I am doing in Figure 1-17.
Figure 1-17: Find the ControlStoryboardAction Behavior.
- 2) Click and drag that behavior and drop it onto the [UserControl] in the Objects and Timeline panel like I am doing in Figure 1-18.
Figure 1-18: Drag the Behavior onto the [UserControl] in the Objects and Timeline panel.
- 3) In the Properties panel find the Tigger bucket and change the EventName property to Loaded like I am doing in Figure 1-19.
Figure 1-19: Change the EventName to Loaded.
- 4) Next located the Common Properties bucket and change the Storyboard property dropdown to the name of our Storyboard, “SlideInLetters” like I am doing in Figure 1-20.
Figure 1-20: Change the Storyboard property to the Storyboard we created earlier.
Now hit F4 to run the application and you will see a browser open and run our SlideInLetters Storyboard. See Figure 1-21.
Figure 1-21: Our Silverlight application running in a browser.
You can see my application here: