Silverlight graphics: Image Processing

Create Image

To present an Image, you can use an Image or ImageBrush object. The following example shows how to create an image.

XAML

<Image　Source="myPicture.png"　/>

VB

Dim　myImage　As　Image　=　New　Image
myImage.Source　=　New　BitmapImage(New　Uri("myPicture.jpg",　UriKind.RelativeOrAbsolute))
LayoutRoot.Children.Add(myImage)

In this example, the Source attribute is used to specify the position of the image to be displayed. You can specify the absolute
URL (for example, http://contoso.com/myPicture.jpg) to set the Source, you can also specify
URL. For the previous example, You need to place the XAP file in the folder where myPicture.png is located.

You use ImageBrush to draw areas with a paint brush. For example, ImageBrush can be used for Canvas or InkPresenter
The value of the Background attribute.

Note:

Silverlight does not support all image formats.

Stretch Image

If you do not set the Width or Height value of the Image (as shown in the preceding example), it will use the natural size of the Image specified by Source for display. Set Height
And Width create an area that contains a rectangle, and the image is displayed in the area. You can use the Stretch attribute to specify how the image fills the contained area. Accepted Stretch attributes
Stretch enumeration defines the following values:

None: The image is not stretched to fit the output size.

Uniform: scales the image to fit the output size. However, the aspect ratio of the content is retained. This is the default value.

UniformToFill: scales the image to completely fill the output area, but maintain its original aspect ratio.

Fill: scales the video to fit the output size. Because the height and width of the content are scaled independently, the original aspect ratio of the image may not be retained. That is to say, in order to completely fill the output area, the image may be distorted.

 

 

The following illustration shows different Stretch settings.

Stretch settings

The following example shows an Image that fills an output area of 300x300 pixels, but retains its original aspect ratio because the Stretch attribute is set
UniformToFill.

XAML

<Canvas　Width="300"　Height="300"　Background="Gray">　
　　
　<Image　Source="myImage.jpg"　Stretch="UniformToFill"　Width="300"　Height="300"　/>　
　
</Canvas>　

Note:

When only one constraint attribute is set (such as Height), other attributes (in this example, Width) are automatically calculated based on the aspect ratio of the natural image. Because of this behavior, set the Stretch
Property does not change this behavior unless it is set to None.

Crop Images

You can crop an image by cropping out an area of the image output using the Clip attribute. Set the Clip attribute
Geometry, which means you can crop various geometric shapes (such as an elliptical, straight line, or complex path) from an image ). For more information about creating a ry, see ry.

The following example shows how to use EllipseGeometry as the image editing area. In this example,
Image object. An EllipseGeometry with a RadiusX value of 100, a RadiusY value of 75, and a Center value
Set to the Clip attribute of the image. Only the image part inside the elliptical area is displayed.

XAML

<Grid　x:Name="LayoutRoot"　Background="White">　
　<Image　Source="Water_lilies.jpg"　
　　Width="200"　Height="150">　
　　<Image.Clip>　
　　　<EllipseGeometry　RadiusX="100"　RadiusY="75"　Center="100,75"/>　
　　</Image.Clip>　
　</Image>　
</Grid>　
　

 

 

The output of this example is displayed.

EllipseGeometry for image editing

Note:

All objects except the Image can be edited.

Note:

Another way to create a cropping effect is to apply the OpacityMask by using a gradient. In this case, because you are using
Opacity, so you can create a fuzzy edge in cropping.

Apply OpacityMask

You can apply OpacityMask to an image to create multiple Opacity-related photo masks, such as virtual illumination, as shown in.

Example of the virtual illumination effect created by OpacityMask

Image Rendering (ImageBrush)

You use ImageBrush to draw areas with a paint brush. For example, ImageBrush can be used for Canvas or InkPresenter
The value of the Background attribute. For more information about paint brushes, see paint brushes.

The following XAML example shows how to set the Foreground attribute to ImageBrush, and its image will be used as a fill for TextBlock to render text.

XAML

<!--　TextBlock　with　an　image　brush　applied　to　the　text.　-->　
<TextBlock　FontFamily="Verdana"　FontSize="72"　
　FontStyle="Italic"　FontWeight="Bold">　
　　SHRUBBERY　
　<TextBlock.Foreground>　
　　<ImageBrush　ImageSource="forest.jpg"/>　
　</TextBlock.Foreground>　
</TextBlock>　

 

 

Displays the results of this XAML example.

ImageBrush for text Filling

 

 

Scale and remove images

 

You can use a technology called Deep Zoom to scale and shift large or high-resolution sets of images.

 

One example of using Deep Zoom is the Hard Rock Memorabilia site. You can zoom in and out with the scroll wheel and move the image around by dragging.

 

Generally, loading large images is not the best experience for users because they need to wait for image loading. Deep Zoom
By loading high-resolution images incrementally, this problem can be solved. This gives users a "new" experience. In addition, you can use Deep Zoom
And use spring animations that give users a smooth "moving" impression around the image. The following is an example of using Deep Zoom:

 

Explore very large or high-resolution images: a typical example of this is to zoom in the parts of a large map to see details at different levels, and then move the view around the map. As the user moves the view, the animation will be used to enhance the impression of moving the view from one place to another. Another example is to explore the professional photo synthesis that forms a high-resolution image.

 

3D Photography: You can take a picture of a room. continuous shooting creates a set of 360-degree images of the room. Now, users can pan around the room, and each photo is mixed with other photos.

 

Advertisement: You can create images with relatively low resolution to express the entire topic of the advertisement, and then gradually increase the image with higher resolution to accommodate the effect of deepening the user's impression and data related to the product. When loading the page embedded with this advertisement for the first time, by constantly loading images with a higher resolution, the advertisement will sharpen smoothly and attract the attention of readers. In addition, if the user's mouse pointer enters the advertisement, the different parts of the advertisement will be enlarged.