Windows Phone development (31): Image painter

What is painter? Actually, the painter is used for graffiti. Actually, I did not lie to you. As for whether you believe it or not, I believe it.
This article describes several typical painter models to help you understand that the painter is used for graffiti.

1. Solid color paint brush solidcolorbrush.

This guy is "pure", of course it is not pure, it is indeed pure, pure to only use one color, so it is called "monochrome paint brush ".
Let's take a look at this example. We will draw a rectangle (put it in a canvas) and then dress it up with this pure guy.

<Rectangle canvas. left = "5" canvas. top = "130" width = "85" Height = "75"> <br/> <rectangle. fill> <br/> <solidcolorbrush color = "white"/> <br/> </rectangle. fill> <br/> </rectangle>

 

Because of the built-in converter, Microsoft has always been concerned about the health of developers, So ms is not willing to be too tired when we write code, so the above content can be abbreviated.

<Rectangle canvas. Left = "110" canvas. Top = "156" <br/> width = "120" Height = "120" fill = "blue"/>

 

The effects of these two codes are the same. Obviously, you will prefer the latter because it is more concise than N.

Next, let's take a look at the representation of the color attribute.
1. the name, such as blue, does not need to be translated;
2. RGB, such as # cccccc. If you have worked on Webpage Design and wrote CSS Styles, you know;
3. argb, such as #0 cbbbbbbbb, is actually adding a value in front, between 0 and 1, transparency.
It can be said that you can write out countless colors after remembering the above three points.

 

 

 

Ii. Gradient paint brush.

If you have used drawing software like Photoshop, or you have used GDI programming, of course you have used WPF better.
Gradient color, which can be understood as follows: consists of N colors, which have their own distribution and there is a transition between colors of each segment.
Let's take a look at two gradient forms: Linear and radial.
(1) linear gradient
Let's take a look at the figure below. I believe that no text is more intuitive than the image. I believe you will know what a linear gradient is.

Okay. How is the above effect achieved? Lineargradientbrush is used. Take a look at the XAML code.

<Rectangle canvas. top = "312" canvas. left = "40" width = "278" Height = "95"> <br/> <rectangle. fill> <br/> <lineargradientbrush startpoint = "" endpoint = ""> <br/> <gradientstop color = "yellow" offset = "0"/> <br/> <gradientstop color = "green" offset = "0.5"/> <br/> <gradientstop color = "orange" offset = "1"/> <br/> </lineargradientbrush> <br/> </rectangle. fill> <br/> </rectangle>

Here, we need to pay attention to the following points:
1. startpoint: the starting point of the linear gradient. Since it is linear, it must start and end. The values of X and Y are between 0 and 1;
2. endpoint: End Point. Similarly, the value range is between 0 and 1.
3. Point 0 to the upper left corner, and point 1 to the lower right corner.
Each lineargradientbrush can contain N gradientstop, indicating the end point of each color, as shown in.

If you do not understand it very well, the best way is to practice more.

 

<Ellipse canvas. top = "465" canvas. left = "40" width = "150" Height = "120"> <br/> <ellipse. fill> <br/> <lineargradientbrush startpoint = "0.5, 0" endpoint = "0.5, 1 "> <br/> <gradientstop color =" # ff8e8ee8 "/> <br/> <gradientstop color =" # ffdbbc55 "offset =" 0.6 "/> <br/> <gradientstop color = "# ff61ddf5" offset = "0.99"/> <br/> </lineargradientbrush> <br/> </ellipse. fill> <br/> </ellipse>

The Running Effect of the preceding two examples is shown in.

 

 

(2) radial gradient
The name is hard to understand. Let's take a look at the graph and write the text.

How is it beautiful? Let's look at the implemented XAML code.

<Rectangle canvas. left = "242" canvas. top = "465" width = "150" Height = "150"> <br/> <rectangle. fill> <br/> <radialgradientbrush center = "0.5, 0.5 "radiusx =" 0.5 "radiusy =" 0.5 "> <br/> <gradientstop color =" green "offset =" 0.2 "/> <br/> <gradientstop color =" lightblue "offset =" 0.7 "/> <br/> <gradientstop color =" yellow "offset =" 1 "/> <br/> </radialgradientbrush> <br/> </rectangle. fill> <br/> </rectangle>

Look, there are several attributes that are more eye-catching.
1. Center, Center. You can see that the radial gradient is like a circle with a center point and a radius. Similarly, the value range is [0, 1].
2. radiusx and radiusy. Similarly, the radius ranges from 0 to 1, and the radius of the horizontal and vertical axes.
We can find that these values are relative logical values, which are more flexible than absolute positions.

 

 

3. videobrush.

 

This should be used with mediaelement, which has been introduced in the previous article.

 

 

 

4. Image painter imagebrush.

 

If you think that the Front color is not good enough, take a look at it and fill it with images.

The implemented XAML is as follows.

<Ellipse canvas. left = "40" canvas. top = "445" width = "398" Height = "248"> <br/> <ellipse. fill> <br/> <imagebrush imagesource = "test.jpg"/> <br/> </ellipse. fill> <br/> </ellipse>

 

This is simple. The imagesource attribute points to an image, which is similar to the image control.