Notes about WPF decorators

About decorator

See these articles for details

 

Detailed description of adorner Layer

Http://www.cnblogs.com/nankezhishi/archive/2010/07/10/adornerlayer.html

WPF Study Notes 11: adorner)

Http://www.cnblogs.com/jacksonyin/archive/2008/04/28/1174393.html

[WPF] sorting by clicking a column header in listview

Http://www.cnblogs.com/nankezhishi/archive/2009/12/04/sortlistview.html

WPF custom controls-decorator

Http://www.cnblogs.com/Curry/archive/2009/09/16/WPFDecorator.html

Decorator Overview

Http://msdn.microsoft.com/zh-cn/library/ms743737.aspx

Msdn example

Http://archive.msdn.microsoft.com/wpfsamples inResizingadorner sample

WPF: sticky notes ListBox

Http://www.codeproject.com/KB/WPF/StickyNotes.aspx

WPF provides a basic framework for decorative visual elements. The following table lists the main types of decoration objects and their usage.

Decorator	Provided in a single child element (such Border Or viewbox.
Adorner	An abstract base class that inherits the implementations of all specific decorators.
Adornerlayer	A class that represents the presentation layer of the decorator of one or more decorative elements.
Adornerdecorator	A class that associates the modifier layer with the element set.

Decorator

The custom decorator is as follows:

 

  public class SimpleDecorator : Decorator    {        protected override void OnRender(System.Windows.Media.DrawingContext drawingContext)        {            drawingContext.DrawEllipse(Brushes.Red, new Pen(Brushes.Green, .5), new Point(0, 0), 5, 5);            drawingContext.DrawEllipse(Brushes.Red, new Pen(Brushes.Green, .5), new Point(Child.RenderSize.Width, 0), 5, 5);            drawingContext.DrawEllipse(Brushes.Red, new Pen(Brushes.Green, .5), new Point(0, Child.RenderSize.Height), 5, 5);            drawingContext.DrawEllipse(Brushes.Red, new Pen(Brushes.Green, .5), new Point(Child.RenderSize.Width, Child.RenderSize.Height), 5, 5);        }    }

 

Draw four red circles around the element.

The usage is similar to border:

<Local: simpledecorator margin = "249,212,154, 69" X: Name = "xpand" horizontalalignment = "stretch" verticalignment = "stretch">

<Rectangle fill = "green"/>

</Local: simpledecorator>

 

Adornerlayer

A layer used to hold the decorator. The level zindex has the highest link and is always at the top of the decorative element. zindex cannot be modified.

Represents a surface for rendering adorners. indicates the drawing used to present the decorator.

This example shows how to programmatically
Bind an adorner to a specified uielement.

To bind an adorner to a special uielement, follow these steps:

1. CallStaticMethod getadornerlayer
   To getAdornerlayerObject for the uielement
   Be adorned. getadornerlayer
   Walks up the visual tree, starting at the specifiedUielement, And returns the first
   Adorner layer it finds. (If NO adorner layers are found, the method
   Returns NULL .)
2. Call the Add Method
   To bind the adorner to the targetUielement.

The following example binds
Simplecircleadorner (shown above) to a textbox namedMytextbox.

 

 
Myadornerlayer = adornerlayer. getadornerlayer (mytextbox)

 
Myadornerlayer. Add (New simplecircleadorner (mytextbox ))

 

Generally, the child element and the adornerlayer of the parent element are the same. For details, see the first one in the reference document.

Adornerdecorator

The link between the decorator layer and the elements to be decorated. Each window has this interface, which contains the decorator layer adornerlayer. For example, the style of the window is as follows:

 

<Style x:Key="{x:Type Window}"       TargetType="{x:Type Window}">  <Setter Property="SnapsToDevicePixels"          Value="true" />  <Setter Property="Template">    <Setter.Value>      <ControlTemplate TargetType="{x:Type Window}">        <Grid>          <Grid.Background>            <SolidColorBrush Color="{DynamicResource WindowColor}"/>          </Grid.Background>          <AdornerDecorator>             <ContentPresenter />          </AdornerDecorator>          <ResizeGrip x:Name="WindowResizeGrip"                      HorizontalAlignment="Right"                      VerticalAlignment="Bottom"                      Visibility="Collapsed"                      IsTabStop="false" />        </Grid>        <ControlTemplate.Triggers>          <Trigger Property="ResizeMode"                   Value="CanResizeWithGrip">            <Setter TargetName="WindowResizeGrip"                    Property="Visibility"                    Value="Visible" />          </Trigger>        </ControlTemplate.Triggers>      </ControlTemplate>    </Setter.Value>  </Setter></Style>

Adorner

The most classic decorator is equivalent to a tape, where you want to paste it.

If the decoration item must be at the topmost level, use adorner. If not, consider decorator.

It may be possible to encapsulate the decorator and the decorated element as a control, such as reflection and elements, but one problem is that if the element height is 50, the reflection height is 50, the height of the encapsulated control is 100, and the layout is 100.

If you use a decorator, the height of the reflection does not need to be considered, because the reflection is in the air, and the layout should be 50.

Here is a decoration code that generates reflection, as follows:

 

Public class reflectoradorner: adorner {rectangle REC; visualcollection visualchildren; Public reflectoradorner (uielement adnoredelement): Base (adnoredelement) {rec = new rectangle (); visualchildren = new visualcollection (this ); addreflection (adnoredelement);} void addreflection (uielement element) {// rectangle rec that produces reflection. rendertransformorigin = new point (. 5 ,. 5); Rec. margin = New thickness (0, 1, 0, 0); visualbrush brush = new visualbrush (element) {stretch = stretch. fill, alignmenty = alignmenty. bottom}; Rec. fill = brush; lineargradientbrush linerbrush = new lineargradientbrush () {startpoint = new point (. 5, 1), endpoint = new point (0.5, 0)}; linerbrush. gradientstops. add (New gradientstop () {color = colors. black, offset = 0.124}); linerbrush. gradientstops. add (New gradientstop () {col OR = color. fromargb (0,255,255,255), offset = 1}); Rec. opacitymask = linerbrush; Rec. rendertransform = new scaletransform () {scalex = 1, scaley =-1}; visualchildren. add (REC);} public void hiddenreflector () {rec. visibility = rec. visibility = visibility. hidden? Visibility. visible: visibility. hidden;} protected override int visualchildrencount {get {return 1 ;}} protected override visual getvisualchild (INT index) {return REC;} protected override size arrangeoverride (size finalsize) {rec. width = This. desiredsize. width; Rec. height = This. desiredsize. height; Rec. arrange (New rect (0, this. desiredsize. height, this. desiredsize. width, this. desiredsize. height); Return base. arrangeoverride (finalsize );}}

The call is as follows:

 

 <Grid x:Name="gridMain" Background="Black">        <Image Source="cat.png" Width="60" Height="60" x:Name="img" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="49,18,0,0" />    </Grid>

 

 

public Window2()        {            InitializeComponent();            Loaded += new RoutedEventHandler(Window2_Loaded);        }         void Window2_Loaded(object sender, RoutedEventArgs e)        {            AdornerLayer layer = AdornerLayer.GetAdornerLayer(gridMain);            layer.Add(new ReflectorAdorner(img));        } 

As follows: