Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Silverlight is primarily a vector-based system, and most of the UI generated by elements is rendered as vector content. The exception to that rule is bitmap images. Silverlight provides a few classes that render bitmaps. The image control shows traditional static content. The writable bitmap provides a programmable palette where you can use your coding skills to generate an image. For this demonstration, I will start in Expression Blend in a project called UsingImages. I am in a page called AddingImageInBlend. There are a couple of ways to add images in Blend.
One of the simplest, go to a folder that contains the image and drag it to your art board. I will press Delete to move that one. The other way, which is popular with designers, is to go to the Assets pane, scroll down to the Media section. Media lists all of your available media elements. And then do the same thing: drag to the art board. Now this image is a bit big, so I am going to resize it. I am going to press the V key to get my Selector tool, hold down the Shift key, and then grab one of the corners of the image. By holding down the Shift key I maintain the aspect ratio of the picture. That looks better.
The Silverlight image control also supports loading images from the Internet. I will show you that. I will switch over to my XAML view, copy this URL, and paste that in as my Source property. Switch back to the designer. Now I am seeing an image loaded from a web server. I press Ctrl+Z to indo that action and return back to my great picture. For my next demonstration, I am going to show you how easy it is to add a border to an image. In Blend, I do that by choosing the image in my Objects and Timeline section, right-clicking on it, and choosing Group Into, then I will select Border.
Notice over in my Objects and Timeline I now have a border as a wrapper around the image. Now I can select the border and go over and change the BorderThickness. For today's demonstration, I will choose 6 pixels for each border. And then I can change the color. To change the color of the border, I am going to go to the BorderBrush property, choose to SolidColorBrush, and I am going to choose a color from the image. To do that, I can use the Color eyedropper and then just select the color I'm interested in.
I like that color green. Next, I would like to put a second border around it, say a black border. To do that, I right-click on the first border and group that into the second border. So now we have an outside border, an inside border, and the picture. The image control has a property called Stretch, which regulates how an image pixels are stretched to fit the allotted space. It becomes important when the native image size and the container size are mismatched. Stretch mode is also used for other Silverlight elements, like media element and shapes.
The first Stretch mode is None. This leaves the image at its original size. The pixels are not stretched or distorted in any fashion. If you set the stretch property to Uniform, the content of the element will be symmetrically expanded or contracted to occupy most of the available space. The aspect ratio of the image is not affected. UniformToFill also preserves the aspect ratio of the image. It expands the image to fill the container, which may result in sections of the image being cut off. Fill is the only option that doesn't maintain the original aspect ratio. This setting will rubberize your image.
At extreme dimensions, it will cause your image to look warped. In Expression Blend, I change the Stretch mode by selecting my image and then going to the Stretch property in my Properties pane. Here I can set it to None, Fill, Uniform, and of course UniformToFill. You should experiment with these and change the size of the image while changing the Stretch mode to better understand the results. Next, I will show you the writable bitmap class.
It serves as a high-speed programmable palette for rendering image pixels. When the writable bitmap pixels are ready, you assign them to a standard image control. For this demonstration, I will switch to Visual Studio. I'm in the same solution I was showing you in Expression Blend. I'm going to move to this AdvancedAnimation_Blit project and make it my startup. Then I'll open the project and look at the Plotter.cs file. At the top of this file, I am creating an instance of the writable bitmap. Then there are several hundred lines of code within this section that are modifying the pixels contained within that writable bitmap.
At some point, I am going to take the content of the writable bitmap and I am going to place them in an image I have on my MainPage UI, this image here. It has a name called outIMG. Let's see what this application looks like when I run. You can see it's a highly performant example of a dynamic UI. If you look in the upper right-hand corner, you can see the current frame rate. Next, I will show you the multiscale image. It is used to create Deep Zoom applications.
For this demonstration, I will show you the memorabilia.hardrock.com web site. This is a Silverlight application that is using Deep Zoom. Deep Zoom takes advantage of the multiscale image. Each of these images is rendered using a multiscale image class. The way this works is I click on one of these nodes on the left-hand side of the screen, choose an artist of interest, say Jimi Hendrix, look at the images shown to me. I like this green shirt here, so I am going to click on the green shirt. This is the multiscale image being used here.
As I click on this shirt, we continue to zoom in and get closer and closer to the picture. To find out more about Deep Zoom and multi-image, go to the Microsoft web site.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101962 Viewers
61 Video lessons · 88680 Viewers
71 Video lessons · 72487 Viewers
56 Video lessons · 104170 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.