Now that you have everything installed, it’s time to start creating your first application . In this section, you will create a simple Silverlight application and explore its anatomy .
Build a Simple Silverlight application
2 . To create a new Silverlight application, select New Project from the File menu .
3 . The New Project dialog box will list the installed templates . A template is a skeleton of
an application . When you select a template for your application, Visual Web Developer creates all the files necessary for that application . The templates are organized accord- ing to language, with versions of each template available for Visual Basic and Visual C# . Open the Visual C# folder . You will see a number of different application types, includ- ing Windows, Web, Cloud Service, and Silverlight .
4 . Select the Silverlight Application template . Enter the name SbSCh1_1 and click OK .
Visual Web Developer will start creating a Silverlight application for you . A Silverlight application runs on the Web, so it needs a Web site in which to run . Visual Web Developer can create that for you also .
5 . The New Silverlight Application dialog box will appear, asking whether you want to host
the application in a new Web site . Make sure you select that check box . Silverlight will then create a Web project with the same name as your Silverlight project but with a postfix of .Web . Leave the other options set to their defaults for now and click OK .
Visual Web Developer will create a new solution, which is how it organizes different projects . Your solution will contain two projects: the Silverlight application and a Web site for hosting the Silverlight application . You can see these in Solution Explorer .
6 . The Silverlight application uses Extensible Application Markup Language (XAML) files
for its user interface . The MainPage.xaml file contains the default UI . Double-click this file to open it in the designer . Along the left edge of the screen, you should see vertical tabs that read Toolbox, CSS Properties, and Manage Styles . Open the Toolbox tab .
7 . Click the pushpin icon in the top right corner to keep the Toolbox pinned open on the
screen . The Tabs will move to the bottom of this window . Click the Common Silverlight Controls section and you’ll see a list of simple Silverlight controls .
8 . Your first application will use two Label controls, a TextBox control, and a Button con-
trol . Start by adding the first Label control by double-clicking Label in the Toolbox . You’ll notice that two things happen .
■
■ First, Silverlight adds a visual representation of the Label to the design surface .
■
■ Second, it adds the markup code for the Label to the XAML .
Note When creating Silverlight applications, Visual Web Developer lets you design visu- ally and design in code, with the tool keeping the two synchronized .
9 . Now you need to edit the Label so that it says something other than “Label” . There are
two ways you can do this . You can use the Properties window to change the value of the Content property . (The Properties window should be at the bottom right of your screen .) Type What is your Name? .
Alternatively, you can edit the XAML . To do this, add an attribute called Content and set its value to What is your Name? . Notice that when you use the Properties window ap- proach, the attribute is automatically added to the XAML .
You’ve just added and configured your first Silverlight control! Now you need to repeat the steps to add the other controls .
Configure more Silverlight controls
1 . Double-click TextBox in the Toolbox to add a TextBox control to the designer . Notice
that the TextBox is added immediately below the Label you already created . You can use your mouse to drag the TextBox so that it’s to the right of the Label .
2 . Repeat the process again to add a Button control . Drag it to the right of the TextBox,
and change its Content property to read Go instead of the Button . Note that despite Button being a different control type, the process for adding and configuring its Content property is identical to editing the Label control .
3 . The last UI element you need to add is another Label . Double-click Label in the Toolbox
to add the new control . You’ll see that it has been added beneath your original Label . Leave it in its position, but use the mouse to drag out the right side of the Label to make it wider . You’ll see a little round dot on the right edge of the Label . If you move your mouse pointer over this, the pointer will change to a left-right arrow . Once you see this, hold down the left mouse button and move the mouse to the right .
4 . Take a close look at your XAML code . Look for the Name property on each of the con-
trols . By default, Visual Web Developer names controls as the control type followed by a number . The first Label control you place on your design will be called label1, the next
label2, and so on . So you’ll find that you have controls called label1, label2, textBox1,
and button1 in your application . In practice, it’s a good idea to give your controls more meaningful names, but for now you can keep the defaults .
5 . Now it’s time to add a little code to make your application do something . Double-click
the Go button and you’ll see that the designer goes away and is replaced by a code window . This is because you are moving into the code-editing mode .
Visual Web Developer creates a stub function called button1_Click . This is where you will write the code that executes whenever a user presses the button .
Add functionality to your button
1 . Within the button1_Click function, start typing the word label2 . After a couple key-
strokes, the IntelliSense menu will pop up .
2 . IntelliSense figures out what the possibilities are based on the installed classes in the
.NET Framework and on the instances of controls in your application . Because the only things you could code against that begin with “Lab” are the Label class (in the .NET Framework) and the label1 and label2 controls within the current application, IntelliSense narrows the choices down to these three items . You can either finish typing
3 . You address properties on a control in the .NET Framework by using dot syntax . So in
code, for example, the Content property of label2 that you edited earlier in the designer becomes label2.Content . As soon as you type a period for the dot, IntelliSense will kick in again, listing the properties you can address . Pick the Content property (or just type it) and you’re ready to go to the next step .
4 . Finish the line of code . It should look like this:
private void button1_Click(object sender, RoutedEventArgs e) {
label2.Content = "Hello World, " + textBox1.Text; }
Whenever a user types text into a TextBox, the entered text gets stored in the Text property . The code you’ve just written says “Change the content of label2 to read ‘Hello World,’ plus whatever the user typed in the TextBox .” This code will run when the user presses the button .
5 . Press F5 to run the application . Your default browser will open and display your new
Silverlight application . Type your name into the text box and click Go . You’ll see that the label2 text will change so it reads “Hello World,” plus your name .
Congratulations! You’ve just created, designed, coded, compiled, deployed, and run your first Silverlight application .