概述
UWP Community Toolkit 中有一个开发者工具集 DeveloperTools，可以帮助开发者在开发过程中进行 UI 和功能的调试，本篇我们结合代码详细讲解 DeveloperTools 的实现。
DeveloperTools 中目前包括了两个工具：
- AlignmentGrid - 提供了 Grid 中的网格，开发者可以根据网格来检查控件对齐；除了开发过程中的辅助作用，开发者还可以使用它作为画板辅助线，日记应用的网格等 UI 显示；
- FocusTracker - 可以显示当前聚焦的 XAML 元素信息，包括 name，type，AutomationProperties.Name 和 first parent name；
来看一下官方示例中的截图：
Source: https://github.com/Microsoft/UWPCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.DeveloperTools
Doc: https://docs.microsoft.com/zh-cn/windows/uwpcommunitytoolkit/developer-tools/alignmentgrid
https://docs.microsoft.com/zh-cn/windows/uwpcommunitytoolkit/developer-tools/focustracker
Namespace: Microsoft.Toolkit.Uwp.DeveloperTools; Nuget: Microsoft.Toolkit.Uwp.DeveloperTools;
开发过程
代码分析
1. AlignmentGrid
AlignmentGrid 类继承自 ContentControl，定义的依赖属性如下：
- LineBrush - 网格线的颜色画刷
- HorizontalStep - 网格横向的步长，默认为 20.0
- VerticalStep - 网格纵向的步长，默认为 20.0，横向和纵向步长可以不相等
以上三个属性变化时，会触发 OnPropertyChanged(d, e)，和 AlignmentGrid_SizeChanged(s, e) 一样，主要处理逻辑在 Rebuild() 方法中，下面我们看看 Rebuild() 方法实现：
- 清空 containerCanvas，获取当前横向和纵向步长，如果 lineBrush 无效，则初始化为 ApplicationForegroundThemeBrush；
- 横向循环绘制矩形，循环步长是横向步长，总长度是控件实际宽度；绘制矩形宽度为 1，高度为控件实际高度，位置居左为当前总步长；
- 纵向循环绘制矩形，循环步长是纵向步长，总长度是控件实际高度；绘制矩形高度为 1，宽度为控件实际宽度，位置居上为当前总步长；
private void Rebuild() { containerCanvas.Children.Clear(); var horizontalStep = HorizontalStep; var verticalStep = VerticalStep; var brush = LineBrush ?? (Brush)Application.Current.Resources["ApplicationForegroundThemeBrush"]; for (double x = 0; x < ActualWidth; x += horizontalStep) { var line = new Rectangle { Width = 1, Height = ActualHeight, Fill = brush }; Canvas.SetLeft(line, x); containerCanvas.Children.Add(line); } for (double y = 0; y < ActualHeight; y += verticalStep) { var line = new Rectangle { Width = ActualWidth, Height = 1, Fill = brush }; Canvas.SetTop(line, y); containerCanvas.Children.Add(line); } }
2. FocusTracker
FocusTracker 包含了两个文件：
- FocusTracker.xaml - FocusTracker 的样式文件，主要定义了 FocusTracker 的显示信息，如上面控件介绍中所说的；
- FocusTracker.cs - 定义处理文件， 定义了 FocusTracker 的主要处理逻辑；
FocusTracker.cs
FocusTracker 类中定义了一个依赖属性 IsActive，属性变化时会触发 OnIsActiveChanged(d, e) 处理方法，IsActive == true 时，调用 Start() 方法；IsActive == false 时，调用 Stop() 方法；
我们看到，类中的主要处理是定义一个 DispatcherTimer，在 Start() 方法中实例化并启用它，Stop() 方法中停止它，并清空内容显示；
private void Start() { if (updateTimer == null
