首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >New UWP Community Toolkit - DeveloperTools

New UWP Community Toolkit - DeveloperTools

作者头像
Shao Meng
发布2018-04-28 11:22:07
8100
发布2018-04-28 11:22:07
举报
文章被收录于专栏:Windows CommunityWindows Community

概述

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!!!

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-04-08 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CLI 工具
云开发 CLI 工具(Cloudbase CLI Devtools,CCLID)是云开发官方指定的 CLI 工具,可以帮助开发者快速构建 Serverless 应用。CLI 工具提供能力包括文件储存的管理、云函数的部署、模板项目的创建、HTTP Service、静态网站托管等,您可以专注于编码,无需在平台中切换各类配置。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档