Join Walt Ritscher for an in-depth discussion in this video Using Visual Studio 2010 to create a Silverlight project, part of Silverlight 5 Essential Training.
- View Offline
If you're .NET developer, you're probably familiar with Visual Studio. It excels as a developer tool for many types of projects. In this movie, I like to show you how to create a Silverlight application with Visual Studio. To start Visual Studio on my computer, I'm going to go to the Start menu and type in Visual and then I'm going to click on the Microsoft Visual Studio 2010 link. To create a brand new Silverlight project, I can click on this New Project link or I can go to the File menu and choose New>Project.
Next, I have to choose the language that I'd like to write my code in, Visual C#, and then I move down to the Silverlight node and choose the Silverlight Application. Let's pick a good name for the application, Demo1. Notice that it goes in the default location which on my computer is the Visual Studio folder and then the Projects folder. Next, I need to provide some information about the Silverlight application. I'm going to uncheck the Host the Silverlight Application checkbox and talk about the options available for the Silverlight version.
In this dropdown, I can choose from Silverlight 3, 4 or 5. I'm going to choose Silverlight 5 because it's the newest and then click OK. This creates a standalone Silverlight application. If you look over the Solution explorer, you'll see that I have a Demo1 project and below that I have the Main user interface from my Silverlight application called MainPage.xaml. This is what the user will see when my application runs, and to make it noticeable, I'm going to go over to my XAML editor, over on this side of the screen, and change the Background property on my Grid to Orange and then I'm going to run the application.
To run the application, I can choose F5 or Ctrl+F5. Today I'm going to choose Ctrl+F5. Visual Studio starts the default browser which in my case is the Chrome browser and it loads the test page which, in my case, is called Demo1TestPage.html. Let's edit the file. I'm going to close the browser, return back to Visual Studio, click on my MainPage.xaml editor and then scroll down to the Grid again, and this time I'm going to change the Width and Height values.
Then press Ctrl+F5 to run the application the second time. As you can see, I now have a smaller rectangle. If I right-click in the browser window, you'll see the Silverlight context menu pop up. That shows that this is not HTML but this is a Silverlight plug-in. Now in the real world, you're going to host your Silverlight application inside a website. So that is why Microsoft provides the ability to create a companion website. Let me show you how to that. Back to Visual Studio, let's create a brand new project File>New>Project.
Answer the same questions as the last time, C#, Silverlight, the Silverlight Application. I'll call this one Demo2. Now in this screen, I'm going to make some changes. I'm going to leave the checkmark checked for the Host the Silverlight Application in a new Web site and then I'm going to have it create a companion website down here, I'm going to call this one CompanionSite. This will be an ASP.NET application. There are three different kinds of ASP.NET applications I can create.
They're listed here. The one I'm going to use is Web App. There's also the possibility of doing a Web Site or the New MVC Web Project. If you want to learn more about ASP. NET development, check out the ASP.NET Essential Training here in the Lynda.com Online Training Library. Back to my project, I'm going to click on the OK button and Visual Studio will create two separate projects. You can see them over here in the Solution Explorer. One is called CompanionSite, that's my ASP.NET site, and the second one is called Demo2, that is my Silverlight Application.
Notice that the Silverlight application looks exactly the same, there's a white area over here, that's my main UI. The difference is, when I run the application, it's going to run the application that's in bold. So if I press Ctrl+F5 to run the application, this time it'll launch the ASP.NET Web Site, load my test page. I still see the Silverlight plug-in but now it's being hosted in a traditional ASP.NET site. I have other movies in this chapter describing the details on the companion site.
For now let's just drill in and look at this Demo2TestPage.html page. Double-click here, which loads the HTML editor, and if you scroll down near the bottom of this page, you'll see a section that contains a form tag, standard HTML, a standard div tag, and then here is the Silverlight plug-in. This object tag here contains the code that tells the browser to load the Silverlight runtime engine.
As you can see, there is a lot of HTML here. Don't worry, I'll show you how it works in another movie. Next, we'll use Expression Blend to create a Silverlight project.
- Installing the toolkit and setting up the development environment
- Using Expression Blend vs. Visual Studio 2010
- Creating a Silverlight page
- Compiling an application
- Exploring the relationship between XAML and .NET
- Using C#
- Working with XAML
- Digging into the Dependency Property System
- Deploying and debugging code
- Creating sophisticated layouts with panel elements
- Managing Visual State with Visual State Manager
- Transforming the user interface (UI) with templates
- Understanding the event model
- Working with text
- Using business data in a binding
- Creating an out-of-browser (OOB) application
- Exploring trust levels
- Playing audio and video
- Handling errors
- Exploring animations
- Working with application windows
- Integration with XNA