概述

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,宽度为控件实际宽度,位置居上为当前总步长;
  1. private void Rebuild()
  2. {
  3. containerCanvas.Children.Clear();
  4. var horizontalStep = HorizontalStep;
  5. var verticalStep = VerticalStep;
  6. var brush = LineBrush ?? (Brush)Application.Current.Resources["ApplicationForegroundThemeBrush"];
  7.  
  8. ; x < ActualWidth; x += horizontalStep)
  9. {
  10. var line = new Rectangle
  11. {
  12. Width = ,
  13. Height = ActualHeight,
  14. Fill = brush
  15. };
  16. Canvas.SetLeft(line, x);
  17.  
  18. containerCanvas.Children.Add(line);
  19. }
  20.  
  21. ; y < ActualHeight; y += verticalStep)
  22. {
  23. var line = new Rectangle
  24. {
  25. Width = ActualWidth,
  26. Height = ,
  27. Fill = brush
  28. };
  29. Canvas.SetTop(line, y);
  30.  
  31. containerCanvas.Children.Add(line);
  32. }
  33. }

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() 方法中停止它,并清空内容显示;

  1. private void Start()
  2. {
  3. if (updateTimer == null)
  4. {
  5. updateTimer = new DispatcherTimer();
  6. updateTimer.Tick += UpdateTimer_Tick;
  7. }
  8.  
  9. updateTimer.Start();
  10. }
  11.  
  12. private void Stop()
  13. {
  14. updateTimer?.Stop();
  15. ClearContent();
  16. }

来看一下 updateTimer 的 Tick 处理方法:

  • 使用 FocusManager 获取当前获得焦点的元素,清空上一次获取焦点的控件内容信息;
  • 分别获取 Name、Type、AutomationProperties.Name 和 First Parent 信息,这对于代码调试和自动化测试很有帮助;
  1. private void UpdateTimer_Tick(object sender, object e)
  2. {
  3. var focusedControl = FocusManager.GetFocusedElement() as FrameworkElement;
  4.  
  5. if (focusedControl == null)
  6. {
  7. ClearContent();
  8. return;
  9. }
  10.  
  11. if (controlName != null)
  12. {
  13. controlName.Text = focusedControl.Name;
  14. }
  15.  
  16. if (controlType != null)
  17. {
  18. controlType.Text = focusedControl.GetType().Name;
  19. }
  20.  
  21. if (controlAutomationName != null)
  22. {
  23. controlAutomationName.Text = AutomationProperties.GetName(focusedControl);
  24. }
  25.  
  26. if (controlFirstParentWithName != null)
  27. {
  28. var parentWithName = FindVisualAscendantWithName(focusedControl);
  29. controlFirstParentWithName.Text = parentWithName?.Name ?? string.Empty;
  30. }
  31. }

调用示例

1. AlignmentGrid

我们在 Grid 中放了一个 AlignmentGrid 控件,还有一个 TextBlock,做对比显示,效果如下图;

引申一下,我们可以修改 AlignmentGrid 绘制矩形的代码,AlignmentGrid 中定义了 AlignmentGrid 作为矩形的边框画刷,我们可以根据矩形的位置,绘制出左边到右边渐变的画刷,或者虚线的画刷;或者跨度更大一些,使用 ImageBrush 来作为父控件的九宫格显示等,相信大家会有更丰富的想象和应用场景;

  1. <Grid>
  2. <tools:AlignmentGrid LineBrush="Gray" HorizontalStep="40" VerticalStep="30" Opacity="1.0"/>
  3. <TextBlock Text="Hello World" FontSize="40" HorizontalAlignment="Center" VerticalAlignment="Center"/>
  4. </Grid>

2. FocusTracker

我们使用 FocusTracker 来跟踪对 TextBox 的聚焦事件,XAML 中设置的属性和下面运行显示中的信息一致;

  1. <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  2. <tools:FocusTracker IsActive="True" VerticalAlignment="Center" HorizontalAlignment="Center"/>
  3. <TextBox x:Name="testTB" Text="textblock for test" AutomationProperties.Name="textblock"
  4. HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,50,0,0"/>
  5. </Grid>

总结

到这里我们就把 UWP Community Toolkit 中的 DeveloperTools 的实现过程和简单的调用示例讲解完成了,希望这些工具对大家开发 UWP 应用有所帮助,如果大家有更好用的工具类,也欢迎大家给 UWPCommunityToolkit 做 PR,贡献自己的代码,欢迎大家多多交流,谢谢!

最后,再跟大家安利一下 UWPCommunityToolkit 的官方微博:https://weibo.com/u/6506046490大家可以通过微博关注最新动态。

衷心感谢 UWPCommunityToolkit 的作者们杰出的工作,Thank you so much, UWPCommunityToolkit authors!!!

New UWP Community Toolkit - DeveloperTools的更多相关文章

  1. New UWP Community Toolkit

    概述 UWP Community Toolkit 是一个 UWP App 自定义控件.应用服务和帮助方法的集合,能够很大程度的简化和指引开发者的开发工作,相信广大 UWPer 并不陌生. 下面是截取自 ...

  2. New UWP Community Toolkit - XAML Brushes

    概述 上一篇 New UWP Community Toolkit 文章中,我们对 V2.2.0 版本的重要更新做了简单回顾.接下来会针对每个重要更新,结合 SDK 源代码和调用代码详细讲解. 本篇我们 ...

  3. New UWP Community Toolkit - Markdown

    概述 前面 New UWP Community Toolkit 文章中,我们对 V2.2.0 版本的重要更新做了简单回顾,其中简单介绍了 MarkdownTextBlock 和 MarkdownDoc ...

  4. New UWP Community Toolkit - Staggered panel

    概述 前面 New UWP Community Toolkit 文章中,我们对 2.2.0 版本的重要更新做了简单回顾,其中简单介绍了 Staggered panel,本篇我们结合代码详细讲解  St ...

  5. New UWP Community Toolkit - Carousel

    概述 New UWP Community Toolkit  V2.2.0 的版本发布日志中提到了 Carousel 的调整,本篇我们结合代码详细讲解  Carousel 的实现. Carousel 是 ...

  6. New UWP Community Toolkit - RadialProgressBar

    概述 UWP Community Toolkit  中有一个圆形的进度条控件 - RadialProgressBar,本篇我们结合代码详细讲解  RadialProgressBar 的实现. Radi ...

  7. New UWP Community Toolkit - RadialGauge

    概述 New UWP Community Toolkit  V2.2.0 的版本发布日志中提到了 RadialGauge 的调整,本篇我们结合代码详细讲解  RadialGauge 的实现. Radi ...

  8. New UWP Community Toolkit - RangeSelector

    概述 前面 New UWP Community Toolkit 文章中,我们对 V2.2.0 版本的重要更新做了简单回顾,其中简单介绍了 RangeSelector,本篇我们结合代码详细讲解一下 Ra ...

  9. New UWP Community Toolkit - ImageEx

    概述 UWP Community Toolkit  中有一个图片的扩展控件 - ImageEx,本篇我们结合代码详细讲解  ImageEx 的实现. ImageEx 是一个图片的扩展控件,包括 Ima ...

随机推荐

  1. Injection of autowired dependencies failed

    error:org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'mainCo ...

  2. Java设计模式(二)抽象工厂模式

    一.场景描述 接<Java设计模式(一)工厂模式>https://www.cnblogs.com/mahongbiao/p/8618970.html 工厂模式有一缺点,就是破坏了类的封闭性 ...

  3. 数字不断递增 可控制js

    (function($){ $.fn.numberRock=function(options){ var defaults={ speed:, count: }; var opts=$.extend( ...

  4. ASP.NET Core Web 支付功能接入 微信-扫码支付篇

    这篇文章将介绍ASP.NET Core中使用 开源项目 Payment,实现接入微信-扫码支付及异步通知功能. 开发环境:Win 10 x64.VS2017 15.6.4..NET Core SDK ...

  5. 2017/11/25 2D变换

    2D变换 一.盒模型解析模式 1.box-sizing:盒模型解析模式 1)content-box:标准盒模型(和css2一样的计算) 宽度和高度之外绘制元素的内边距和边框 width,height外 ...

  6. AngularJS - 常用方法汇总

    1. 数组元素的常用方法: http://www.cnblogs.com/diaosizhang/p/3729078.html 2. js的强大的splice方法  http://www.jb51.n ...

  7. [Usaco 5.4] Telecowmunication

    Description 农夫约翰的奶牛们喜欢通过电邮保持联系,于是她们建立了一个奶牛电脑网络,以便互相交流.这些机器用如下的方式发送电邮:如果存在一个由c台电脑组成的序列a1,a2,...,a(c), ...

  8. shell 文本操作命令

    vi 编辑器中有三种状态模式  [vi 文件名(或路径+文件名)] 1.命令模式 2.输入模式 3.末行模式 三种模式间的相互转换 vi编辑器的启动与退出 直接进入编辑环境 $ vi 进入编辑环境并打 ...

  9. Mycat 分片规则详解--日期(天)分片

    实现方式:按照日期来分片 优点:使数据按照日期来进行分时存储 缺点:由于数据是连续的,所以该方案不能有效的利用资源 配置示例: <tableRule name="sharding-by ...

  10. ArrayList 源码分析

    ArrayList 源码分析 1. 结构   首先我们需要对 ArrayList 有一个大致的了解就从结构来看看吧. 1. 继承   该类继承自 AbstractList 这个比较好说 2. 实现 这 ...