Join Walt Ritscher for an in-depth discussion in this video Using Visual Studio to create a Silverlight project, part of Silverlight 3 Essential Training.
If you're a .NET Developer, you're probably familiar with Visual Studio. It excels as a developer IDE for many types of projects. Remember, however, that Visual Studio 2008 does not understand Silverlight projects unless you have installed the Silverlight 3 tools for Visual Studio 2008 SP1. This is due to the offset and shipping schedules, because Silverlight 3 shipped a year after the release of Visual Studio 2008. In this movie, I'd like to show you how to create a Silverlight application or two. To demo this, I'm going to launch Visual Studio 2008 and I'm going to go up to the File menu and choose New>Project.
There are two languages prevalent in Visual Studio: Visual Basic, and Visual C#. For this series, I'm using Visual C#. So, I'm going to come down to Visual C# and then I'm going to look to see if there are some Silverlight apps. There is a Filter button available, where I can come down here and click the Silverlight node in the tree to shrink this down to only the templates that have Silverlight. And I'm going to start by creating a Silverlight application. If you are following along, you can pick any location you want. By default, Visual Studio starts in Documents folder and then under a folder called Visual Studio 2008\Projects.
I'm going to leave it there, and then I'm going to choose a nice new name for my SilverApp and then click OK. The next thing that Visual Studio is going to do is ask me if I want to create a companion site. For this first demo, I don't want to create the companion site. So, I'm going to uncheck the checkbox and click OK. And here's our first screen. Over on the right side of the screen is the Solution Explorer and it shows all of the files who were are added by this template. There is my project name.
Here are two files. There is an App.xaml file and a MainPage.xaml file. And inside the MainPage.xaml is this Grid, which is going to be used to contain all our elements if we want to show to the end-user. Right now, the only thing I'm going to do is change the background color of the Grid. I'm doing this by typing in the IDE and Visual Studio has an IntelliSense engine, which prompts me for names like Background and the colors that I want to choose. Okay, I'm done. I can save this. Next thing I want to do is run it to demonstrate how it works.
We'll go up and choose Build, which will compile my application, and then secondly, I'm going to go choose Debug, Start Debugging. Now what I've just done is I've launched the Browser. In this case, it's my default Browser that is IE 8. It's loaded our test page in. It's colored the entire surface area of the Browser with the Silverlight application. If I right-click anywhere inside the Browser, you can see that it's Silverlight. I don't get the HTML menu you usually do, and lastly, it has attached the debugger in Visual Studio to this, so I can put breakpoints in my code and walk through the code if necessary.
There's another movie in this series detailing more about debugging. Okay, I think I've seen enough. We'll close down the Browser, which will also detach the Debugger and return me back to Visual Studio. Another way of creating a project is to go to File>New>Project. I'll call this one Silevrapp2. I click OK. This time, I am going to allow Visual Studio to create this Host the Silverlight application and a new website. I have two possibilities here for the type of project that I'll create.
I can have it create a web application or an ASP.NET website. I don't want to go into the differences right now between the two. Those are almost identical. For this one, I'm going to choose website, and then I get to pick a name if I want, but I'm going to leave it at the default and then I'm going to click OK. What do you think? Does it look any different? I have a XAML page here. But if I look in my Solution Explorer on the right edge of Visual Studio, it seems like there is a lot more items over here. If you look closely, you can see that Silverapp2 is down here, and there is my App.xaml, there is my MainPage, but up here is a brand-new website that contains regular ASP.NET items, like here's an ASPX page, here's an HTML page, here's a default page.
If you're already an ASP.NET Developer, this should be very familiar to you. When I go up and I choose Debug start this time - by the way you don't have to do Build first. If you choose Debug start, it'll automatically run the Compiler first and then launch the Debugger. So, you could save yourself a step by going up here, Debug > Start Debugging. Visual Studio has to decide which of these two projects to run. It can only attach a Debugger to one process at a time. It determines that by looking at what you called your startup project. Since Silverlight2.Web is in bold, that tells me that that's the startup project, but you can change that by right- clicking, and say Set as Startup Project.
Now you see Silverapp2 is in bold. If I run this application by pressing F5, another way to launch the Debugger, you'll see that I get the page. It's kind of hard to tell because it's white, but it's the Silverlight page. You see that it's loading the TestPage.html. But if I come back to Visual Studio and make this my startup project and run, by pressing F5, a couple of different things happen.
First of all, ASP.NET is not set up for debugging automatically. There has to be a change in the configuration file, and Visual Studio is prompting me and asking me if I want to go ahead and do that. Is it okay to modify the Web.config to enable debugging? Yes. And then another thing that's different is now it says a local host up here, which means it's running off my local web development server, whereas before it was just running up the hard drive and it's now learning that TestPage.aspx and if I right-click, you see it says Silverlight in here. What you have just seen is a lot closer to the real world.
Most of the time when you create a Silverlight application, you're going to put your Silverlight item on a webpage, because that's how your users are going to find your application. There are other movies in this series that are go into a lot more details on how you add the Silverlight control to a page - what's actually in here. We'll take a very brief look, but on this HTML page, I just double-clicked on it, in Solution Explorer. There is a lot of stuff going on here, which will make more sense when you look at some of the other movies in the series. Down here, of course, it's where it's actually adding the Silverlight application to the webpage.
That's about all I have for this movie, but I hope you saw was that it's very easy to create Silverlight applications using the Visual Studio IDE.
- Hosting Silverlight
- Choosing a Silverlight programming language
- Understanding XAML basics
- Interacting with the user through events, dialogs, and controls
- Adding animations to the interface
- Managing application assets in Expression Blend
- Compiling and deploying a Silverlight application
- Customizing UI with Silverlight templates