WPF effect clip and transform

The bitmapeffect and effect attributes can be found in the members of the uielement class. Both attributes are used to add effects to the UI element, ms's official website and some open-source websites already have many effect class libraries available for use. Effect has good performance because of GPU acceleration. It can be said that effect replaces bitmapeffect, but bitmapeffect can still be used in wpf4.0.

<Button width = "  200  " Height = "  100  " Background = "  Red  " Content = "  Dropshadoweffect  " Fontsize ="  20  " Canvas. Left = "  125  " Canvas. Top = "  0  " > <Button. Effect> <dropshadoweffect blurradius = "  30  " Color = "  Green  " Direction ="  -45  " /> </Button. Effect> </button> <button background = "  Red  " Canvas. Left = "  356  " Canvas. Top = "  0  " Content = "  Blureffect  " Fontsize ="  20  " Height = "  100  " Width = "  100  " > <Button. bitmapeffect> <bevelbitmapeffect bevelwidth = "  5  " Edgeprofile = "  Curvedin  " Lightangle ="  10  " Relief = "  10  " Smoothness = "  10  " /> </Button. bitmapeffect>
</Button>

The optional values of effect are as follows:

The optional attributes of bitmapeffect are as follows:

In WPF, the word "transform" has a wide range of meanings. Changes in position, size, coordinate system ratio, and rotation angle are considered as deformation.

The deformation in WPF is separated from the UI element. For example, you can design a deformation of 45 degrees to the left, then, assign the deformation value to the deformation control attributes of different UI elements. These UI elements are rotated 45 degrees left.

There are two attributes for controlling deformation:

Rendertransform: rendering deformation, defined in the uielement class.

Layouttransform: Layout deformation, defined in the frameworkelement class.

Both attributes are dependent attributes. Their data types are all transform abstract classes. The Derived classes of the transform class can be used to assign values to these two attributes.

<Image Source = "  1. jpg  " Canvas. Left = "  125  " Canvas. Top = "  30  " Height = "  380  " Name ="  Image1  " Stretch = "  Fill  " Width = "  229  " > <Image. bitmapeffect> <blurbitmapeffect kerneltype = "  Gaussian  " Radius = "  5  " /> </Image. bitmapeffect> <image. rendertransform> <transformgroup> <rotatetransform centerx = "  40  " Centery = "  40  " Angle = "  45  " /> <Translatetransform x = "  200  " Y = " 200  " /> </Transformgroup> </image. rendertransform> </image>

The derived classes of the transform class include the following:

• Matrixtransform: matrix deformation, which refers to the matrix points containing the transformed UI elements as a matrix for deformation.
• Routetransform: rotation deformation, rotating in the center of a given point, in the unit of angle.
• Scaletransform: the coordinate system is deformed. You can adjust the coordinate system of the deformed element to produce a scaling effect.
• Skewtransform: tensile deformation. deformation elements can be stretched horizontally and vertically.
• Translatetransform: Offset deformation, causing the deformed element to offset a given value horizontally or vertically.
• Transformgroup: Deformation group. Multiple independent deformation groups can be combined into one deformation group to produce composite deformation effects.

<Textbox text ="Layouttransform"Fontsize ="30"> <Textbox. layouttransform> <rotatetransform angle ="-90"/> </Textbox. layouttransform> </textbox>
 

During work, you may often encounter the need to create irregular forms or controls. WPF provides good support in this respect. You only need to use the clip attribute of the form or control to easily achieve this.
The clip attribute is defined in the uielement. A single WPF form has this attribute with all controls and graphics. The data type of the clip attribute is geometry, which is consistent with the data attribute of path. Therefore, we only need to make a path with a special shape as required and assign the data attribute of path to the clip attribute of the form or control, and then crop the target.

Define a path in XAML as follows:

<Path visibility ="Hidden"X: Name ="Clippath"Data="M 55,100 a 50, 50 0 1 200, 60 a 110,95 0 0 1 250,100, 60 a 50, 50 0 1 55,100 A 110,95 0 1 1 Z"/>
 

Assignment:

 
Window1.clip = clippath. Data;
 

It is OK. Note that you need to set these two attributes for the form:

 
Allowstransparency ="True"Windowstyle ="None"
 

The effect is as follows:

The following describes how to drag the form. You only need to override onmouseleftbuttondown, as shown below:

 
Protected Override VoidOnmouseleftbuttondown (mousebuttoneventargs e ){Base. Onmouseleftbuttondown (E); // point position=E. getposition (window1 );If(E. leftbutton =Mousebuttonstate. Pressed ){This. Dragmove ();}}
 

In this way, the form can be freely dragged.