Using clip to create a hole effect

Cause

As the previous blog post says, the wiring prototype needs to leave 15 pixels of space between the middle text. After the designers finished the prototype, asked if I could do it, I said, I can think of two ways to achieve. One is the opacitymask of the last blog post. The second is the use of clip. Here are the following:

Code Implementation Clip

Clip is defined in UIElement, and the type is geometry. The explanation in MSDN is to get or set the geometry that defines the border of the element content. In fact, it is not only possible to keep whitespace at the border, but it is also possible to leave a blank in the UI element, as long as the related shapes are defined.

Rectangular hole

It's OK to remove a small rectangle in a large rectangle.

The main code in Rectangleholeconverter, the code is as follows:

namespaceholewithclip{usingSystem; usingSystem.Globalization; usingSystem.Windows; usingSystem.Windows.Data; usingSystem.Windows.Media; /// <summary> //Rectangular Cavity Converter// </summary>Public classRectangleholeconverter: Imultivalueconverter{        /// <summary> //Convert to Rectangular hole//</summary>// <param name= "values" > //A list of converted values, the first representing the starting width, the second representing the starting height,/// the third represents the total width, and the fourth represents the total height/// the fifth represents the host width, and the sixth represents the host width//</param>// <param name= "TargetType" ></param>//<param name= "parameter" >& lt;/param>//<param name= "culture" ></param>///<returns></returns> Public ObjectConvert (Object[] values,TypeTargetType,Objectparameter,CultureInfoculture) {            if(values = =NULL| | values. Length! = 6 | | Values. Havenullitem () | | !values. Isallinstanceoftype (typeof(Double)))            {                returnDependencyProperty.            UnsetValue; }            varmaskstartwidth = (Double) values[0]; varmaskstartheight = (Double) values[1]; varmasktotalwidth = (Double) values[2]; varmasktotalheight = (Double) values[3]; varhostwidth = (Double) values[4]; varhostheight = (Double) values[5]; if(hostwidth = = 0.0 | | hostheight = = 0.0) {return null; }            varMaskrectangle =NewRectangleGeometry(NewRect(NewSize(Hostwidth, Hostheight))); varMaskellipse =NewRectangleGeometry(NewRect(                New Point(Maskstartwidth, maskstartheight),NewSize(Masktotalwidth, Masktotalheight))); varcombinedgeometry =Geometry. Combine (Maskrectangle, Maskellipse,GeometryCombineMode. Exclude,NULL); returnCombinedgeometry; }        Public Object[] Convertback (Objectvalue,Type[] targettypes,Objectparameter,CultureInfoculture) {            return new[] { Binding.        DoNothing}; }    }}

Two extension methods are used as follows:

namespaceholetest{usingSystem; usingSystem.Collections.Generic; usingSystem.Linq; Public Static Classenumerableextension{        /// <summary> //whether a null entry exists in the enumerator//</summary>// <typeparam name= "T" >element Type</typeparam>//<param name= "Enumerable" >Element Enumeration</param> //<returns>A null entry exists to return true, otherwise false is returned</returns>Public static BOOLhavenullitem<t> ( ThisIEnumerable<T> Enumerable) {            returnEnumerable. Any (item = Item = =NULL); }        /// <summary> //whether all instances of the specified type are in the enumerator//</summary>// <typeparam name= "T" >element Type</typeparam>//<param name= "Enumerable" >Element Enumeration</param> //<returns>returns True for all instances of the specified type, otherwise false</returns>Public static BOOLisallinstanceoftype<t> ( ThisIEnumerable<T> Enumerable,Typetype) {            returnEnumerable. All (item = type.        IsInstanceOfType (item)); }    }}

Oval Hole

Like a rectangular hole, an ellipse is ruled out in the middle of a large rectangle.

The main code in Ellipseholeconverter, the code is as follows:

namespaceholewithclip{usingSystem; usingSystem.Globalization; usingSystem.Windows; usingSystem.Windows.Data; usingSystem.Windows.Media; /// <summary> //Oval Cavity Converter// </summary>Public classEllipseholeconverter: Imultivalueconverter{        /// <summary> //Convert to Rectangular hole//</summary>// <param name= "values" > //A list of converted values, the first representing the starting width, the second representing the starting height,/// the third represents the total width, and the fourth represents the total height/// the fifth represents the host width, and the sixth represents the host width//</param>// <param name= "TargetType" ></param>//<param name= "parameter" >& lt;/param>//<param name= "culture" ></param>///<returns></returns> Public ObjectConvert (Object[] values,TypeTargetType,Objectparameter,CultureInfoculture) {            if(values = =NULL| | values. Length! = 6 | | Values. Havenullitem () | | !values. Isallinstanceoftype (typeof(Double)))            {                returnDependencyProperty.            UnsetValue; }            varMaskellipsecenterx = (Double) values[0]; varmaskellipsecentery = (Double) values[1]; varMaskradiusx = (Double) values[2]; varmaskradiusy = (Double) values[3]; varhostwidth = (Double) values[4]; varhostheight = (Double) values[5]; if(hostwidth = = 0.0 | | hostheight = = 0.0) {return null; }            varMaskrectangle =NewRectangleGeometry(NewRect(NewSize(Hostwidth, Hostheight))); varMaskellipse =NewEllipseGeometry(                New Point(Maskellipsecenterx, Maskellipsecentery), Maskradiusx, maskradiusy); varcombinedgeometry =Geometry. Combine (Maskrectangle, Maskellipse,GeometryCombineMode. Exclude,NULL); returnCombinedgeometry; }        Public Object[] Convertback (Objectvalue,Type[] targettypes,Objectparameter,CultureInfoculture) {            return new[] { Binding.        DoNothing}; }    }}

Irregular voids

The most common of our various shapes is path, because many complex effects can be plotted as path in the design tool. Similarly, the most powerful of the geometry is PathGeometry. The five-point shape in the image above is the conversion of the path data into PathGeometry. The XAML code is as follows:

 <  border  width  = "+"  height  = "+"  margin  = "3"  background  = "Aquamarine" > <  border  background  = "Lightpink"  clip  = "m90.000003,0.5 l111.12693,68.873594 l179.50001,68.871913 L124.18408,111.12744 l145.31405,179.49999 l90.000003,137.24175 l34.685959,179.49999 l55.815923,111.12744 L0.50000013,68.871913 L68.87308 , 68.873594 z "/></ border  >  

In other words, just looking at the XAML code really doesn't see what the hell this is.

Download link

Blog Park: Holewithclip

The difference between OpacityMask and clip

It can be seen that through opacitymask and clip can achieve hole-punching effect. However, the effect achieved by opactiymask in the middle of the hole will cause the corresponding event, and clip is not, because the UIElement in the hit test to consider the existence of clip. Different implementations should be chosen according to the actual requirements.

Using clip to create a hole effect