How To Use FocusTracker Control In UWP

The FocusTracker Control can be used to display information about the currently focused XAML element. FocusTracker will display the following information (when available) about the current focused XAML element Name, Type, AutomationProperties.Name and name of the first parent in the hierarchy with a name.

FocusTracker control is from UWP Community Toolkit-Developer tools. The UWP Community Toolkit is a collection of helper functions, custom controls, developer tools and app services. It simplifies and demonstrates common developer tasks building UWP apps for Windows 10.

Reading this article, you can learn how to use FocusTracker Control in Universal Windows Apps development with XAML and Visual C#.

The following important tools are required for developing UWP,

1. Windows 10 (Recommended)
2. Microsoft Visual Studio 2017 (https://www.visualstudio.com/vs/whatsnew/ )
3. Windows Anniversary Update (10.0.14393.0) or higher is needed to support correctly this feature.

Step 1

Open Visual Studio 2017 -> Start -> New Project -> Select Windows Universal (under Visual C#) -> Blank App (Universal Windows) -> Give a suitable name for your App (UWPFocusTracker) -> OK.

 

After choosing the target and minimum platform version that your Windows Universal Application will support (Windows Anniversary Update (10.0.14393.0)), the Project creates App.xaml and MainPage.xaml.

 

Step 2

First, update the reference, Microsoft.NETCore.UniversalWindowsPlatform with the latest version, via Manage NuGet Packages

 

Step 3

Add the namespace and FocusTracker Control in Mainpage.xaml,

xmlns:developerTools="using:Microsoft.Toolkit.Uwp.DeveloperTools"

<developerTools:FocusTracker IsActive="True" Margin="0,0,-8,3"/>

Add the TextBlock, Button, Combobox, Checkbox, Textbox Controls and change the Name and Text Property for FocusTracker control test.

<TextBlock HorizontalAlignment="Left" Margin="90,220,0,0" Text="UWP FocusTracker Demo" TextWrapping="Wrap" VerticalAlignment="Top" FontWeight="Bold" FontSize="20" />
<Button x:Name="BTNFocusTracker" Content="Button" HorizontalAlignment="Left" Margin="72,404,0,0" VerticalAlignment="Top" Height="56" Width="185" RenderTransformOrigin="0.476,-3.214" />
<ComboBox x:Name="CMBFocusTracker" HorizontalAlignment="Left" Height="68" Margin="400,276,0,0" VerticalAlignment="Top" Width="204" RenderTransformOrigin="-1.725,1.765" />
<CheckBox x:Name="CHKFocusTracker" Content="CheckBox" HorizontalAlignment="Left" Margin="404,424,0,0" VerticalAlignment="Top" />
<TextBox x:Name="txtFocusTracker" HorizontalAlignment="Left" Margin="120,276,0,0" Text="TextBox" VerticalAlignment="Top" Height="52" Width="118" />

Note

Automatically, the following code will be generated in XAML code view when we are done in the design view.

<Page x:Class="UWPFocusTracker.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPFocusTracker" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:developerTools="using:Microsoft.Toolkit.Uwp.DeveloperTools" mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <developerTools:FocusTracker IsActive="True" Margin="0,0,-8,3" />
        <TextBlock HorizontalAlignment="Left" Margin="90,220,0,0" Text="UWP FocusTracker Demo" TextWrapping="Wrap" VerticalAlignment="Top" FontWeight="Bold" FontSize="20" />
        <Button x:Name="BTNFocusTracker" Content="Button" HorizontalAlignment="Left" Margin="72,404,0,0" VerticalAlignment="Top" Height="56" Width="185" RenderTransformOrigin="0.476,-3.214" />
        <ComboBox x:Name="CMBFocusTracker" HorizontalAlignment="Left" Height="68" Margin="400,276,0,0" VerticalAlignment="Top" Width="204" RenderTransformOrigin="-1.725,1.765" />
        <CheckBox x:Name="CHKFocusTracker" Content="CheckBox" HorizontalAlignment="Left" Margin="404,424,0,0" VerticalAlignment="Top" />
        <TextBox x:Name="txtFocusTracker" HorizontalAlignment="Left" Margin="120,276,0,0" Text="TextBox" VerticalAlignment="Top" Height="52" Width="118" /> </Grid>
</Page>

Step 4

Deploy your app on Local Machine. The output of the UWPFocusTracker will be something like below.

While Focusing the TextBox,

 

While Focusing the ComboBox.

 

While Focusing the Button Control.

While Focusing the CheckBox.

 

While focusing the ToggleButtons in the default control in the output window.

 

 

 
Summary

Now, you have successfully tested FocusTracker control in XAML and UWP environment using Visual Studio 2017.