Use gradient brush and opacitymask to achieve fade Edge Effect

Take a look at the following gradient brush effect:

< Ellipse. Fill >
< Radialgradientbrush Gradientorigin = "0.3, 0.3">
< Gradientstop Color = "White"/>
< Gradientstop Color = "Transparent" Offset = "1"/>
</ Radialgradientbrush >
</ Ellipse. Fill >

 
We can see that transparent can also be used as the stop color. In fact, each color can be set with an Alpha value to set transparency.
 

Next, we will introduce opacitymask, which is used in many UI controls to make light and shade effects such as transparency in combination with a brush. In the opacitymaskbrush, only the Alpha value has an effect, and the RGB value is ignored no matter what it is.

 <  Image. opacitymask  > <  Radialgradientbrush  Gradientorigin  = "0.3, 0.3"> <  Gradientstop  Color  = "White"/> <  Gradientstop  Color  = "#99000000" Offset  = "0.7"/> <  Gradientstop  Color  = "Transparent"  Offset  = "1.04"/> </  Radialgradientbrush  > </  Image. opacitymask  > 

Note that the first gradientstop color above is white, but in fact only the first two alpha values make sense. The Alpha value of white is FF, so even if it is changed to red, blue, black, since their Alpha values are all ff, the effects are the same.

 

Here is an example of lineargradient:

 <  Button Content  = "Button"  > <  Button. opacitymask  > <  Lineargradientbrush  Endpoint  = "0.5, 1"  Startpoint  = "0.5, 0"> <  Gradientstop  Offset  = "0"/> <  Gradientstop  Color  = "Black" Offset  = "0.5"/> <  Gradientstop  Offset  = "1"/> </  Lineargradientbrush  > </  Button. opacitymask  > </  Button  > <  Button  Content  = "Button"  > <  Button. opacitymask > <  Lineargradientbrush  Endpoint  = "0, 0.5"  Startpoint  = "1, 0.5" type = "codeph" text = "codeph"> <  Gradientstop  Offset  = "0"/> <  Gradientstop  Color  = "Black"  Offset  = "0.5"/> <  Gradientstop  Offset = "1"/> </  Lineargradientbrush  > </  Button. opacitymask  > </  Button  > 

 
Here is an example of gradient at both ends:
 

<Image. opacitymask> <LineargradientbrushEndpoint= "0.5, 1"Startpoint= "0.5, 0"> <GradientstopOffset= "0"/>
 

 <  Gradientstop  Color  = "# Aa000000"  Offset  = "0.02"/>    < Gradientstop  Color  = "Black"  Offset  = "0.05"/> <  Gradientstop  Color  = "Black"  Offset  = "0.95"/>  <  Gradientstop  Color  = "# Aa000000"  Offset  = "0.98"/> 

<GradientstopOffset= "1"/></Lineargradientbrush> </Image. opacitymask>
 

From the above XAMLCodeWe can see that if you do not set a value for color, the default value is transparent.