HomeSilverlight Painting with ImageBrush, VideoBrush and W...
Painting with ImageBrush, VideoBrush and WebBrowserBrush in Silverlight 4.0
This is my fourth (and last) article in the series focusing on the basics of painting shapes in a Silverlight application using both declarative and code-behind methods. In this article, we will cover painting shapes using ImageBrush, VideoBrush and WebBrowserBrush using Silverlight 4 features. We will also develop an Out-Of-Browser (OOB) application using Silverlight 4 to demonstrate WebBrowserBrush.
If you are new to brushes in Silverlight, please refer my previous articles, which cover the basics of Silverlight painting with other brushes like SolidColorBrush, LinearGradientBrush, and so forth. You can find my previous articles here at my bio.
The entire source code for this article is available in the form of a free downloadable zip file. The solution was developed using Microsoft Visual Studio 2010 Ultimate Edition with Microsoft Silverlight 4.0 RC2 on Windows 7 Ultimate edition. I didn’t really test it in any other environment. I request that you post in the discussion area if you have any problems with execution.
Introduction to ImageBrush in Silverlight
My previous articles covered painting shapes using SolidBrush, LinearGradientBrush and RadialGradientBrush. In this section we will focus on painting shapes using ImageBrush.
ImageBrush helps us to paint any shape with a custom image. This gives us the flexibility to paint backgrounds to any surface (or element) in a Silverlight application.
Let us start with an example. Add an “images” folder to your Silverlight application. Also, add an image file (in this case, “Audi-A4.jpg”) to the “images” folder. Modify the code in “MainPage.xaml” as shown below:
In the above code we are using a new element called “ImageBrush.” It accepts any image in the form of a URI to its own attribute “ImageSource.” You can also customize the painting of the image using “Stretch” and “Opacity” attributes available with “ImageBrush.”
The following is the way to achieve this using code-behind:
Private Sub MainPage_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
'start: ImageBrush (code-behind)
Dim brImg = New ImageBrush
brImg.ImageSource = New Imaging.BitmapImage(New Uri("../images/Audi-A4.jpg", UriKind.Relative))
brImg.Stretch = Stretch.None
Me.Rectangle1.Fill = brImg
'end: ImageBrush (code-behind)
End Sub
You should observe that the URI in the code-behind is different from the declarative code. As the code-behind gets compiled to “dll,” it should go to the previous folder and then retrieve files in the “images” folder.
In the previous section, we saw how to paint a shape using “ImageBrush” with the “Stretch” option set to “None.” In this section, we will learn about the “Stretch” option in depth.
“Stretch” has the following four enumerable values: None, Fill, Uniform and UniformToFill.
Understanding "Stretch=None"
When an ImageBrush is specified with the “Stretch” property set to “None,” it will not squeeze or extend the original image. It simply paints the image as-is without any modifications.
If the image is bigger than the shape, only the image painted as part of the shape will be visible. The image “Audi-A4.jpg” is 800x600 pixels in size. However, as the “Stretch” property is set to “None” and the rectangle is not set to the same size (or more) as the image, it would show only the painted image of the shape sized as shown below.
If the image is smaller than the shape, it will be centered, as shown below:
Understanding “Stretch=Fill”
When an ImageBrush is specified with the “Stretch” property set to “Fill,” it will either squeeze or stretch the image to fit to the borders of the shape. The most important point to note here is that the image will not maintain its aspect ratio.
If the image is bigger than the shape, it gets squeezed into the shape, as shown below:
If the image is smaller than the shape, it gets stretched to fit the shape, as shown below:
This is a continuation of the previous section discussing the “Stretch” options for ImageBrush in Silverlight.
Understanding “Stretch=Uniform”
This is similar to the “Fill” option, except that this maintains the aspect ratio. You can observe shapes with the “Uniform” option below (both images):
Understanding “Stretch=UniformToFill”
This is the combination of both “Uniform” and “Fill.” That is, it uniformly (by maintaining the aspect ratio) fills the shape with the image as long as no gaps are found (you should have seen white gaps within the rectangle in previous images). But the image may cross the borders of the shape and get cut.
The following demonstration uses both images
Transparent Image Painting
Finally, you can always paint images with a flavor of transparency using “Opacity” as shown below:
We can display any video (or even a video background!) in a Silverlight application by using VideoBrush. The video file must be loaded using “MediaElement” and then be used as part of “VideoBrush.”
Let us start by adding a “Resources” section as follows:
In the “UserControl.Resources” section, we added a new element, “MediaElement,” which is going to load the “Athlon64med.wmv” file at runtime. You should also note that it is identified as “vdAthlon.”
Now that you have “MediaElement” ready (with a video), you can use the same as part of VideoBrush as shown below:
“WebBrowserBrush” works closely with the “WebControl” element in Silverlight. To work with WebControl/WebBrowserBrush, we should have our Silverlight application running out-of-browser.
Any Silverlight application can execute within a browser or outside the browser; the latter is called OOB application, for Out Of Browser. The following are the steps you'll need to take to create a Silverlight OOB application which demonstrates WebBrowserBrush.
First, Try creating a new Silverlight application (with/without hosting in web). In this case, I created a Silverlight application without web hosting capability. Modify the project project properties (to enable OOB functionality) as shown below:
Open “MainPage.xaml” and add the following code (remove the “Grid” element):
This is continuation to previous section. The design (for the code in the previous section) would look like the following:
Let us try to understand the above design. Our application is developed using OOB functionality; thus, we should provide an option for installing the application on the client machine. The first canvas “CanvasInstall” with a button accomplishes this.
We show only “CanvasInstall” at the beginning, and once the application installation is completed, we show “CanvasApp” and hide “CanvasInsall” (until then, we hide “CanvasApp” using “Visibility=Collapsed”). You can understand the same from the following demonstration.
Once we execute our application, we see the following:
Once you click on the “install” button, you get the following warning, which asks you whether you really want to install it on the client:
Once it is installed, you should see the shortcuts on the desktop and programs group. The OOB application gets executed, and you should see WebControl loading the web page (in this case bing.com) as shown below:
You can observe that the rectangle is not painted yet. Once you hit “Apply,” the rectangle gets painted based on the content of the WebControl:
Finally, you can always uninstall the OOB application installed at the client using the add/remove program option available on the client machine.
In my upcoming articles, we will see more examples of Silverlight 4.0 development. I hope you enjoyed the article and any suggestions, bugs, errors, enhancements etc. are highly appreciated at http://jagchat.spaces.live.com
Silverlight 
Microsoft`s SkyDrive Abandons Silverlight
