Additional properties for the WPF QuickStart series (attached property)

This blog is about how to use attached properties and create custom attached properties.

1. Additional property usage,

There is no greater use of attached properties in WPF than setting controls on the layout of controls, such as having a rectangle, Ellipse, Button in the canvas, and we need to set their position.

    <Canvas>        <rectangle x:name= "_rect" fill= "LightBlue" width= "" height= "200" canvas.left= " canvas.top= "/> <ellipse width=" "" Height= "fill=" "Lightcoral" canvas.left= "200" canvas.top= "                >                <button content= "I am a button" width= "height=" "canvas.left=" [canvas.bottom=]/> </    Canvas>

In addition to setting dependency properties in XAML, you can set them in C # code, for example:

   Canvas.setleft (_rect,);   Canvas.settop (_rect, 50);

Display effect:

Attached properties are very simple to use.

2. Customizing additional properties

Now there is a need to rotate the button,ellipse,rectangle above a certain angle. We can do this by:

Xaml:

    <Canvas>        <rectangle x:name= "_rect" fill= "LightBlue" width= "" height= "100" canvas.top= " Rendertransformorigin= ". 5,.5" >            <Rectangle.RenderTransform>                <rotatetransform angle= "/>"            </Rectangle.RenderTransform>        </Rectangle>        <ellipse width= "height=" fill= " Lightcoral "canvas.left=" "canvas.top=" "rendertransformorigin=". 5,.5 ">            <ellipse.rendertransform >                <rotatetransform angle= "/>"            </Ellipse.RenderTransform>        </Ellipse>        <button content= "I am a button" width= "height=", "canvas.left=" "canvas.bottom=" "rendertransformorigin=". 5,.5 ">            <Button.RenderTransform>                <rotatetransform angle="/>            </ button.rendertransform>        </Button>    </Canvas>

The effect is as follows:

Careful you have found the above three pieces of code basically the same, and quite long. We can use additional properties to implement, create a new Rotationhelper class, the code is as follows:

Using system.windows;using system.windows.media;namespace useattachedproperty.helper{public class Rotationhelper:de Pendencyobject {public static double getangle (DependencyObject obj) {return (double) obj.        GetValue (Angleproperty); public static void Setangle (DependencyObject obj, double value) {obj.        SetValue (angleproperty, value); } public static readonly DependencyProperty Angleproperty = dependencyproperty.registerattached ("Anglepr        Operty ", typeof (Double), typeof (Rotationhelper), New PropertyMetadata (0.0,onanglechanged));  private static void Onanglechanged (DependencyObject D, DependencyPropertyChangedEventArgs e) {UIElement            element = d as UIElement; if (element! = null) {element.                Rendertransformorigin = new Point (0.5, 0.5); Element.            RenderTransform = new RotateTransform ((double) e.newvalue); }       }    }} 

The Rotationhelper class inherits DependencyObject so that it is not only button,ellipse, but can be used, and other elements that inherit from DependencyObject can be used.

Custom angle attached properties are now used in XAML.

<window x:class= "Useattachedproperty.mainwindow" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/ Presentation "xmlns:x=" Http://schemas.microsoft.com/winfx/2006/xaml "xmlns:d=" http://schemas.microsoft.com/e xpression/blend/2008 "xmlns:mc=" http://schemas.openxmlformats.org/markup-compatibility/2006 "xmlns:helper=" C        Lr-namespace:useattachedproperty.helper "xmlns:local=" Clr-namespace:useattachedproperty "mc:Ignorable=" D " Title= "MainWindow" height= "width=" 525 "> <Canvas> <rectangle x:name=" _rect "fill=" LightBlue "Width=" "height=" "canvas.top=" "helper:rotationhelper.angle=" "/> <ellipse width=" "height=" 1 "Fill=" lightcoral "canvas.left=" "canvas.top=" "helper:rotationhelper.angle=",/> <button Content= "I am a button" width= "height=" "canvas.left=" "canvas.bottom=" "helper:rotationhelper.angle="/> &lt ;/canvas></window>

This displays the same effect as using RenderTransform in XAML above.

Thank you for reading. Code click here to download.

PS: Currently at work,

1. When setting watermark text for textbox and PasswordBox, use to custom attached property, sample code download;

2. In WPF MVVM mode, it is not possible to bind the password property of PasswordBox directly, because the password property is not a dependency property, and a custom attached property is used to resolve the problem. Sample code download.

Additional properties for the WPF QuickStart series (attached property)