Windows Phone (20) iamge Elements

Previously, we mentioned that WP currently supports PNG and JPEG image formats. We can set the source attribute to set the image source. Here we will talk about some attributes of the iamge element, which is stretch, opacity [Author: Shenzhou long]

Stretch attributes

Image stretching is determined by this attribute, which is an enumeration member, including uniform, fill, uniformtofill, And none. An image is obtained from the Internet for testing in JPG format, let's see what's different;

XAML code:

<! -- Contentpanel-place other content here --> <grid X: Name = "contentpanel" grid. row = "1" margin = "12, 0, 12, 0"> <image X: Name = "IMG" Source = "psucacfgyvt.jpg"> </image> </GRID>

Implementation results:

 

Property: Stretch = "uniform"

Note: At this time, the image is in the default state. The image will be scaled to the container size based on the appropriate aspect ratio. The image is usually horizontally or vertically centered (depending on the width and height of the image ), uniform indicates that the degree of stretch is the same in the horizontal and vertical directions, so you cannot see the image being distorted.

 

XAML code:

<! -- Contentpanel-place other content here --> <grid X: Name = "contentpanel" grid. row = "1" margin = "12, 0, 12, 0"> <image X: name = "IMG" Source = "psucacfgyvt.jpg" stretch = "fill"> </image> </GRID>

Implementation results:

Property: Stretch = "fill"

Note: setting this property value indicates that the image is filled with the entire container, and the horizontal and horizontal lines are stretched differently.

 

XAML code:

<! -- Contentpanel-place other content here --> <grid X: Name = "contentpanel" grid. row = "1" margin = "12, 0, 12, 0"> <image X: name = "IMG" Source = "psucacfgyvt.jpg" stretch = "uniformtofill"> </image> </GRID>

Effect:

 

Property: Stretch = "uniformtofill"

Note: setting this value indicates that the same degree of stretching is maintained in the vertical and horizontal directions on the basis of full container filling to ensure the aspect ratio;

 

XAML code

 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">            <Image x:Name="img" Source="psuCACFGYVT.jpg" Stretch="None"  ></Image>        </Grid>

Effect:

 

Property: Stretch = "NONE"

Note: Do not stretch the aspect.

Opacity attributes

This attribute can set the image transparency, and can be set to 0 ~ The value of 1 controls the transparency. The value 0 indicates the lowest and the value 1 indicates the original brightness of the image.

XAML code:

<! -- Contentpanel-place other content here --> <grid X: Name = "contentpanel" grid. row = "1" margin = "12, 0, 12, 0"> <image X: name = "IMG" Source = "psucacfgyvt.jpg" verticalalignment = "TOP" opacity = "0.1" Height = "260"> </image> <image X: name = "img1" Source = "psucacfgyvt.jpg" verticalalignment = "bottom" opacity = "0.9"/> </GRID>

Effect:

 

We can see that the comparison between the two images is a simple transparency problem. In addition, you will find that the image above is set to a height, and its corresponding width is reduced according to the aspect ratio; this attribute is used. It is interesting that this attribute opacitymask

 

Opacitymask attributes

This attribute is a brush type object. You can set a part of the element to gradually disappear.

XAML code:

<! -- Contentpanel-place other content here --> <grid X: Name = "contentpanel" grid. row = "1" margin = "12, 0, 12, 0"> <image X: name = "IMG" Source = "psucacfgyvt.jpg" verticalalignment = "TOP" opacity = "0.8"> <image. opacitymask> <lineargradientbrush> <gradientstop color = "wheat" offset = "0"> </gradientstop> <gradientstop color = "wheat" offset = "0.5"> </gradientstop> <gradientstop color = "Transparent" offset = "1"> </gradientstop> </lineargradientbrush> </image. opacitymask> </image> </GRID>

Effect:

 

It's so dazzling that it will be used to process photos with this effect.

 

Reflection effect implementation

XAML code:

<! -- Contentpanel-place other content here --> <grid X: Name = "contentpanel" grid. row = "1" margin = "12, 0, 12, 0"> <image X: name = "img1" verticalalignment = "TOP" Source = "psucacfgyvt.jpg"> </image> <image X: name = "img2" Source = "psucacfgyvt.jpg" verticalalignment = "TOP" rendertransformorigin = "0.5 1"> <image. rendertransform> <scaletransform scaley = "-1"> </scaletransform> </image. rendertransform> <image. opacitymask> <lineargradientbrush startpoint = "0 0" endpoint = "0 1"> <gradientstop offset = "0" color = "#00000000"> </gradientstop> <gradientstop offset =" 1 "color =" #40000000 "> </gradientstop> </lineargradientbrush> </image. opacitymask> </image> </GRID>

Implementation results:

 

From the code above, we can see that we have set two images with the same location. Then we have redefined the rotation center rendertransformorigin = "0.5 1" in the second image ", this position is at the bottom of the first image, and then uses the scaling attribute scaley = "-1"
In this way, the image is rotated, and then gradually disappears from 0 to 1 on the Y axis. Although opacitymask is dazzling, it cannot be used at will, it causes performance problems.