[UWP]附加属性2：实现一个Canvas

5. 附加属性实践：自定义Canvas

附加属性在UWP中是一个十分重要的组成部分，很多功能都依赖于附加属性实现，典型的例子是常用的Grid和Canvas。通常附加属性有三个使用场景：插入属性、触发行为、当做缓存。可以参考以下提供的MyCanvas示例理解这三点。

5.1 插入属性

这里实现的MyCanvas继承自Panel，是一个十分简单的类（作为示例并没有十分严格的验证等代码，所以只有几十行代码），它实现了和Canvas类似的布局并且提供了Left和Right两个附加属性。使用方式如下：

<local:MyCanvas>
<Rectangle local:MyCanvas.Left="50"
local:MyCanvas.Top="50"
Height="100"
Width="100"
Fill="Green" />
</local:MyCanvas>

Panel最核心的代码是ArrangeOverride，简单来说，它负责定位Children中的所有元素。MyCanvas读取子元素的定位信息MyCanvas.Left和MyCanvas.Top后对其进行定位，子元素自身并没有这两个属性，只有通过附加属性插入。

public static double GetLeft(DependencyObject obj)
{
return (double)obj.GetValue(LeftProperty);
}

public static void SetLeft(DependencyObject obj, double value)
{
obj.SetValue(LeftProperty, value);
}

public static readonly DependencyProperty LeftProperty =
DependencyProperty.RegisterAttached("Left", typeof(double), typeof(MyCanvas), new PropertyMetadata(0d));

public static double GetTop(DependencyObject obj)
{
return (double)obj.GetValue(TopProperty);
}
public static void SetTop(DependencyObject obj, double value)
{
obj.SetValue(TopProperty, value);
}

public static readonly DependencyProperty TopProperty =
DependencyProperty.RegisterAttached("Top", typeof(double), typeof(MyCanvas), new PropertyMetadata(0d));

protected override Size ArrangeOverride(Size arrangeSize)
{
foreach (UIElement child in Children)
{
double left = GetLeft(child);
double top = GetTop(child);
child.Arrange(new Rect(new Point(left, top), child.DesiredSize));
}
return arrangeSize;
}

5.2 触发行为

ArrangeOverride是MyCanvas被加载到VisualTree上后被调用的，想要监视MyCanvas.Left或MyCanvas.Top属性并在每次更改后触发ArrangeOverride更改布局，可以在这两个属性的PropertyMetadata中添加PropertyChangedCallback，代码如下：

public static readonly DependencyProperty TopProperty =
DependencyProperty.RegisterAttached("Top", typeof(double), typeof(MyCanvas), new PropertyMetadata(0d, OnLeftChanged));

private static void OnLeftChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
{
double oldValue = (double)args.OldValue;
double newValue = (double)args.NewValue;
if (oldValue == newValue)
return;

var parent = VisualTreeHelper.GetParent(obj) as MyCanvas;
if (parent != null)
parent.InvalidateArrange();
}

当Left改变时调用OnLeftChanged，这里DependencyObject obj就是被附加了Left属性的子元素。通过 VisualTreeHelper.GetParent找到它的父元素，调用父元素的InvalidateArrange再次触发ArrangeOverride函数。

5.3 当做缓存

有时我会很偷懒地把附加属性当做缓存来用。譬如在上面的代码中，假设VisualTreeHelper.GetParent是一个很耗时的操作（只是假设），我会把parent放到缓存里面，而这个缓存还是用附加属性实现的。

private static void OnLeftChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
{
double oldValue = (double)args.OldValue;
double newValue = (double)args.NewValue;
if (oldValue == newValue)
return;

var parent = GetCanvasParent(obj);
if (parent == null)
{
parent = VisualTreeHelper.GetParent(obj) as MyCanvas;
SetCanvasParent(obj, parent);
}
if (parent != null)
parent.InvalidateArrange();
}

注意: 实际上VisualTreeHelper.GetParent函数并没有十分耗时，所以这里是没必要这样写的。

5.4 完整的MyCanvas代码

public class MyCanvas : Panel
{
/// <summary>
//  从指定元素获取 Left 依赖项属性的值。
/// </summary>
/// <param name="obj">The element from which the property value is read.</param>
/// <returns>Left 依赖项属性的值</returns>
public static double GetLeft(DependencyObject obj)
{
return (double)obj.GetValue(LeftProperty);
}

/// <summary>
/// 将 Left 依赖项属性的值设置为指定元素。
/// </summary>
/// <param name="obj">The element on which to set the property value.</param>
/// <param name="value">The property value to set.</param>
public static void SetLeft(DependencyObject obj, double value)
{
obj.SetValue(LeftProperty, value);
}

/// <summary>
/// 标识 Left 依赖项属性。
/// </summary>
public static readonly DependencyProperty LeftProperty =
DependencyProperty.RegisterAttached("Left", typeof(double), typeof(MyCanvas), new PropertyMetadata(0d, OnPositionChanged));

/// <summary>
//  从指定元素获取 Top 依赖项属性的值。
/// </summary>
/// <param name="obj">The element from which the property value is read.</param>
/// &
d457
lt;returns>Top 依赖项属性的值</returns>
public static double GetTop(DependencyObject obj)
{
return (double)obj.GetValue(TopProperty);
}

/// <summary>
/// 将 Top 依赖项属性的值设置为指定元素。
/// </summary>
/// <param name="obj">The element on which to set the property value.</param>
/// <param name="value">The property value to set.</param>
public static void SetTop(DependencyObject obj, double value)
{
obj.SetValue(TopProperty, value);
}

/// <summary>
/// 标识 Top 依赖项属性。
/// </summary>
public static readonly DependencyProperty TopProperty =
DependencyProperty.RegisterAttached("Top", typeof(double), typeof(MyCanvas), new PropertyMetadata(0d, OnPositionChanged));

/// <summary>
//  从指定元素获取 CanvasParent 依赖项属性的值。
/// </summary>
/// <param name="obj">The element from which the property value is read.</param>
/// <returns>CanvasParent 依赖项属性的值</returns>
public static MyCanvas GetCanvasParent(DependencyObject obj)
{
return (MyCanvas)obj.GetValue(CanvasParentProperty);
}

/// <summary>
/// 将 CanvasParent 依赖项属性的值设置为指定元素。
/// </summary>
/// <param name="obj">The element on which to set the property value.</param>
/// <param name="value">The property value to set.</param>
public static void SetCanvasParent(DependencyObject obj, MyCanvas value)
{
obj.SetValue(CanvasParentProperty, value);
}

/// <summary>
/// 标识 CanvasParent 依赖项属性。
/// </summary>
public static readonly DependencyProperty CanvasParentProperty =
DependencyProperty.RegisterAttached("CanvasParent", typeof(MyCanvas), typeof(MyCanvas), new PropertyMetadata(null));

private static void OnPositionChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
{
double oldValue = (double)args.OldValue;
double newValue = (double)args.NewValue;
if (oldValue == newValue)
return;

var parent = VisualTreeHelper.GetParent(obj) as MyCanvas;
if (parent != null)
parent.InvalidateArrange();
}

protected override Size ArrangeOverride(Size arrangeSize)
{
foreach (UIElement child in Children)
{
double left = GetLeft(child);
double top = GetTop(child);
child.Arrange(new Rect(new Point(left, top), child.DesiredSize));
}
return arrangeSize;
}

protected override Size MeasureOverride(Size constraint)
{
Size childConstraint = new Size(Double.PositiveInfinity, Double.PositiveInfinity);

foreach (UIElement child in Children)
{
if (child == null) { continue; }
child.Measure(childConstraint);
}
return new Size();
}
}

这里的代码参考了WPF中的Canvas，有兴趣可以看看它的源码：Canvas

6. 内存回收

前面提过，依赖属性的值是以所依赖的对象及属性标识作为Key存放到HashTable中，附加属性作为依赖属性的一种特殊形式它的实现也是这样。既然这个HashTable一直存在，会不会作为Key的依赖对象也被迫存活，没有被回收？假设真是这样的话，设置了Grid.Row、Canvas.Left等属性的所有对象都被迫存活在内存中？

实际上并不需要担心这个问题，微软提供了名为ConditionalWeakTable的类并使用这个类实现依赖属性机制，保证了依赖属性的内存回收。

参考这段代码：

public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
Loaded += MainPage_Loaded;
var button = new MyButton();
Test test = new Test();
button.SetValue(Test.AttachedObjectProperty, test);
this.LayoutRoot.Children.Add(button);
}

private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
LayoutRoot.Children.Clear();
Task.Factory.StartNew(async () =>
{
while (true)
{
await Task.Delay(TimeSpan.FromSeconds(1));
GC.Collect();
}
});
}
}

public class MyButton : Button
{
~MyButton()
{
Debug.WriteLine(DateTime.Now.ToString("HH:mm:ss fff:") + "MyButton Finalize");
}
}

public class Test : DependencyObject
{
/// <summary>
//  从指定元素获取 AttachedObject 依赖项属性的值。
/// </summary>
/// <param name="obj">The element from which the property value is read.</param>
/// <returns>AttachedObject 依赖项属性的值</returns>
public static Test GetAttachedObject(DependencyObject obj)
{
return (Test)obj.GetValue(AttachedObjectProperty);
}

/// <summary>
/// 将 AttachedObject 依赖项属性的值设置为指定元素。
/// </summary>
/// <param name="obj">The element on which to set the property value.</param>
/// <param name="value">The property value to set.</param>
public static void SetAttachedObject(DependencyObject obj, Test value)
{
obj.SetValue(AttachedObjectProperty, value);
}

/// <summary>
/// 标识 AttachedObject 依赖项属性。
/// </summary>
public static readonly DependencyProperty AttachedObjectProperty =
DependencyProperty.RegisterAttached("AttachedObject", typeof(Test), typeof(Test), new PropertyMetadata(null));

~Test()
{
Debug.WriteLine(DateTime.Now.ToString("HH:mm:ss fff:") + "Test Finalize");
}
}

运行后输出:

02:06:14 741:MyButton Finalize

02:06:14 747:Test Finalize

可以看出在MyButton及附加的Test对象都被确实被回收了。

7. 参考

附加属性概述

自定义附加属性

Silverlight附加属性概述

Silverlight自定义的附加属性