For the purpose of the examples in this book, it does not matter if you use a web site or a web application project; however, web application projects are better for eventual deployment since they contain a project file suitable for MSBuild.

Click OK, and the Solution Explorer will show two projects: the Silverlight application (SilverlightApplication1) and the web site supporting it (SilverlightApplication1_Web). If you now build the application, the Silverlight application is built to a XAP file that is automatically copied to the ClientBin folder within the web site. This XAP file contains the Silverlight application and will be downloaded by the client when it visits the web site.

If you now start the development server in Visual Studio (by pressing F5 or Ctrl+F5), you will see the Silverlight application start. If, however, you create a new web site in IIS, point the document root to SilverlightApplication1_Web, and navigate to this site, you will get a 404 error when trying to load the Silverlight application in your browser. What's going on? IIS must know about the new file extension .xap. You accomplish this by adding a new MIME type to either the root of IIS or to the specific web site you created. The file extension is .xap and the MIME type is application/x-silverlight-app.

Now let's take a look at Expression Blend, a tool used to lay out user interface controls and create animations in WPF and Silverlight. Without closing Visual Studio, start Blend, go to File>>Open>>Project/Solution, and navigate to the solution file created in Visual Studio (in C:\book\examples\SilverlightApplication1 if you used the same directory structure).

The top-right portion of Blend is devoted to managing the project files (like the Solution Explorer in Visual Studio); properties for various user interface elements; and resources, which include style templates, and animation storyboards, stored in XAML. Double-click Page.xaml to open this XAML page in the designer (see Figure 1-3).

Figure 1-3. The Project Property pane in Expression Blend

Along the left side of the Blend screen is the toolbox. This provides access to both layout and input controls, and several tools used to modify the user interface, such as a paint bucket and a transform tool for brushes. Hold down the left mouse button when selecting any icon with a white triangle in the lower-right-hand corner and more tools will expand from it.

Figure 1-4 shows an example when clicking the Button icon (which looks like a mouse cursor hovering over a rounded rectangle).

Figure 1-4. The control toolbox in Expression Blend

The Objects and Timeline area to the immediate right of the toolbox provides a place to create and manage animation storyboards, but more importantly for us right now, it shows the object hierarchy in XAML. After creating our application, we see [UserControl] and LayoutRoot. Click [UserControl] to highlight it and then click Properties in the top-right portion of the screen. The control with the gray highlight is the control that shows up in the Properties pane (see Figure 1-5).