Strumenti di sviluppo

Controllo XAML AlignmentGrid

Può AlignmentGrid Control essere utilizzato per visualizzare una griglia per facilitare l'allineamento dei controlli.

È possibile controllare gli incrementi della griglia con le proprietà HorizontalStep e VerticalStep. Il colore della linea può essere definito con LineBrush la proprietà .

<!--  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 può essere usato per visualizzare informazioni sull'elemento XAML attualmente attivo, se presente.

FocusTracker mostrerà le seguenti informazioni (se disponibili) sull'elemento XAML attualmente attivo:

  • Nome
  • Tipo
  • AutomationProperties.Name
  • Nome del primo genitore nella gerarchia che ha un nome
<!--  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();
    }
}