Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Silverlight has always worked within an HTML page. As you probably know, the Silverlight host control is embedded in an HTML or ASP.NET page and loaded into the Silverlight runtime when the page loads. But within the Silverlight application itself, there has never been the ability to embed HTML. This is annoying, for several reasons. First you're likely to have lots of assets already in HTML. Wouldn't it be nice to be able to reuse them in sections of your Silverlight app? Two, without HTML it is harder to create a searchable site, and there is no easy way to embed advertisements within your content.
Another prime developer request from Microsoft is the ability to embed Flash content within a Silverlight app. I'm happy to tell you that Silverlight 4 supports HTML embedding. The one caveat to this is that your Silverlight application must be an out-of-browser app. There are two ways to show HTML content. If you just want to host an instance of the browser in your app, choose the webBrowser control. If you'd like to use the HTML to paint on the screen, use the webBrowserBrush instead.
Why have a webBrowserBrush? Because you cannot apply transforms to the webBrowser Control itself. It's just a wrapper for the browser window. But you can create a snapshot of the Bbrowser content, load it into a brush, and then manipulate that on screen. Let's take a look in Visual Studio. I have loaded the hosting HTML content into Visual Studio, and I'm going to open the NavigateToStringPage. This is currently my start page, and this is currently set to be an out-of-browser application.
This white area on the bottom of the screen is the out-of-browser control, the webBrowser control. And as you can see, it's giving me a warning saying HTML is enabled only an Out-of-Browser mode. So if I were to run this application right now and look at this page and I wasn't in Out-of-Browser mode, this would be the message that I would see. When I click on this button here, I'm going to load some static HTML. Let's take a look at that by pressing F7 to look at a code behind. Here it is. When I click the button, I am going to call the NavigateToString method, which is a simple way to provide any arbitrary HTML string that I want.
Here I've got a little HTML snippet saying Hello World. Another way of getting the content would be to go out to the Internet and find a site that has content that I want to stream into my application. That's what I'm doing in this button down here, on line 27. I'm checking to see if I'm running out of browser. If I am, I am going to create a webClient. Now the webClient class is a simple way to ask for a resource on a web server. I am going to create this request and I am going to say that when the request is done running I want to have a callback function called pageRequest_DownloadStringCompleted, right.
I've set up this callback. Then I am going to call DownloadStringAsync, which creates a worker thread, goes out and gets the content, and then returns it through this function down here. As you can see, I'm making a request to my web site, my blog, and then I'm going to take that resulting value and send it to the NavigateToString method. Simple, right? Let's see if it runs. Press F5 to debug, click on this button that says Add HTML content. And there you see my simple HTML snippet, and when I click over here, I get a script error.
I am getting this from Internet Explorer. And then once that script error is gone, I see my blog web site. There it is. Let me show you how to embed a YouTube video inside a browser control. That's this page right here, ShowYouTubePage. I need to make that my startup page, so I am going to go to App.xaml.cs and change this line of code here. I am going to change that to ShowYouTube. There you go, okay. Now this is pretty simple to do. In this ShowYouTubePage in the Page_Loaded event, I just went out and I grabbed an object tag here and placed that in the NavigateToString.
Recently, I went to the YouTube web site, found a video I liked, and copied the embed HTML and placed it here. And there is our video. This is from the lynda.com archives. I am going to click on here to see if it plays correctly. (video playing) Good! Again, that was very simple to set up. The last demo, I am going to show you how to use the webBrowserBrush.
I'm going to paint a reflection of that same video I just showed you on the bottom half of the page. That's down here in the webBrowserBrushPage.xaml, and I also need to change my startup. So I am going to go to App.xaml.cs and change this here to be webBrowserBrushPage, okay. And then return over here to take a look at what I've done. Again I have a webBrowser control and then down below I have a rectangle and I have a mouse procedure setup there. I don't think I am using that in this demo, but I set it up anyway.
And then I've created a PlaneProjection. Now PlaneProjection, what that allow me to do is manipulate this element in 2D space, so I can make it look like I'm spinning it around an axis. I've created this PlaneProjection. I've also created an animation to spin that part of the screen. I'll show you that in a minute. Here is my RenderTransform that's taking that Rectangle and pushing it down to the bottom of the screen and turning it upside down. ScaleY="-1" is what turns it upside down on this CompositeTransform.
And then here is the key part. The Fill value from this Rectangle, which is normally things like, you know, solid color brushes, I'm telling it to use my webBrowserBrush. And then I pass in the source name, which is the other webBrowser Control. So again, what's going to happen is all the pixels that are rendering inside this browser control will be re-rendered down here in this brush, and then the brush is going to be applied to this rectangle. Now, the webBrowserBrush doesn't automatically refresh itself. That's why I had this code up here for rectangle_MouseLeftbuttonUp. So I could click on that item and say refresh, refresh, refresh.
I decided that was a bit silly to do it that way, so instead, what I did is I created a timer. I'll press F7 to show you that. I create an instance of the DispatcherTimer and set that to 100 milliseconds and then every time the timer ticks down here, I call the wbBrush.Redraw. Time to see what it looks like. Press F5. There is my reflection. You can see it down on the bottom of the screen. It's upside down. When I run the video you can see that I am getting the reflected value in the bottom half of the screen.
(video playing) (Male speaker: I used to like to show them.) It's probably better if I shut that off so you can hear what I am saying. And now when I click on this bottom half of this screen, that's my rectangle, I've got that perspective transform happening down there, so you can see I can spin it around. Run the video again. (video playing) Stop in a different place and show that I can manipulate that. If I didn't have to talk over the running video, I could run the video and do that pivot animation at the same time. There are still some limitations with HTML Silverlight, but this is a good start.
The biggest limitation being that you have to run in out-of-browser. But there is a solution for that too. Remember, that you can interact with the browser page from the Silverlight application.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 102146 Viewers
61 Video lessons · 88862 Viewers
71 Video lessons · 72679 Viewers
56 Video lessons · 104311 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.