开发人员工具

AlignmentGrid XAML 控件

AlignmentGrid Control 可用于显示网格以帮助对齐控件。

可以使用 HorizontalStepVerticalStep 属性控制网格的步长。 可以使用 LineBrush 属性定义线条颜色。

<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
<Page x:Class="DeveloperToolsExperiment.Samples.AlignmentGridSample"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:developerTools="using:CommunityToolkit.WinUI.DeveloperTools"
      xmlns:local="using:DeveloperToolsExperiment.Samples"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d">

    <Grid>
        <developerTools:AlignmentGrid HorizontalStep="{x:Bind HorizontalStep, Mode=OneWay}"
                                      Opacity="{x:Bind OpacitySetting, Mode=OneWay}"
                                      VerticalStep="{x:Bind VerticalStep, Mode=OneWay}" />
    </Grid>
</Page>
// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

using CommunityToolkit.WinUI.DeveloperTools;

namespace DeveloperToolsExperiment.Samples;

[ToolkitSampleNumericOption("OpacitySetting", 0.2, 0.1, 1.0, 0.1, false, Title = "Opacity")]
[ToolkitSampleNumericOption("HorizontalStep", 20, 5, 100, 1, false, Title = "HorizontalStep")]
[ToolkitSampleNumericOption("VerticalStep", 20, 5, 100, 1, false, Title = "VerticalStep")]

[ToolkitSample(id: nameof(AlignmentGridSample), "AlignmentGrid", description: $"A sample for showing how to create and use a {nameof(AlignmentGrid)}.")]
public sealed partial class AlignmentGridSample : Page
{
    public AlignmentGridSample()
    {
        this.InitializeComponent();
    }
}

FocusTracker

FocusTracker Control 可用于显示有关当前获得焦点的 XAML 元素的信息(如有)。

FocusTracker 将显示有关当前获得焦点的 XAML 元素的以下信息(如果可用):

  • 名称
  • 类型
  • AutomationProperties.Name
  • 层次结构中包含名称的第一个父级的名称
<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
<Page x:Class="DeveloperToolsExperiment.Samples.FocusTrackerSample"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:developerTools="using:CommunityToolkit.WinUI.DeveloperTools"
      xmlns:local="using:DeveloperToolsExperiment.Samples"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d">

    <StackPanel Spacing="12">
        <TextBlock Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                   Style="{StaticResource CaptionTextBlockStyle}"
                   Text="Use the TAB key or mouse to set the focus on a UI element, and see the result in the Focus tracker below" />
        <developerTools:FocusTracker IsActive="{x:Bind IsActive, Mode=OneWay}" />
    </StackPanel>
</Page>
// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

using CommunityToolkit.WinUI.DeveloperTools;

namespace DeveloperToolsExperiment.Samples;

[ToolkitSampleBoolOption("IsActive", true, Title = "IsActive")]

[ToolkitSample(id: nameof(FocusTrackerSample), "FocusTracker", description: $"A sample for showing how to create and use a {nameof(FocusTracker)}.")]
public sealed partial class FocusTrackerSample : Page
{
    public FocusTrackerSample()
    {
        this.InitializeComponent();
    }
}