New UWP Community Toolkit - DeveloperTools

概述

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)
    {
        updateTimer = new DispatcherTimer();
        updateTimer.Tick += UpdateTimer_Tick;
    }

    updateTimer.Start();
}

private void Stop()
{
    updateTimer?.Stop();
    ClearContent();
}

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

  • 使用 FocusManager 获取当前获得焦点的元素,清空上一次获取焦点的控件内容信息;
  • 分别获取 Name、Type、AutomationProperties.Name 和 First Parent 信息,这对于代码调试和自动化测试很有帮助;
private void UpdateTimer_Tick(object sender, object e)
{
    var focusedControl = FocusManager.GetFocusedElement() as FrameworkElement;

    if (focusedControl == null)
    {
        ClearContent();
        return;
    }

    if (controlName != null)
    {
        controlName.Text = focusedControl.Name;
    }

    if (controlType != null)
    {
        controlType.Text = focusedControl.GetType().Name;
    }

    if (controlAutomationName != null)
    {
        controlAutomationName.Text = AutomationProperties.GetName(focusedControl);
    }

    if (controlFirstParentWithName != null)
    {
        var parentWithName = FindVisualAscendantWithName(focusedControl);
        controlFirstParentWithName.Text = parentWithName?.Name ?? string.Empty;
    }
}

 

调用示例

1. AlignmentGrid

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

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

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

2. FocusTracker

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

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

 

总结

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

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

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

 

posted @ 2018-04-08 08:46 shaomeng 阅读(...) 评论(...) 编辑 收藏