Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Silverlight is one of the shining jewels in the Microsoft toolkit. If you are new to Silverlight, this movie will give you a quick overview. If you want to learn more about Silverlight, there are a number of titles here on lynda.com that provides more details about this rich platform. What is Silverlight? It is Microsoft's framework for building complex, visually rich, cross-browser and cross-platform applications. Developers can create web applications in familiar languages, like Visual Basic and C#. Unlike HTML-based application, Silverlight has zero browser compatibility issues, but it does require a browser plug-in to be installed on the user's computer.
Silverlight is also one of the programming platforms for the new Windows Phone 7 devices. I am going to create a brand-new Silverlight project inside Visual Studio. To do that, I need to go to File > New > Project and then choose the Silverlight section. If you want to do a Silverlight 4 project, make sure you have the Visual Studio extensions installed. Next, I'll choose Silverlight Application. Make sure I'm in the folder that I want to be in-- in this case, it's the movie folder in my Exercise Files folder--and then click OK.
Visual Studio asks me if I would like a companion web site. I think that's a great idea, so I am going to click OK. If you look in the Solution Explorer, you'll see that there are two projects now: the SilverlightApplication and an ASP.NET application. What happens when I run the application is it compiles the Silverlight application, copies the special files over to the ASP.NET application, launches ASP.NET, and then loads my Silverlight control onto the page.
Before I run the application, let's put a little bit of user interface in here. I'm going to go to my toolbox and find the Silverlight Button and drag that over to the designer surface. If I'd rather used the XAML editor, I can use the bottom half of the split screen. Here I can hand type my own controls. For my case, I think I just might change the text on the button. So I am going to go to the Content property, and type in Change Text. Next, I will grab a TextBlock from the toolbox and drag that over and drop it on my designer surface.
Then I'm going to double-click on this button to stub in some code. Visual Studio wrote this little bit of code for me. And then I'm going to write one line of code here, textBlock1.Text = hello. Now we are ready to test this application. If you wanted to debug your Silverlight application, you can choose to Debug > Start Debugging. If you notice in the lower right-hand corner, the ASP.NET Development Server has started up.
Now my ASP.NET page is loaded and then embedded inside that page, the entire working area of the browser is now a Silverlight plug-in. I can click on this Change Text button and you see the hello string shows up. Now this is a rather plain application. I thought I would show you some interesting applications. I am going to show two more applications in this movie. I'll start by loading a project from our Silverlight 4 title. I'll go to File > Open > Project. I am going to go to our movie chapter and open this UsingBingMapControl, and then I am going to load this SLN file.
Next, I am going to open the Silverlight application and find this page called ChangeMapView. I also want to verify that this is my starting page, so I am going to double-click on this App.xaml.cs and make sure that it says, in line 29, that I want to load the ChangeMapView. Then I'll switch over to my XAML. What I am using in this example is a plug-in control called the BingMapControl.
I have written a text block across the top and three buttons and a couple of text blocks across the bottom that show our current latitude and longitude on the map. When you click on this New York button, I've written a little bit of code that changes the map mode and then uses the latitude and longitude position to change the map. This number here represents the zoom factor on the map. When you click on the Grand Canyon button, I do something similar. I change to a slightly different map mode, show the user the Grand Canyon with a higher zoom level.
I also put a couple of custom controls on the map. These are called pushpins. Not only do I put the pushpins on the map, but I also set a tooltip so when the user hovers over these pushpins, they can read this text. Let's see this in action. Debug > Start Debugging and then click Yes. That was the Save dialog, and here is my Bing map control. I can drag the map around and look at the map, double-click to zoom in, and then I can click on this New York button to move me over to the New York coordinates.
Then I can click on the zoom in to Grand Canyon button to move back to the Grand Canyon, switch to the aerial view. As I promised, here are the two pushpins, and I can hover over those and see the tooltips. The second example I want to show you is on the Internet-- this is as an open source project-- I'm particularly interested in this application because some of the pixel shader tools that I wrote are included in this application. It's called Fantasia, and it's at this URL.
This is a Silverlight photo editing application. So, I can draw on this application by choosing different brushes, like this Basic Furball brush. I can tint the pictures. I can use these pixel effects down here, like the Emboss effect, or Invert Colors effect and some of my favorites are Swirls where I can drag the center point around to any location. See how fast and responsive this is? I'll choose cancel on that one.
And let me show you one more before I close: Drain Flush. That gives me a nice swirling effect. There is a lot more we could talk about in Silverlight. Silverlight supports auto browser applications and a host of other interesting features. Be sure and check out our other titles here on lynda.com.
Get unlimited access to all courses for just $25/month.Become a member