Developer Tools

AlignmentGrid XAML Control

The AlignmentGrid Control can be used to display a grid to help with aligning controls.

You can control the grid's steps with HorizontalStep and VerticalStep properties. Line color can be defined with LineBrush property.

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

The FocusTracker Control can be used to display information about the current focused XAML element (if any).

FocusTracker will display the following information (when available) about the current focused XAML element:

• Name
• Type
• AutomationProperties.Name
• Name of the first parent in hierarchy with a 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();
    }
}