Improved FocusTracker

Added AlignmentGrid
2017-03-07 16:40:36 -08:00 · 2017-03-07 16:40:36 -08:00 · be1f240472
--- a/Microsoft.Toolkit.Uwp.DeveloperTools/AlignmentGrid/AlignmentGrid.cs
+++ b/Microsoft.Toolkit.Uwp.DeveloperTools/AlignmentGrid/AlignmentGrid.cs
@ -0,0 +1,132 @@
+// ******************************************************************
+// Copyright (c) Microsoft. All rights reserved.
+// This code is licensed under the MIT License (MIT).
+// THE CODE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+// INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH
+// THE CODE OR THE USE OR OTHER DEALINGS IN THE CODE.
+// ******************************************************************
+
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Media;
+using Windows.UI.Xaml.Shapes;
+
+namespace Microsoft.Toolkit.Uwp.DeveloperTools
+{
+    /// <summary>
+    /// AlignmentGrid is used to display a grid to help aligning controls
+    /// </summary>
+    public class AlignmentGrid: ContentControl
+    {
+        /// <summary>
+        /// Identifies the <see cref="LineBrush"/> dependency property.
+        /// </summary>
+        public static readonly DependencyProperty LineBrushProperty = DependencyProperty.Register(nameof(LineBrush), typeof(Brush), typeof(AlignmentGrid), new PropertyMetadata(null, OnPropertyChanged));
+
+        /// <summary>
+        /// Identifies the <see cref="HorizontalStep"/> dependency property.
+        /// </summary>
+        public static readonly DependencyProperty HorizontalStepProperty = DependencyProperty.Register(nameof(HorizontalStep), typeof(double), typeof(AlignmentGrid), new PropertyMetadata(20.0, OnPropertyChanged));
+
+        /// <summary>
+        /// Identifies the <see cref="VerticalStep"/> dependency property.
+        /// </summary>
+        public static readonly DependencyProperty VerticalStepProperty = DependencyProperty.Register(nameof(VerticalStep), typeof(double), typeof(AlignmentGrid), new PropertyMetadata(20.0, OnPropertyChanged));
+
+        private static void OnPropertyChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs e)
+        {
+            var alignmentGrid = dependencyObject as AlignmentGrid;
+
+            alignmentGrid?.Rebuild();
+        }
+
+        private readonly Canvas containerCanvas = new Canvas();
+
+        /// <summary>
+        /// Gets or sets the step to use horizontally.
+        /// </summary>
+        public Brush LineBrush
+        {
+            get { return (Brush)GetValue(LineBrushProperty); }
+            set { SetValue(LineBrushProperty, value); }
+        }
+
+        /// <summary>
+        /// Gets or sets the step to use horizontally.
+        /// </summary>
+        public double HorizontalStep
+        {
+            get { return (double)GetValue(HorizontalStepProperty); }
+            set { SetValue(HorizontalStepProperty, value); }
+        }
+
+        /// <summary>
+        /// Gets or sets the step to use horizontally.
+        /// </summary>
+        public double VerticalStep
+        {
+            get { return (double)GetValue(VerticalStepProperty); }
+            set { SetValue(VerticalStepProperty, value); }
+        }
+
+
+        /// <summary>
+        /// Initializes a new instance of the <see cref="AlignmentGrid"/> class.
+        /// </summary>
+        public AlignmentGrid()
+        {
+            SizeChanged += AlignmentGrid_SizeChanged;
+
+            IsHitTestVisible = false;
+
+            Opacity = 0.5;
+
+            HorizontalContentAlignment = HorizontalAlignment.Stretch;
+            VerticalContentAlignment = VerticalAlignment.Stretch;
+            Content = containerCanvas;
+        }
+
+        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);
+            }
+        }
+
+        private void AlignmentGrid_SizeChanged(object sender, SizeChangedEventArgs e)
+        {
+            Rebuild();
+        }
+    }
+}
--- a/Microsoft.Toolkit.Uwp.DeveloperTools/FocusTracker/FocusTracker.cs
+++ b/Microsoft.Toolkit.Uwp.DeveloperTools/FocusTracker/FocusTracker.cs
@ -0,0 +1,135 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Automation;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Controls.Primitives;
+using Windows.UI.Xaml.Input;
+using Windows.UI.Xaml.Media;
+using Windows.UI.Xaml.Shapes;
+
+namespace Microsoft.Toolkit.Uwp.DeveloperTools
+{
+    /// <summary>
+    /// FocusTracker can be used to display information about the current focused XAML element.
+    /// </summary>
+    [TemplatePart(Name = "ControlName", Type = typeof(TextBlock))]
+    [TemplatePart(Name = "ControlType", Type = typeof(TextBlock))]
+    [TemplatePart(Name = "ControlAutomationName", Type = typeof(TextBlock))]
+    [TemplatePart(Name = "ControlFirstParentWithName", Type = typeof(TextBlock))]
+    public class FocusTracker: Control
+    {
+        /// <summary>
+        /// Defines the <see cref="IsActive"/> dependency property.
+        /// </summary>
+        public static readonly DependencyProperty IsActiveProperty = DependencyProperty.Register(nameof(IsActive), typeof(bool), typeof(FocusTracker), new PropertyMetadata(false, OnIsActiveChanged));
+
+        private static void OnIsActiveChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            var focusTracker = d as FocusTracker;
+
+            if (e.NewValue != null && (bool) e.NewValue)
+            {
+                focusTracker?.Start();
+            }
+            else
+            {
+                focusTracker?.Stop();
+            }
+        }
+
+        private DispatcherTimer updateTimer;
+        private TextBlock controlName;
+        private TextBlock controlType;
+        private TextBlock controlAutomationName;
+        private TextBlock controlFirstParentWithName;
+
+        /// <summary>
+        /// Gets or sets a boolean indicating whether the tracker is running or not.
+        /// </summary>
+        public bool IsActive
+        {
+            get { return (bool) GetValue(IsActiveProperty); }
+            set
+            {
+                SetValue(IsActiveProperty, value);
+            }
+        }
+
+        /// <summary>
+        /// Initializes a new instance of the <see cref="FocusTracker"/> class.
+        /// </summary>
+        public FocusTracker()
+        {
+            DefaultStyleKey = typeof(FocusTracker);
+        }
+
+        private void Start()
+        {
+            if (updateTimer == null)
+            {
+                updateTimer = new DispatcherTimer();
+                updateTimer.Tick += UpdateTimer_Tick;
+            }
+            updateTimer.Start();
+        }
+
+        private void Stop()
+        {
+            updateTimer?.Stop();
+        }
+
+        /// <summary>
+        /// Update the visual state of the control when its template is changed.
+        /// </summary>
+        protected override void OnApplyTemplate()
+        {
+            controlName = GetTemplateChild("ControlName") as TextBlock;
+            controlType = GetTemplateChild("ControlType") as TextBlock;
+            controlAutomationName = GetTemplateChild("ControlAutomationName") as TextBlock;
+            controlFirstParentWithName = GetTemplateChild("ControlFirstParentWithName") as TextBlock;
+        }
+
+        private void UpdateTimer_Tick(object sender, object e)
+        {
+            var focusedControl = FocusManager.GetFocusedElement() as FrameworkElement;
+
+            if (focusedControl == null)
+            {
+                controlName.Text = string.Empty;
+                controlType.Text = string.Empty;
+                controlAutomationName.Text = string.Empty;
+                controlFirstParentWithName.Text = string.Empty;
+                return;
+            }
+
+            controlName.Text = focusedControl.Name;
+            controlType.Text = focusedControl.GetType().Name;
+            controlAutomationName.Text = AutomationProperties.GetName(focusedControl);
+
+            var parentWithName = FindVisualAscendantWithName(focusedControl);
+
+            controlFirstParentWithName.Text = parentWithName?.Name ?? string.Empty;
+        }
+
+        private FrameworkElement FindVisualAscendantWithName(FrameworkElement element)
+        {
+            var parent = VisualTreeHelper.GetParent(element) as FrameworkElement;
+
+            if (parent == null)
+            {
+                return null;
+            }
+
+            if (!string.IsNullOrEmpty(parent.Name))
+            {
+                return parent;
+            }
+
+            return FindVisualAscendantWithName(parent);
+        }
+    }
+}
--- a/Microsoft.Toolkit.Uwp.DeveloperTools/FocusTracker/FocusTracker.xaml
+++ b/Microsoft.Toolkit.Uwp.DeveloperTools/FocusTracker/FocusTracker.xaml
@ -1,69 +1,73 @@
-<UserControl
-    x:Class="Microsoft.Toolkit.Uwp.DeveloperTools.FocusTracker"
-    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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    mc:Ignorable="d"
-    IsTabStop="False"
-    d:DesignHeight="300"
-    d:DesignWidth="400">
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:developerTools="using:Microsoft.Toolkit.Uwp.DeveloperTools">

-    <Grid MinWidth="300">
-        <Border Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
-                BorderBrush="{ThemeResource ApplicationForegroundThemeBrush}"
-                BorderThickness="1"
-                />
-        <Grid Padding="10,10,10,5">
-            <Grid.RowDefinitions>
-                <RowDefinition Height="30"/>
-                <RowDefinition Height="30"/>
-                <RowDefinition Height="30"/>
-                <RowDefinition Height="30"/>
-                <RowDefinition Height="20"/>
-            </Grid.RowDefinitions>
-            <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="180"/>
-                <ColumnDefinition/>
-            </Grid.ColumnDefinitions>
-            <TextBlock Text="Name:"
-                       FontSize="14"
-                       Grid.Row="0"
-                       Grid.Column="0"/>
-            <TextBlock x:Name="ControlName"
-                       Grid.Row="0"
-                       Grid.Column="1"/>
+    <Style TargetType="developerTools:FocusTracker">
+        <Setter Property="MinWidth" Value="300"></Setter>
+        <Setter Property="Foreground" Value="{ThemeResource ApplicationForegroundThemeBrush}"></Setter>
+        <Setter Property="Background" Value="{ThemeResource ApplicationPageBackgroundThemeBrush}"></Setter>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate>
+                    <Grid>
+                        <Border Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding Foreground}"
+                            BorderThickness="1"
+                        />
+                        <Grid Padding="10,10,10,5">
+                            <Grid.RowDefinitions>
+                                <RowDefinition Height="30"/>
+                                <RowDefinition Height="30"/>
+                                <RowDefinition Height="30"/>
+                                <RowDefinition Height="30"/>
+                                <RowDefinition Height="20"/>
+                            </Grid.RowDefinitions>
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="180"/>
+                                <ColumnDefinition/>
+                            </Grid.ColumnDefinitions>
+                            <TextBlock Text="Name:"
+                                       FontSize="14"
+                                       Grid.Row="0"
+                                       Grid.Column="0"/>
+                            <TextBlock x:Name="ControlName"
+                                       Grid.Row="0"
+                                       Grid.Column="1"/>

-            <TextBlock Text="Type:"
-                       FontSize="14"
-                       Grid.Row="1"
-                       Grid.Column="0"/>
-            <TextBlock x:Name="ControlType"
-                       Grid.Row="1"
-                       Grid.Column="1"/>
+                            <TextBlock Text="Type:"
+                                       FontSize="14"
+                                       Grid.Row="1"
+                                       Grid.Column="0"/>
+                            <TextBlock x:Name="ControlType"
+                                       Grid.Row="1"
+                                       Grid.Column="1"/>

-            <TextBlock Text="Automation.Name:"
-                       FontSize="14"
-                       Grid.Row="2"
-                       Grid.Column="0"/>
-            <TextBlock x:Name="ControlAutomationName"
-                       Grid.Row="2"
-                       Grid.Column="1"/>
+                            <TextBlock Text="Automation.Name:"
+                                       FontSize="14"
+                                       Grid.Row="2"
+                                       Grid.Column="0"/>
+                            <TextBlock x:Name="ControlAutomationName"
+                                       Grid.Row="2"
+                                       Grid.Column="1"/>

-            <TextBlock Text="Parent with Name:"
-                       FontSize="14" 
-                       Grid.Row="3"
-                       Grid.Column="0"/>
-            <TextBlock x:Name="ControlFirstParentWithName"
-                       Grid.Row="3"
-                       Grid.Column="1"/>
-            
-            <TextBlock Text="FocusTracker"
-                       Opacity="0.5"
-                       FontSize="14"
-                       HorizontalAlignment="Center"
-                       Grid.Row="4"
-                       Grid.ColumnSpan="2"/>
-        </Grid>
-    </Grid>
-</UserControl>
+                            <TextBlock Text="Parent with Name:"
+                                       FontSize="14" 
+                                       Grid.Row="3"
+                                       Grid.Column="0"/>
+                            <TextBlock x:Name="ControlFirstParentWithName"
+                                       Grid.Row="3"
+                                       Grid.Column="1"/>
+
+                            <TextBlock Text="FocusTracker"
+                                       Opacity="0.5"
+                                       FontSize="14"
+                                       HorizontalAlignment="Center"
+                                       Grid.Row="4"
+                                       Grid.ColumnSpan="2"/>
+                        </Grid>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+</ResourceDictionary>
--- a/Microsoft.Toolkit.Uwp.DeveloperTools/FocusTracker/FocusTracker.xaml.cs
+++ b/Microsoft.Toolkit.Uwp.DeveloperTools/FocusTracker/FocusTracker.xaml.cs
@ -1,100 +0,0 @@
-// ******************************************************************
-// Copyright (c) Microsoft. All rights reserved.
-// This code is licensed under the MIT License (MIT).
-// THE CODE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
-// INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
-// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
-// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
-// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH
-// THE CODE OR THE USE OR OTHER DEALINGS IN THE CODE.
-// ******************************************************************
-
-using Windows.UI.Xaml;
-using Windows.UI.Xaml.Automation;
-using Windows.UI.Xaml.Input;
-using Windows.UI.Xaml.Media;
-
-namespace Microsoft.Toolkit.Uwp.DeveloperTools
-{
-    /// <summary>
-    /// The FocusTracker is used as to display information about the current focused element (if any).
-    /// </summary>
-    public sealed partial class FocusTracker
-    {
-        private readonly DispatcherTimer updateTimer;
-
-        /// <summary>
-        /// Initializes a new instance of the <see cref="FocusTracker"/> class.
-        /// </summary>
-        public FocusTracker()
-        {
-            this.InitializeComponent();
-
-            updateTimer = new DispatcherTimer();
-            updateTimer.Tick += UpdateTimer_Tick;
-        }
-
-        /// <summary>
-        /// Gets or sets a boolean indicating whehter the tracker is running or not.
-        /// </summary>
-        public bool IsRunning
-        {
-            get
-            {
-                return updateTimer.IsEnabled;
-            }
-
-            set
-            {
-                if (value)
-                {
-                    updateTimer.Start();
-                }
-                else
-                {
-                    updateTimer.Stop();
-                }
-            }
-        }
-
-        private void UpdateTimer_Tick(object sender, object e)
-        {
-            var focusedControl = FocusManager.GetFocusedElement() as FrameworkElement;
-
-            if (focusedControl == null)
-            {
-                ControlName.Text = string.Empty;
-                ControlType.Text = string.Empty;
-                ControlAutomationName.Text = string.Empty;
-                ControlFirstParentWithName.Text = string.Empty;
-                return;
-            }
-
-            ControlName.Text = focusedControl.Name;
-            ControlType.Text = focusedControl.GetType().Name;
-            ControlAutomationName.Text = AutomationProperties.GetName(focusedControl);
-
-            var parentWithName = FindVisualAscendantWithName(focusedControl);
-
-            ControlFirstParentWithName.Text = parentWithName?.Name ?? string.Empty;
-        }
-
-        private FrameworkElement FindVisualAscendantWithName(FrameworkElement element)
-        {
-            var parent = VisualTreeHelper.GetParent(element) as FrameworkElement;
-
-            if (parent == null)
-            {
-                return null;
-            }
-
-            if (!string.IsNullOrEmpty(parent.Name))
-            {
-                return parent;
-            }
-
-            return FindVisualAscendantWithName(parent);
-        }
-    }
-}
--- a/Microsoft.Toolkit.Uwp.DeveloperTools/Microsoft.Toolkit.Uwp.DeveloperTools.csproj
+++ b/Microsoft.Toolkit.Uwp.DeveloperTools/Microsoft.Toolkit.Uwp.DeveloperTools.csproj
@ -111,16 +111,20 @@
    <None Include="project.json" />
  </ItemGroup>
  <ItemGroup>
-    <Compile Include="FocusTracker\FocusTracker.xaml.cs">
-      <DependentUpon>FocusTracker.xaml</DependentUpon>
-    </Compile>
+    <Compile Include="AlignmentGrid\AlignmentGrid.cs" />
+    <Compile Include="FocusTracker\FocusTracker.cs" />
    <Compile Include="Properties\AssemblyInfo.cs" />
    <EmbeddedResource Include="Properties\Microsoft.Toolkit.Uwp.DeveloperTools.rd.xml" />
  </ItemGroup>
  <ItemGroup>
    <Page Include="FocusTracker\FocusTracker.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+    <Page Include="Themes\Generic.xaml">
      <Generator>MSBuild:Compile</Generator>
      <SubType>Designer</SubType>
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
    </Page>
  </ItemGroup>
  <PropertyGroup Condition=" '$(VisualStudioVersion)' == '' or '$(VisualStudioVersion)' &lt; '14.0' ">
--- a/Microsoft.Toolkit.Uwp.DeveloperTools/Themes/Generic.xaml
+++ b/Microsoft.Toolkit.Uwp.DeveloperTools/Themes/Generic.xaml
@ -0,0 +1,6 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.DeveloperTools/FocusTracker/FocusTracker.xaml" />
+    </ResourceDictionary.MergedDictionaries>
+</ResourceDictionary>
--- a/Microsoft.Toolkit.Uwp.SampleApp/Icons/DeveloperTools.png
+++ b/Microsoft.Toolkit.Uwp.SampleApp/Icons/DeveloperTools.png
--- a/Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj
+++ b/Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj
@ -226,6 +226,7 @@
    <Content Include="Assets\Wide310x150Logo.scale-400.png" />
    <Content Include="Icons\Animations.png" />
    <Content Include="Icons\About.png" />
+    <Content Include="Icons\DeveloperTools.png" />
    <Content Include="Icons\Helpers.png" />
    <Content Include="Icons\Foundation.png" />
    <Content Include="Icons\Layouts.png" />
@ -233,6 +234,7 @@
    <Content Include="Icons\Notifications.png" />
    <Content Include="Icons\Services.png" />
    <Content Include="SamplePages\AdvancedCollectionView\AdvancedCollectionView.png" />
+    <Content Include="SamplePages\FocusTracker\FocusTracker.png" />
    <Content Include="SamplePages\Analytics\Analytics.png" />
    <Content Include="SamplePages\Bing Service\BingCode.bind" />
    <Content Include="SamplePages\Bing Service\icon.png" />
@ -247,6 +249,7 @@
    <Content Include="SamplePages\Facebook Service\FacebookLogo.png" />
    <Content Include="SamplePages\Fade\FadeBehavior.png" />
    <Content Include="SamplePages\HamburgerMenu\HamburgerMenu.png" />
+    <Content Include="SamplePages\AlignmentGrid\AlignmentGrid.png" />
    <Content Include="SamplePages\HeaderedTextBlock\HeaderedTextBlock.png" />
    <Content Include="SamplePages\ImageCache\ImageEx.png" />
    <Content Include="SamplePages\ImageEx\ImageEx.png" />
@ -367,6 +370,8 @@
    <Content Include="SamplePages\MarkdownTextBlock\MarkdownTextBlockCode.bind" />
    <Content Include="SamplePages\OneDrive Service\OneDriveCode.bind" />
    <Content Include="SamplePages\Analytics\AnalyticsCode.bind" />
+    <Content Include="SamplePages\AlignmentGrid\AlignmentGridXaml.bind" />
+    <Content Include="SamplePages\FocusTracker\FocusTrackerXaml.bind" />
  </ItemGroup>
  <ItemGroup>
    <Compile Include="App.xaml.cs">
@ -384,6 +389,9 @@
    <Compile Include="SamplePages\AdvancedCollectionView\AdvancedCollectionViewPage.xaml.cs">
      <DependentUpon>AdvancedCollectionViewPage.xaml</DependentUpon>
    </Compile>
+    <Compile Include="SamplePages\FocusTracker\FocusTrackerPage.xaml.cs">
+      <DependentUpon>FocusTrackerPage.xaml</DependentUpon>
+    </Compile>
    <Compile Include="SamplePages\BackgroundTaskHelper\TestBackgroundTask.cs" />
    <Compile Include="SamplePages\ConnectionHelper\ConnectionHelperPage.xaml.cs">
      <DependentUpon>ConnectionHelperPage.xaml</DependentUpon>
@ -424,6 +432,9 @@
    <Compile Include="SamplePages\Blur\BlurBehaviorPage.xaml.cs">
      <DependentUpon>BlurBehaviorPage.xaml</DependentUpon>
    </Compile>
+    <Compile Include="SamplePages\AlignmentGrid\AlignmentGridPage.xaml.cs">
+      <DependentUpon>AlignmentGridPage.xaml</DependentUpon>
+    </Compile>
    <Compile Include="SamplePages\MarkdownTextBlock\MarkdownTextBlockPage.xaml.cs">
      <DependentUpon>MarkdownTextBlockPage.xaml</DependentUpon>
    </Compile>
@ -603,6 +614,10 @@
      <SubType>Designer</SubType>
      <Generator>MSBuild:Compile</Generator>
    </Page>
+    <Page Include="SamplePages\FocusTracker\FocusTrackerPage.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
    <Page Include="SamplePages\ConnectionHelper\ConnectionHelperPage.xaml">
      <Generator>MSBuild:Compile</Generator>
      <SubType>Designer</SubType>
@ -627,6 +642,10 @@
      <Generator>MSBuild:Compile</Generator>
      <SubType>Designer</SubType>
    </Page>
+    <Page Include="SamplePages\AlignmentGrid\AlignmentGridPage.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
    <Page Include="SamplePages\MarkdownTextBlock\MarkdownTextBlockPage.xaml">
      <SubType>Designer</SubType>
      <Generator>MSBuild:Compile</Generator>
--- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/AlignmentGrid/AlignmentGrid.png
+++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/AlignmentGrid/AlignmentGrid.png
--- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/AlignmentGrid/AlignmentGridPage.xaml
+++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/AlignmentGrid/AlignmentGridPage.xaml
@ -0,0 +1,17 @@
+<Page x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.AlignmentGridPage"
+      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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:developerTools="using:Microsoft.Toolkit.Uwp.DeveloperTools"
+      mc:Ignorable="d">
+
+    <Grid Background="{StaticResource Brush-Grey-05}">
+        <developerTools:AlignmentGrid
+                Opacity="1"
+                LineBrush="{Binding LineBrush.Value}"
+                HorizontalStep="{Binding HorizontalStep.Value}"
+                VerticalStep="{Binding VerticalStep.Value}"
+                />
+    </Grid>
+</Page>
--- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/AlignmentGrid/AlignmentGridPage.xaml.cs
+++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/AlignmentGrid/AlignmentGridPage.xaml.cs
@ -0,0 +1,26 @@
+// ******************************************************************
+// Copyright (c) Microsoft. All rights reserved.
+// This code is licensed under the MIT License (MIT).
+// THE CODE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+// INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH
+// THE CODE OR THE USE OR OTHER DEALINGS IN THE CODE.
+// ******************************************************************
+
+using Microsoft.Toolkit.Uwp.SampleApp.Models;
+
+using Windows.UI.Xaml.Navigation;
+
+namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages
+{
+    public sealed partial class AlignmentGridPage
+    {
+        public AlignmentGridPage()
+        {
+            InitializeComponent();
+        }
+    }
+}
--- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/AlignmentGrid/AlignmentGridXaml.bind
+++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/AlignmentGrid/AlignmentGridXaml.bind
@ -0,0 +1,17 @@
+<Page x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.AlignmentGridPage"
+      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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:developerTools="using:Microsoft.Toolkit.Uwp.DeveloperTools"
+      mc:Ignorable="d">
+
+  <Grid>
+    <developerTools:AlignmentGrid
+            Opacity="1"
+            LineBrush="@[LineBrush:Brush:Black]"
+            HorizontalStep="@[HorizontalStep:Slider:20:5-100]"
+            VerticalStep="@[VerticalStep:Slider:20:5-100]"
+                />
+  </Grid>
+</Page>
--- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/FocusTracker/FocusTracker.png
+++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/FocusTracker/FocusTracker.png
--- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/FocusTracker/FocusTrackerPage.xaml
+++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/FocusTracker/FocusTrackerPage.xaml
@ -0,0 +1,14 @@
+<Page x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.FocusTrackerPage"
+      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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:developerTools="using:Microsoft.Toolkit.Uwp.DeveloperTools"
+      mc:Ignorable="d">
+
+    <Grid Background="{StaticResource Brush-Grey-05}">
+        <developerTools:FocusTracker IsActive="{Binding IsActive.Value}" 
+                                     VerticalAlignment="Center" 
+                                     HorizontalAlignment="Center"/>
+    </Grid>
+</Page>
--- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/FocusTracker/FocusTrackerPage.xaml.cs
+++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/FocusTracker/FocusTrackerPage.xaml.cs
@ -0,0 +1,26 @@
+// ******************************************************************
+// Copyright (c) Microsoft. All rights reserved.
+// This code is licensed under the MIT License (MIT).
+// THE CODE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+// INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH
+// THE CODE OR THE USE OR OTHER DEALINGS IN THE CODE.
+// ******************************************************************
+
+using Microsoft.Toolkit.Uwp.SampleApp.Models;
+
+using Windows.UI.Xaml.Navigation;
+
+namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages
+{
+    public sealed partial class FocusTrackerPage
+    {
+        public FocusTrackerPage()
+        {
+            InitializeComponent();
+        }
+    }
+}
--- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/FocusTracker/FocusTrackerXaml.bind
+++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/FocusTracker/FocusTrackerXaml.bind
@ -0,0 +1,12 @@
+<Page x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.AlignmentGridPage"
+      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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:developerTools="using:Microsoft.Toolkit.Uwp.DeveloperTools"
+      mc:Ignorable="d">
+
+  <Grid>
+    <developerTools:FocusTracker IsActive="@[IsActive:Bool:True]"/>
+  </Grid>
+</Page>
--- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json
+++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json
@ -167,7 +167,7 @@
        "XamlCodeFile": "ExpanderXaml.bind",
        "Icon": "/SamplePages/Expander/Expander.png",
        "DocumentationUrl": "https://raw.githubusercontent.com/Microsoft/UWPCommunityToolkit/dev/docs/controls/Expander.md"
-      }, 
+      },
      {
        "Name": "TileControl",
        "Type": "TileControlPage",
@ -324,7 +324,7 @@
        "XamlCodeFile": "ParallaxPage.bind",
        "Icon": "/SamplePages/ParallaxService/Parallax.png",
        "DocumentationUrl": "https://raw.githubusercontent.com/Microsoft/UWPCommunityToolkit/dev/docs/animations/ParallaxService.md"
-      }, 
+      },
      {
        "Name": "ReorderGridAnimation",
        "Type": "ReorderGridPage",
@ -494,6 +494,30 @@
      }
    ]
  },
+  {
+    "Name": "Developer tools",
+    "Icon": "Icons/DeveloperTools.png",
+    "Samples": [
+      {
+        "Name": "AlignmentGrid",
+        "Type": "AlignmentGridPage",
+        "About": "AlignmentGrid is used to display a grid to help aligning controls.",
+        "CodeUrl": "https://github.com/Microsoft/UWPCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.DeveloperTools/AlignmentGrid",
+        "XamlCodeFile": "AlignmentGridXaml.bind",
+        "Icon": "/SamplePages/AlignmentGrid/AlignmentGrid.png",
+        "DocumentationUrl": "https://raw.githubusercontent.com/Microsoft/UWPCommunityToolkit/dev/docs/developerTools/AlignmentGrid.md"
+      },
+      {
+        "Name": "FocusTracker",
+        "Type": "FocusTrackerPage",
+        "About": "FocusTracker can be used to display information about the current focused XAML element.",
+        "CodeUrl": "https://github.com/Microsoft/UWPCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.DeveloperTools/FocusTracker",
+        "XamlCodeFile": "FocusTrackerXaml.bind",
+        "Icon": "/SamplePages/FocusTracker/FocusTracker.png",
+        "DocumentationUrl": "https://raw.githubusercontent.com/Microsoft/UWPCommunityToolkit/dev/docs/developerTools/FocusTracker.md"
+      }
+    ]
+  },
  {
    "Name": "More resources",
    "Icon": "Icons/More.png",
--- a/Microsoft.Toolkit.Uwp.SampleApp/Shell.xaml
+++ b/Microsoft.Toolkit.Uwp.SampleApp/Shell.xaml
@ -90,9 +90,9 @@
                <Frame x:Name="NavigationFrame" />
                <!--Uncomment this control to help you determine where the focus is.
                This could be useful when validating accessibility of your control-->
-                <developerTools:FocusTracker VerticalAlignment="Bottom" 
+                <!--<developerTools:FocusTracker VerticalAlignment="Bottom" 
                                             HorizontalAlignment="Center"
-                                             IsRunning="True"/>
+                                             IsRunning="True"/>-->
            </Grid>
            <Grid x:Name="InfoAreaGrid"
                  Background="{StaticResource Brush-Grey-04}">
--- a/docs/developerTools/AlignmentGrid.md
+++ b/docs/developerTools/AlignmentGrid.md
@ -0,0 +1,33 @@
+# AlignmentGrid XAML Control 
+
+The **AlignmentGrid Control** can be used to display a grid to help aligning controls.
+
+You can control grid's steps with `HorizontalStep` and `VerticalStep` properties.
+Line color can be defined with `LineBrush` property.
+
+## Syntax
+
+```xml
+
+<developerTools:AlignmentGrid
+                    Opacity="1"
+                    LineBrush="Black"
+                    HorizontalStep="20"
+                    VerticalStep="20"/>
+
+```
+
+## Example Image
+
+![AlignmentGrid image](../resources/images/DeveloperTools-Alignment.jpg "AlignmentGrid")
+
+## Requirements (Windows 10 Device Family)
+
+| [Device family](http://go.microsoft.com/fwlink/p/?LinkID=526370) | Universal, 10.0.10586.0 or higher |
+| --- | --- |
+| Namespace | Microsoft.Toolkit.Uwp.DeveloperTools |
+
+## API
+
+* [AlignmentGrid source code](https://github.com/Microsoft/UWPCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.DeveloperTools/AlignmentGrid)
+
--- a/docs/developerTools/FocusTracker.md
+++ b/docs/developerTools/FocusTracker.md
@ -2,7 +2,7 @@

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

-**FocusTracker** will display the following information (if not available an emptry string will be used)  about the current focused XAML element:
+**FocusTracker** will display the following information (when available) about the current focused XAML element:
 - Name
 - Type
 - AutomationProperties.Name
@ -12,7 +12,7 @@ The **FocusTracker Control** can be used to display information about the curren

 ```xml

-<developerTools:FocusTracker IsRunning="True"/>
+<developerTools:FocusTracker IsActive="True"/>

 ```