I am always impressed by Scott Guthrie when he presents. He sits down at a laptop, fires up Visual Studio and begins with "File/New Project". Well, that's where we're starting today. Next time, the assumption will be that you know how to do this, but not today.
With Visual Studio on the screen, upper left (normally anyway), you'll find the File menu. Inside there is New Project. That's what we want. You'll get something similar to this next image when you do that. Different versions of Visual Studio/OS/and stuff installed will make your mileage vary, but you should be at least able to find the items listed:
Scroll down "Project Types", find Silverlight, and select it. That should change the available Templates on the right side. From the available selections, you should be able to find "Silverlight Application"... select that one.
In the box below marked "Name", give your application a name you want to live with.
I accept the defaults for Solution Name and I allow it to create a directory, so "OK" is the next thing I do.
This will bring up the following "Add Silverlight Application" dialog:
I'm taking the defaults on this form. This will build us two projects: a Web project to host our Silverlight and a Silverlight project. Just for fun do that as well by pressing "OK".
It may take a little time for Visual Studio to get everything out of it's system that it's going to be doing, but eventually it will settle down with a blank Page.xaml ready for you. If you open Solution Explorer you'll see the following:
And here it is obvious that there are two projects. The default start page is, in this case, YouHadMeFromWPFE_002TestPage.aspx. Just because I hate to spend a lot of time working on something that had a fundamental flaw from the beginning, I generally will hit Ctrl-F5 at this point to let it compile and run. There's only white space to see, but if it does so without throwing an error, you're good.
I mentioned Page.xaml above, so let's look at that now. The Page.xaml that VS2008 built for me looks like this:
<Grid x:Name="LayoutRoot" Background="White">
There's a couple namespaces defined, a default width and height, and then the layout of the controls.
If you're new to Silverlight, you're going to be wondering about that Grid, and if you've programmed in Silverlight 1, you're probably wondering about the whole UserControl thing.
In Silverlight you can consider the UserControl as a basic building block. Visual Studio obviously defaults to a UserControl as the outer container for our objects, and once you have your masterpiece constructed, you can use it as a "UserControl" inside another ... and we'll do that later.
You could change that UserControl to something else if you like, but for now let's avoid that. I've gotten myself into some ugly situations trying that kind of stuff.
Now the Grid... the grid is very cool, think of it like a Table in HTML, only much simpler to deal with... but only after you've had a chance to study it a bit! To make life a little simpler right now, Let's take out that Grid code, and replace it with one of the following.
<TextBlock Text="Hello Silverlight"/>
The mainstay of Silverlight 1 was the Canvas, and it's still available, although used less and less. If you have familiarity with placing objects on a canvas from Silverlight 1 or 1.1, a Canvas might be the way to format up a quick simple page as we're doing here. I would expect you to move fairly quickly to one of the other layout controls, but just to get your feet wet, hey, nobody's gonna know!
Inside the canvas, and with no placement settings, I've inserted a TextBlock with the obligatory "Hello Silverlight" text in the default font and size.
If you run this, it will display "Hello Silverlight" in black against your default browser background color (mine is gray), and the text will be slammed up into the upper left-hand corner of your browser.
<TextBlock Text="Hello Silverlight"/>
I'll talk more about the Border control later, but I like to use it in a situation like this. If you envision corraling some controls together and putting a rectangle around it, that's sort of the effect you can get. The difference is that with the rectangle concept, one of the individual controls could expand with content at some point, and blow out through the end of the rectangle. You could deal with that programmatically, but it would be a hassle. The Border does that all for you. Rounded corners, thickness, containment... in general, Silverlight and XAML goodness :)
If you run this sample, it will look identical to the last one because we're not setting any properties on the border (by design).
<TextBlock Text="Hello Silverlight"/>
The StackPanel has much more going for it than how we're using it here, but it certainly serves our purpose. A stack panel can be horizontal or vertical, and has lots of other properties associated with it that we'll talk about later as well.
The default case we're using is just as a container for our TextBlock and once more, running this will give you identical results to the last 2.
Where's my Compiled Code?
If you took the defaults all along the way during the New Project setup, you should be able to find something similar to My Documents\VS2008\Projects\[project name]\bin\debug:
There are a couple weird files in there that you might not be expecting. One is the xap file, pronounced 'zap'. This is really a zip file in disguise. Check it out by making a copy, renaming it to be [filename].zip, and open it up. Here's what mine looks like:
You may be expecting the project dll file to be in the xap file, but what's up with that xaml file? That's the same file that is in the debug folder shown above. I opened it up and it looks like this:
<AssemblyPart x:Name="YouHadMeFromWPFE_002" Source="YouHadMeFromWPFE_002.dll" />
You can easily read this. The assembly name is YouHadMeFromWPFE_002, it is Silverlight 2.0.31005.0, and the assembly is contained inside YouHadMeFromWPFE_002.dll.
I'm sure we can find much more information about the manifest file, but since VisualStudio is building it for me, I'm not going to worry about it until such time that I have some need to do something special with it.
Executing/Deploying your binary
From your bin/debug folder, you can simply double-click TestPage.html and the latest version of you app will run in a new browser window.
Deploying to a web server is as simple as copying the html and xap file to a location on your server, and executing it by calling out the fully-qualified URL. I just did exactly that by copying the two files to a legacy website that has only html on it, and it ran just fine!
If you have a problem at that point, you need to check the mime types on your hosting service to make sure it can deal with xap files. I lucked out because DiscountAsp.Net is always on top of everything, and right away they were good to go with this!
If you look inside the TestPage.html, you can see how the xap file is called out, and you can use that piece of html to place your xap file inside another web page to provide a bit of active Silverlight on an otherwise normal html or aspx page.
As an example of this, the diagram at the very top of Silverlight Rectangles, Paths, and Line Comparison
is a piece of Silverlight 2 inserted to demonstrate a concept.
Unless I change my mind, I believe next I'm going to start filling out our knowledge of the main container objects in the standard controls. That way we have them in our knowledge-base and using them won't be a big hassle.
Until then, experiment, play with the code, break it/fix it ... let me know what you think!Stay in the Light!