Tutorials » Silverlight tutorials »

How to display image in a Silverlight control ?


This tutorial shows how to display an image in a Silverlight control.


In Silverlight, the image control can be used to display images. The usage is pretty straight forward. The syntax of using Image control is shown below:

<Grid x:Name="Layout" Width="250" Height="250" Background="GREEN" >
<Image x:Name="MyImage" Source="/images/basket.jpg" Stretch="Uniform" ></Image>
</Grid>


Image.stretch Property


The Stretch attribute can have the following values:

1. None

This will do no modification on the size of the image. If the image size is more than the size of the container, then the image will be cut to fit in the container.

2. Fill

In this case, the image will be expanded to fill the region of the container. The aspect ratio (proportion of width and height) will not be maintained.

3. Uniform

This is the default value. In this case, the image will be resized to fit the container, but the aspect ratio will be maintained. So, there may be blank space in the container depending on the width and height of the image and container.

4. UniformToFill

In this case, the image will be resized and will fill the container, but aspect ratio will be maintained by trimming some portion of the image if required.

Width and Height properties


The width and height properties of the image can be used to override the stretch property. If width and height properties are specified, then Stretch property will be ignored.

Image.Clip property


The clip property of Image control can be used in Silverlight to make certain portion of the image visible and hide some part of it.

See an example of how to display an image in a elliptical form:


<Grid x:Name="Layout" Width="200" Height="220" Background="YELLOW" >
<Image x:Name="MyImage" Source=" Images/AppleTree.png" Stretch="Fill">
<Image.Clip>
<EllipseGeometry x:Name="Ellipse" RadiusX="100" RadiusY="100" Center="100,110"/>
</Image.Clip>
</Image>
</Grid>


The above code will produce an image like this:





Next Chapter: How to drag and move an image or object in Silverlight ?
Previous Chapter: Layout panel controls in Silverlight - Canvas
More Chapters: Silverlight Tutorials
More Tutorials: Tutorial Index



Top Contributors
TodayLast 7 Daysmore...

Awards & Gifts

Online Members

rao
More...
 
Copyright © SpiderWorks Technologies Pvt Ltd., Kochi, India