Duration: 21 minutes
Summary: In this video, we continue our original discussion that we started on Silverlight. However, we are using the latest version (Silverlight 5). We start this video by looking at how to download Silverlight 5 Toolkit and runtime. We also discussed the option of downloading Visual Web Developer 2010 Express (this is a free version in case you do not have Visual Studio 2010). Our getting started discussion revolves around creating 2 different types of projects and examining their content. We saw how we have 2 different projects: One is the actual Silverlight project, and the other is the host, which is a web project. We looked at every part of the projects and how they work together to get the display in the browser. We also examined the design surface and how we can change the properties and the XAML. In the next videos, we will discuss all the controls in the toolbox (among other things).
Methodology of the development of example: Good coding standard and simplified design to illustrate the key points.
Technology Used: Silverlight 5 and Visual Studio 2010
Keyword: Silverlight 5, Visual Studio 2010, Grid, Button, RadialGradientBrush, GradientStop, ClientBin, XAML, object.
Welcome back everyone. This is Ayad Boudiab. I am a senior .NET Application Developer and we are continuing our series on Silverlight. As you have seen, if you follow us on Mr. Bool website, you will notice that we have been discussing Silverlight for quite a while. We started with Silverlight 2, with a little bit of Silverlight 3, even some of Silverlight 4, but the version is changing very quickly. It's hard to just explain everything in one version. That's why you see me getting the latest version and discussing all the features.
Pretty much what we're going to do in this series is: getting Silverlight 5, that's the latest one that we have. We are going to discuss as many features as possible and we are not losing anything because we are discussing, also, everything that existed in 3,4,5, everything is backwards compatible. When I talk about a button, it doesn't mean it's the only thing that existed in Version 5, it's been all along with us.
We can discuss all the features up to Silverlight 5. The other thing is, well, how do we get Silverlight? For those of you who just getting started with us, you can go to the silverlight.net website, as you see on the screen right now, and you can go to downloads. On the download page, you will have the different options for downloading Silverlight.
For example, my discussion would be Silverlight using Visual Studio. I need to get the Silverlight 5 toolkit, I want to get the Silverlight 5 tools for Visual Studio 2010 SP1 and in this case and here, I need to get the runtime for the 32-bit or the 64-bit, depending on which Windows version you are running.
If I am running, say for example, Windows 7, I'll get the 64-bit version and also, you can always get the Web Platform Installer, which will guide you through the installation of what you need. You can have a window that pops up and you select what items you want to download and, and install.
More importantly, you don't have to buy Visual Studio 2010. You can always work with the Visual Web Developer 2010 Express, which is a trimmed down version of Visual Studio 2010. You can download that, it's a free version and you can download with Silverlight that way. Of course, you still need the Silverlight toolkit and so on. But, instead of Visual Studio 2010, you will be working with Visual Web Developer 2010. There are a lot of similarities between the two.
My main tool would be Visual Studio 2010, and of course, soon enough, we'll have the newer version of Visual Studio. We'll deal with that when time comes. Okay. We know we need to download Visual Studio. We have all the tools here, right? We download them from the silverlight.net website, and now, let's go ahead and proceed.
First of all, if you see over here, we have, we have Visual Studio open, and I did File:New project, and I end up with this screen. This screen tells me: what type of project we would like to create. As a matter of fact, we might have seen us discussing some of those items previously. I need to just do a quick review, before I proceed with the rest of the discussions on Silverlight. I am going to talk about all the controls, how we can use WCF in Silverlight and there's a lot to discuss in this series. I need to have a quick review before we can proceed. We know that we are on the, we are all on the same page.
By creating a new project, I get to the tab in here and I can select Silverlight. It tells me what type of projects that I would like to create. For example, I can create a Silverlight class library, so I end up with a DLL. If for example, I want to install my own controls of Silverlight controls, I can create them in a DLL. I can create a Silverlight navigation application that helps me with a little bit of navigation as I work with Silverlight.
Let's say for example, I want do this. Okay. Silverlight Navigation Application and I just leave the, the rest as a default, and click 'OK'. It tells me that in here to host a Silverlight application on new website, because we need a wait to host our Silverlight, right? Where would that be? Would that be on a website? Would that be on a MVC web project? Or on a web application project, ASP.NET web application project.
I am going to keep the ASP.NET web application project, and that's the name. I am going to leave this as is. It says in here, 'which Silverlight version are you targeting?' I have the option of selecting 3, 4 or 5. Well, of course, I am, in this case, I am working with 5. I don't want to enable WCF RIA services yet. That would be the discussion of other videos. I am going to leave everything as a default and I am going to click 'OK'.
That will create for me, a couple of things. If you notice in here, on the project side, once that's ready, you'll notice we have two projects, they are created. There's the first one, the SilverlightApplication1, with App.xaml and MainPage.xaml and also some views About, ErrorWindow and Home, and also of course we are referencing some DLLs; System.Windows.Browser, the System.XML and the System.Core and the System.Net.
In addition to the actual Silverlight application, you would notice that this SilverlightApplication1.Web, this is the one that would be holding or basically hosting the Silverlight application that I just created.
With this web project, I get two pages. One aspx page and one html page. Both of those pages actually host or use the Silverlight object as you will see shortly. But, what I am going to do right now, I am going to leave everything 'as is', I am going to build my project and the solution. You'll notice down here at the bottom, it gives me the build progress, for the project, and that's almost there, okay. Let's go ahead and try to run the project. Let's see what we end up with.
Here's the screen. By the way, I am using Google Chrome, so you would know this that I haven't added anything myself, it just says the application name, the home and the about. It looks like, as I click and switch between pages, this is the Home page, about that's the About page, you'll notice on the top and here, it says SilverlightApplication1TestPage.aspx, right? Then pound About, and then when I click Home, it goes pound Home, and you see this page, SilverlightApplication1 test page, this is the SilverlightApplication1 test page, that we see here.
They provided you with an aspx page and an html page, so you can be able to test, host this Silverlight object and test it. Now, if I try to go into a specific page, if I can go into a specific page, let's say I am going to go to the aspx page, I will notice few things.
But, more importantly, when you scroll down here, you'll notice that you have, within the form, there is a div for this SilverlightControlHost that I showed you earlier, and the object. This object is for the Silverlight object that I am talking about, okay? The width and height are 100%, the type is application x-Silverlight-2, of course not version 2, but just from there on. I have in here Param will be the source. This is the source of the code. It says, 'clientBin/silverlightapplication1.xap'.
Where, where this come from? Let's look over here on the right hand side. You'll notice that, you have a SilverlightApplication1 over here. You made some changes to your Silverlight project, maybe added some assets and views, changed the MainPage.xaml and so on. When you build your Silverlight project, you end up with a xap file, like a zip file, pretty much. It comes automatically into the client bin folder of the SilverlightApplication1.Web.
Now when I say automatically, it's just that these are the properties that you have set in the project. But, at least right now, we know it takes the project that we build here, and it puts it in the client bin silverlightapplication1.xap of the web project. That's why you'll notice in here that the html code is saying, within the object I have a parameter for the source. The source is here, in the client bin folder, that's the xap file.
Everything is within this div that actually represents the Silverlight object, right. This is the one that I am working with, this is the one that basically takes everything from this project appear and then puts it in the client bin folder and now I can execute all this and the object because of course we have on the browser, it understands the Silverlight plugin and it runs all this .NET code behind the scene and executes it for us, and provide us with the result within that div. That's how everything is put together as far as our project is concerned.
We have some Silverlight tools in here. We manipulate some Silverlight pages, we do some work in our Silverlight project. We build it, everything goes here and then from there on, we have a test page that will actually trigger everything. I could use my html test page, I can use my aspx page. Let's try to click on the html page, and say, 'view in browser'.
Okay. It's the same thing, right? Whether I use the aspx page, or the html page, I am ending up with the same thing. That confirms they are both the test pages for this project that I just created up there. That's pretty much how this project is setup.
If I had to go ahead and close the solution, if I start a new Silverlight project, let's make that a Silverlight Application, leave everything 'as is,' and then click 'OK'. Notice that we are targeting .NET 4. We have, again, where we're going to be hosting that, we have the same options. In this case, we are going with the ASP.NET web project targeting .NET Silverlight 5, and then I'll click 'OK'.
Again, I end up with my Silverlight Application that you see up here. I have the App.xaml and then MainPage.xaml with the test pages as you have seen earlier. Now the ClientBin did not contain anything because I didn't build my project yet. When I build it, the xap file will go here, and then everything will kick off from there.
Now, here is my design surface, right. This is where I design things within my Silverlight project. That's where I drop my buttons and everything. I can zoom in and zoom out on this screen. Here is the actual xaml, that's the code behind for this actual xaml, for the grid that you see up there. It says, grid with a layout, background color is white, and then here is the rest of the grid.
I can manipulate things here, and you see that it's been changed in on the design surface, or I can simply go over to the controls toolbox, and I can say, for example, drag a button and drop it on the screen and you'll notice that the button has already shown within the grid underneath. This is a button within the grid, the content says 'button.'
For example, I can say, "click on this", and you see that already showed up on the button up there. You have the height and the horizontal alignment with its margin and the name of it, vertical alignment and width. I can go ahead and manipulate things over here or I can manipulate things over here.
When I click on the button itself, you'd notice that on the right hand side, I have the properties related to this button. I can manipulate the properties, by, say for example, I want to change the background color of the button. If I click on the drop-down, it gives me a list of options that I can work with. I can, just say 'null brush', nothing at all, I can say solid color brush and I select my color, right, and I'm done, that's all I need. Or, I can also select a gradient brush to do the, the gradients for this button.
I can select, for example, the gradient brush, and then I can select the color I am interested in. I can start manipulating the colors the way I want them to be. Also, what happens is, I have gradient stops in here. It goes from this color all the way to that color. Well, I don't want it to goes only in this much. I want to add some more gradient stops here. On a stop at this point, I want to choose a different color for that. I have the option of doing so.
Also in here, you'll notice that I have a vertical gradient, or I can have horizontal gradient, or I can have a radial gradient. Let's say, go for the radial gradient, and then, you'll notice that the change is already happening, and you can manipulate those colors here, and you see this is happening, look at the button itself, when you manipulate those colors, it's actually affecting the button up there.
I can change the colors. I can mess with that as long as I want. I can change those colors, right, and if you know this, when I am done with this, I can go over to the actual xaml and I notice a few things happening already with the button.
Well, what's happening in this case? The button has the content, we've already done this. Then it has button that background. This is not a simple property. I am not just saying background color equal yellow. I am just setting a gradient background color. In order for me to change this property, I cannot put it here by saying 'background and putting my gradients in there. I cannot do that. I have to go within the button, if you want to call it like within the element button; it's like within the body. I can set background, color the button background, and I can add my gradient color, right, gradient, gradient brush, gradient brush, and I can put my stops.
I can go over here and add my gradient stops. I don't have to do this within the properties. It's easier of course, to do that within the properties. As I am changing those properties, the xaml is changing for me over here. I can go ahead and build my project, and I can run it, and I should have the Chrome, try to load this for me and you notice the, the test page, and you notice that the grid took the whole screen, 100%, as specified in the, in the CSS. I have my button, you notice the gradient on the button, right.
Of course while the button action doesn't do anything right now, but notice the gradient on the button. All of this is done through the design surface or through the xaml. As you change one, the other would be, will display actual change. If I change the screen over here for the button, the design surface, the xaml would reflect the change and if I change the xaml, and the properties of course are going to be reflected in the design surface.
That is just a quick review of what we've done. I have added few things, but overall we had that idea before, but I just needed to give you a quick refresh, before I can proceed with the Silverlight 5 discussion.
You can always drop us a line on Mr.Bool website if you have any questions. Thank you very much for listening. I am Ayad Boudiab and you have a good day.