From c9cca6b8d4f8d238fa3dc5a7deec12f63862959d Mon Sep 17 00:00:00 2001
From: Dean Chalk <dean.chalk@bp.com>
Date: Sat, 4 Apr 2020 11:41:07 +0100
Subject: [PATCH] #3210 Add GazeInput.SetCursorBrush method to change the
 default GazeCursor color

---
 .../GazeInteraction/GazeInteractionPage.xaml  | 427 ++++++++++++++----
 .../GazeInteractionPage.xaml.cs               |  37 +-
 2 files changed, 366 insertions(+), 98 deletions(-)

diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/GazeInteraction/GazeInteractionPage.xaml b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/GazeInteraction/GazeInteractionPage.xaml
index 799645233ae..695b5a69b95 100644
--- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/GazeInteraction/GazeInteractionPage.xaml
+++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/GazeInteraction/GazeInteractionPage.xaml
@@ -1,143 +1,376 @@
-<Page
-    x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.GazeInteractionPage"
-    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:Microsoft.Toolkit.Uwp.SampleApp.Common"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:g="using:Microsoft.Toolkit.Uwp.Input.GazeInteraction"
-    g:GazeInput.Interaction="Enabled"
-    g:GazeInput.IsCursorVisible="True"
-    g:GazeInput.CursorRadius="20"
-    g:GazeInput.IsSwitchEnabled="False"
-    mc:Ignorable="d">
+<Page x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.GazeInteractionPage"
+      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:g="using:Microsoft.Toolkit.Uwp.Input.GazeInteraction"
+      xmlns:local="using:Microsoft.Toolkit.Uwp.SampleApp.Common"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      g:GazeInput.CursorRadius="20"
+      g:GazeInput.Interaction="Enabled"
+      g:GazeInput.IsCursorVisible="True"
+      g:GazeInput.IsSwitchEnabled="False"
+      mc:Ignorable="d">
     <Page.Resources>
-        <local:TimeSpanConverter x:Key="ConvertTimeToMilliSecs"/>
+        <local:TimeSpanConverter x:Key="ConvertTimeToMilliSecs" />
     </Page.Resources>
 
     <Grid>
         <Grid.RowDefinitions>
-            <RowDefinition Height="2*" ></RowDefinition>
-            <RowDefinition Height="1*" ></RowDefinition>
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="2*" />
+            <RowDefinition Height="1*" />
         </Grid.RowDefinitions>
 
-        <Grid x:Name="XamlRoot"/>
+        <StackPanel Margin="28,4"
+                    Orientation="Horizontal">
+            <TextBlock Margin="0,0,8,0"
+                       FontSize="22"
+                       Text="Cursor Color" />
+            <Rectangle Width="80"
+                       Height="32"
+                       Margin="0,0,8,0">
+                <Rectangle.Fill>
+                    <SolidColorBrush Color="{Binding ElementName=ColorPicker, Path=Color}" />
+                </Rectangle.Fill>
+            </Rectangle>
+            <ToggleButton x:Name="ColorToggle"
+                          Content="Open/Close Color Selector" />
+            <Popup IsOpen="{Binding ElementName=ColorToggle, Path=IsChecked}">
+                <Grid Background="{ThemeResource SystemControlBackgroundChromeMediumBrush}">
+                    <ColorPicker x:Name="ColorPicker"
+                                 Margin="32"
+                                 Color="{x:Bind SelectedColor, Mode=TwoWay}" />
+                </Grid>
+            </Popup>
+        </StackPanel>
 
-        <Grid Grid.Row="1" >
+        <Grid x:Name="XamlRoot"
+              Grid.Row="1" />
+
+        <Grid Grid.Row="2">
             <Grid.RowDefinitions>
-                <RowDefinition Height="50" ></RowDefinition>
-                <RowDefinition Height="50" ></RowDefinition>
-                <RowDefinition Height="50" ></RowDefinition>
-                <RowDefinition Height="1*" ></RowDefinition>
+                <RowDefinition Height="50" />
+                <RowDefinition Height="50" />
+                <RowDefinition Height="50" />
+                <RowDefinition Height="1*" />
             </Grid.RowDefinitions>
             <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="1*"/>
-                <ColumnDefinition Width="Auto"/>
-                <ColumnDefinition Width="Auto"/>
-                <ColumnDefinition Width="Auto"/>
-                <ColumnDefinition Width="Auto"/>
-                <ColumnDefinition Width="Auto"/>
-                <ColumnDefinition Width="Auto"/>
-                <ColumnDefinition Width="1*"/>
+                <ColumnDefinition Width="1*" />
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition Width="1*" />
             </Grid.ColumnDefinitions>
 
-            <Grid BorderBrush="{ThemeResource Brush-Alt}" HorizontalAlignment="Stretch" Height="50" VerticalAlignment="Stretch" Width="100" Grid.Column="1" Grid.Row="1">
-                <Rectangle x:Name="EnterRec" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="#FFB6EC89" Visibility="Collapsed"/>
-                <TextBlock Text="ENTER" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center" />
+            <Grid Grid.Row="1"
+                  Grid.Column="1"
+                  Width="100"
+                  Height="50"
+                  HorizontalAlignment="Stretch"
+                  VerticalAlignment="Stretch"
+                  BorderBrush="{ThemeResource Brush-Alt}">
+                <Rectangle x:Name="EnterRec"
+                           HorizontalAlignment="Stretch"
+                           VerticalAlignment="Stretch"
+                           Fill="#FFB6EC89"
+                           Visibility="Collapsed" />
+                <TextBlock HorizontalAlignment="Center"
+                           VerticalAlignment="Center"
+                           FontSize="20"
+                           Text="ENTER" />
             </Grid>
-            <Grid BorderBrush="{ThemeResource Brush-Alt}" HorizontalAlignment="Stretch" Height="50" VerticalAlignment="Stretch" Width="100" Grid.Column="2" Grid.Row="1">
-                <Rectangle x:Name="FixationRec" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="#FF6ACE17" Visibility="Collapsed"/>
-                <TextBlock Text="FIXATION" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center" />
+            <Grid Grid.Row="1"
+                  Grid.Column="2"
+                  Width="100"
+                  Height="50"
+                  HorizontalAlignment="Stretch"
+                  VerticalAlignment="Stretch"
+                  BorderBrush="{ThemeResource Brush-Alt}">
+                <Rectangle x:Name="FixationRec"
+                           HorizontalAlignment="Stretch"
+                           VerticalAlignment="Stretch"
+                           Fill="#FF6ACE17"
+                           Visibility="Collapsed" />
+                <TextBlock HorizontalAlignment="Center"
+                           VerticalAlignment="Center"
+                           FontSize="20"
+                           Text="FIXATION" />
             </Grid>
-            <Grid BorderBrush="{ThemeResource Brush-Alt}" HorizontalAlignment="Stretch" Height="50" VerticalAlignment="Stretch" Width="100" Grid.Column="3" Grid.Row="1">
-                <Rectangle x:Name="DwellRec" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="#FF1790CE" Visibility="Collapsed"/>
-                <TextBlock Text="DWELL"  FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center" />
+            <Grid Grid.Row="1"
+                  Grid.Column="3"
+                  Width="100"
+                  Height="50"
+                  HorizontalAlignment="Stretch"
+                  VerticalAlignment="Stretch"
+                  BorderBrush="{ThemeResource Brush-Alt}">
+                <Rectangle x:Name="DwellRec"
+                           HorizontalAlignment="Stretch"
+                           VerticalAlignment="Stretch"
+                           Fill="#FF1790CE"
+                           Visibility="Collapsed" />
+                <TextBlock HorizontalAlignment="Center"
+                           VerticalAlignment="Center"
+                           FontSize="20"
+                           Text="DWELL" />
             </Grid>
-            <Grid BorderBrush="{ThemeResource Brush-Alt}" HorizontalAlignment="Stretch" Height="50" VerticalAlignment="Stretch" Width="100" Grid.Column="4" Grid.Row="1">
-                <TextBlock Text="Repeat&#x0d;Delay"   FontSize="16" HorizontalAlignment="Stretch" VerticalAlignment="Center" TextAlignment="Center"/>
+            <Grid Grid.Row="1"
+                  Grid.Column="4"
+                  Width="100"
+                  Height="50"
+                  HorizontalAlignment="Stretch"
+                  VerticalAlignment="Stretch"
+                  BorderBrush="{ThemeResource Brush-Alt}">
+                <TextBlock HorizontalAlignment="Stretch"
+                           VerticalAlignment="Center"
+                           FontSize="16"
+                           Text="Repeat&#x0d;Delay"
+                           TextAlignment="Center" />
             </Grid>
-            <Grid BorderBrush="{ThemeResource Brush-Alt}" HorizontalAlignment="Stretch" Height="50" VerticalAlignment="Stretch" Width="100" Grid.Column="5" Grid.Row="1">
+            <Grid Grid.Row="1"
+                  Grid.Column="5"
+                  Width="100"
+                  Height="50"
+                  HorizontalAlignment="Stretch"
+                  VerticalAlignment="Stretch"
+                  BorderBrush="{ThemeResource Brush-Alt}">
                 <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="1*"/>
-                    <ColumnDefinition Width="Auto"/>
-                    <ColumnDefinition Width="Auto"/>
-                    <ColumnDefinition Width="1*"/>
+                    <ColumnDefinition Width="1*" />
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="1*" />
                 </Grid.ColumnDefinitions>
-                <Rectangle x:Name="RepeatRec" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="#FF175ACE" Visibility="Collapsed" Grid.ColumnSpan="4" />
-                <TextBlock Text="REPEAT" FontSize="20" HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Column="1" />
-                <TextBlock x:Name="DwellCountText" Text="10" FontSize="20" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0" Grid.Column="2" Visibility="Collapsed" TextAlignment="Left" />
+                <Rectangle x:Name="RepeatRec"
+                           Grid.ColumnSpan="4"
+                           HorizontalAlignment="Stretch"
+                           VerticalAlignment="Stretch"
+                           Fill="#FF175ACE"
+                           Visibility="Collapsed" />
+                <TextBlock Grid.Column="1"
+                           HorizontalAlignment="Right"
+                           VerticalAlignment="Center"
+                           FontSize="20"
+                           Text="REPEAT" />
+                <TextBlock x:Name="DwellCountText"
+                           Grid.Column="2"
+                           Margin="10,0,0,0"
+                           HorizontalAlignment="Left"
+                           VerticalAlignment="Center"
+                           FontSize="20"
+                           Text="10"
+                           TextAlignment="Left"
+                           Visibility="Collapsed" />
             </Grid>
-            <Grid BorderBrush="{ThemeResource Brush-Alt}" HorizontalAlignment="Stretch" Height="50" VerticalAlignment="Stretch" Width="100" Grid.Column="6"  Grid.Row="1">
-                <Rectangle x:Name="ExitRec" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="#FFCE1F17" Visibility="Collapsed"/>
-                <TextBlock Text="EXIT" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center"/>
+            <Grid Grid.Row="1"
+                  Grid.Column="6"
+                  Width="100"
+                  Height="50"
+                  HorizontalAlignment="Stretch"
+                  VerticalAlignment="Stretch"
+                  BorderBrush="{ThemeResource Brush-Alt}">
+                <Rectangle x:Name="ExitRec"
+                           HorizontalAlignment="Stretch"
+                           VerticalAlignment="Stretch"
+                           Fill="#FFCE1F17"
+                           Visibility="Collapsed" />
+                <TextBlock HorizontalAlignment="Center"
+                           VerticalAlignment="Center"
+                           FontSize="20"
+                           Text="EXIT" />
             </Grid>
 
 
-            <Grid HorizontalAlignment="Stretch" Height="50" VerticalAlignment="Stretch" Width="100" Grid.Row="2" Grid.Column="1" BorderBrush="{ThemeResource Brush-Alt}" BorderThickness="1,0,0,0">
+            <Grid Grid.Row="2"
+                  Grid.Column="1"
+                  Width="100"
+                  Height="50"
+                  HorizontalAlignment="Stretch"
+                  VerticalAlignment="Stretch"
+                  BorderBrush="{ThemeResource Brush-Alt}"
+                  BorderThickness="1,0,0,0">
                 <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="1*"/>
-                    <ColumnDefinition Width="Auto"/>
-                    <ColumnDefinition Width="1*"/>
+                    <ColumnDefinition Width="1*" />
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="1*" />
                 </Grid.ColumnDefinitions>
-                <Rectangle Height="1" Stroke="{ThemeResource Brush-Alt}" VerticalAlignment="Center"/>
-                <TextBlock HorizontalAlignment="Center" Text="{Binding PropertyDescriptor.Expando.ThresholdDuration.Value, Converter={StaticResource ConvertTimeToMilliSecs}}"  VerticalAlignment="Center" Grid.Column="1" Margin="5,0"/>
-                <Rectangle Height="1" Stroke="{ThemeResource Brush-Alt}" VerticalAlignment="Center" Grid.Column="2"/>
+                <Rectangle Height="1"
+                           VerticalAlignment="Center"
+                           Stroke="{ThemeResource Brush-Alt}" />
+                <TextBlock Grid.Column="1"
+                           Margin="5,0"
+                           HorizontalAlignment="Center"
+                           VerticalAlignment="Center"
+                           Text="{Binding PropertyDescriptor.Expando.ThresholdDuration.Value, Converter={StaticResource ConvertTimeToMilliSecs}}" />
+                <Rectangle Grid.Column="2"
+                           Height="1"
+                           VerticalAlignment="Center"
+                           Stroke="{ThemeResource Brush-Alt}" />
             </Grid>
-            <Grid HorizontalAlignment="Stretch" Height="50" VerticalAlignment="Stretch" Width="100" Grid.Row="2" Grid.Column="2" BorderBrush="{ThemeResource Brush-Alt}" BorderThickness="1,0,0,0">
+            <Grid Grid.Row="2"
+                  Grid.Column="2"
+                  Width="100"
+                  Height="50"
+                  HorizontalAlignment="Stretch"
+                  VerticalAlignment="Stretch"
+                  BorderBrush="{ThemeResource Brush-Alt}"
+                  BorderThickness="1,0,0,0">
                 <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="1*"/>
-                    <ColumnDefinition Width="Auto"/>
-                    <ColumnDefinition Width="1*"/>
+                    <ColumnDefinition Width="1*" />
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="1*" />
                 </Grid.ColumnDefinitions>
-                <Rectangle Height="1" Stroke="{ThemeResource Brush-Alt}" VerticalAlignment="Center"/>
-                <TextBlock HorizontalAlignment="Center" Text="{Binding PropertyDescriptor.Expando.FixationDuration.Value, Converter={StaticResource ConvertTimeToMilliSecs}}" VerticalAlignment="Center" Grid.Column="1" Margin="5,0"/>
-                <Rectangle Height="1" Stroke="{ThemeResource Brush-Alt}" VerticalAlignment="Center" Grid.Column="2"/>
+                <Rectangle Height="1"
+                           VerticalAlignment="Center"
+                           Stroke="{ThemeResource Brush-Alt}" />
+                <TextBlock Grid.Column="1"
+                           Margin="5,0"
+                           HorizontalAlignment="Center"
+                           VerticalAlignment="Center"
+                           Text="{Binding PropertyDescriptor.Expando.FixationDuration.Value, Converter={StaticResource ConvertTimeToMilliSecs}}" />
+                <Rectangle Grid.Column="2"
+                           Height="1"
+                           VerticalAlignment="Center"
+                           Stroke="{ThemeResource Brush-Alt}" />
             </Grid>
-            <Grid HorizontalAlignment="Stretch" Height="50" VerticalAlignment="Stretch" Width="100" Grid.Row="2" Grid.Column="3" BorderBrush="{ThemeResource Brush-Alt}" BorderThickness="1,0,0,0">
+            <Grid Grid.Row="2"
+                  Grid.Column="3"
+                  Width="100"
+                  Height="50"
+                  HorizontalAlignment="Stretch"
+                  VerticalAlignment="Stretch"
+                  BorderBrush="{ThemeResource Brush-Alt}"
+                  BorderThickness="1,0,0,0">
                 <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="19*"/>
-                    <ColumnDefinition Width="62*"/>
-                    <ColumnDefinition Width="19*"/>
+                    <ColumnDefinition Width="19*" />
+                    <ColumnDefinition Width="62*" />
+                    <ColumnDefinition Width="19*" />
                 </Grid.ColumnDefinitions>
-                <Rectangle Height="1" Stroke="{ThemeResource Brush-Alt}" VerticalAlignment="Center"/>
-                <TextBlock HorizontalAlignment="Center" Text="{Binding PropertyDescriptor.Expando.DwellDuration.Value, Converter={StaticResource ConvertTimeToMilliSecs}}"  VerticalAlignment="Center" Grid.Column="1" Margin="5,0"/>
-                <Rectangle Height="1" Stroke="{ThemeResource Brush-Alt}" VerticalAlignment="Center" Grid.Column="2"/>
+                <Rectangle Height="1"
+                           VerticalAlignment="Center"
+                           Stroke="{ThemeResource Brush-Alt}" />
+                <TextBlock Grid.Column="1"
+                           Margin="5,0"
+                           HorizontalAlignment="Center"
+                           VerticalAlignment="Center"
+                           Text="{Binding PropertyDescriptor.Expando.DwellDuration.Value, Converter={StaticResource ConvertTimeToMilliSecs}}" />
+                <Rectangle Grid.Column="2"
+                           Height="1"
+                           VerticalAlignment="Center"
+                           Stroke="{ThemeResource Brush-Alt}" />
             </Grid>
-            <Grid HorizontalAlignment="Stretch" Height="50" VerticalAlignment="Stretch" Width="100" Grid.Row="2" Grid.Column="4" BorderBrush="{ThemeResource Brush-Alt}" BorderThickness="1,0,0,0">
+            <Grid Grid.Row="2"
+                  Grid.Column="4"
+                  Width="100"
+                  Height="50"
+                  HorizontalAlignment="Stretch"
+                  VerticalAlignment="Stretch"
+                  BorderBrush="{ThemeResource Brush-Alt}"
+                  BorderThickness="1,0,0,0">
                 <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="1*"/>
-                    <ColumnDefinition Width="Auto"/>
-                    <ColumnDefinition Width="1*"/>
+                    <ColumnDefinition Width="1*" />
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="1*" />
                 </Grid.ColumnDefinitions>
-                <Rectangle Height="1" Stroke="{ThemeResource Brush-Alt}" VerticalAlignment="Center"/>
-                <TextBlock HorizontalAlignment="Center" Text="{Binding PropertyDescriptor.Expando.RepeatDelayDuration.Value, Converter={StaticResource ConvertTimeToMilliSecs}}"  VerticalAlignment="Center" Grid.Column="1" Margin="5,0"/>
-                <Rectangle Height="1" Stroke="{ThemeResource Brush-Alt}" VerticalAlignment="Center" Grid.Column="2"/>
+                <Rectangle Height="1"
+                           VerticalAlignment="Center"
+                           Stroke="{ThemeResource Brush-Alt}" />
+                <TextBlock Grid.Column="1"
+                           Margin="5,0"
+                           HorizontalAlignment="Center"
+                           VerticalAlignment="Center"
+                           Text="{Binding PropertyDescriptor.Expando.RepeatDelayDuration.Value, Converter={StaticResource ConvertTimeToMilliSecs}}" />
+                <Rectangle Grid.Column="2"
+                           Height="1"
+                           VerticalAlignment="Center"
+                           Stroke="{ThemeResource Brush-Alt}" />
             </Grid>
-            <Grid HorizontalAlignment="Stretch" Height="50" VerticalAlignment="Stretch" Width="100" Grid.Row="2" Grid.Column="5" BorderBrush="{ThemeResource Brush-Alt}" BorderThickness="1,0,0,0">
+            <Grid Grid.Row="2"
+                  Grid.Column="5"
+                  Width="100"
+                  Height="50"
+                  HorizontalAlignment="Stretch"
+                  VerticalAlignment="Stretch"
+                  BorderBrush="{ThemeResource Brush-Alt}"
+                  BorderThickness="1,0,0,0">
                 <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="1*"/>
-                    <ColumnDefinition Width="Auto"/>
-                    <ColumnDefinition Width="1*"/>
+                    <ColumnDefinition Width="1*" />
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="1*" />
                 </Grid.ColumnDefinitions>
-                <Rectangle Height="1" Stroke="{ThemeResource Brush-Alt}" VerticalAlignment="Center"/>
-                <TextBlock HorizontalAlignment="Center" Text="{Binding PropertyDescriptor.Expando.DwellRepeatDuration.Value, Converter={StaticResource ConvertTimeToMilliSecs}}"  VerticalAlignment="Center" Grid.Column="1" Margin="5,0"/>
-                <Rectangle Height="1" Stroke="{ThemeResource Brush-Alt}" VerticalAlignment="Center" Grid.Column="2"/>
+                <Rectangle Height="1"
+                           VerticalAlignment="Center"
+                           Stroke="{ThemeResource Brush-Alt}" />
+                <TextBlock Grid.Column="1"
+                           Margin="5,0"
+                           HorizontalAlignment="Center"
+                           VerticalAlignment="Center"
+                           Text="{Binding PropertyDescriptor.Expando.DwellRepeatDuration.Value, Converter={StaticResource ConvertTimeToMilliSecs}}" />
+                <Rectangle Grid.Column="2"
+                           Height="1"
+                           VerticalAlignment="Center"
+                           Stroke="{ThemeResource Brush-Alt}" />
             </Grid>
-            <Grid HorizontalAlignment="Stretch" Height="50" VerticalAlignment="Stretch" Width="100" Grid.Row="2" Grid.Column="6" BorderBrush="{ThemeResource Brush-Alt}" BorderThickness="1,0,1,0">
+            <Grid Grid.Row="2"
+                  Grid.Column="6"
+                  Width="100"
+                  Height="50"
+                  HorizontalAlignment="Stretch"
+                  VerticalAlignment="Stretch"
+                  BorderBrush="{ThemeResource Brush-Alt}"
+                  BorderThickness="1,0,1,0">
                 <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="1*"/>
-                    <ColumnDefinition Width="Auto"/>
-                    <ColumnDefinition Width="1*"/>
+                    <ColumnDefinition Width="1*" />
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="1*" />
                 </Grid.ColumnDefinitions>
-                <Rectangle Height="1" Stroke="{ThemeResource Brush-Alt}" VerticalAlignment="Center"/>
-                <TextBlock HorizontalAlignment="Center" Text="{Binding PropertyDescriptor.Expando.ThresholdDuration.Value, Converter={StaticResource ConvertTimeToMilliSecs}}"  VerticalAlignment="Center" Grid.Column="1" Margin="5,0"/>
-                <Rectangle Height="1" Stroke="{ThemeResource Brush-Alt}" VerticalAlignment="Center" Grid.Column="2"/>
+                <Rectangle Height="1"
+                           VerticalAlignment="Center"
+                           Stroke="{ThemeResource Brush-Alt}" />
+                <TextBlock Grid.Column="1"
+                           Margin="5,0"
+                           HorizontalAlignment="Center"
+                           VerticalAlignment="Center"
+                           Text="{Binding PropertyDescriptor.Expando.ThresholdDuration.Value, Converter={StaticResource ConvertTimeToMilliSecs}}" />
+                <Rectangle Grid.Column="2"
+                           Height="1"
+                           VerticalAlignment="Center"
+                           Stroke="{ThemeResource Brush-Alt}" />
             </Grid>
 
-            <ProgressBar Visibility="Collapsed" BorderBrush="{ThemeResource Brush-Alt}" BorderThickness="1" Background="{ThemeResource Brush-Main}" x:Name="DwellProgressBar" Height="10" Minimum="0" HorizontalAlignment="Stretch" VerticalAlignment="Top" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="6"/>
+            <ProgressBar x:Name="DwellProgressBar"
+                         Grid.Row="0"
+                         Grid.Column="1"
+                         Grid.ColumnSpan="6"
+                         Height="10"
+                         HorizontalAlignment="Stretch"
+                         VerticalAlignment="Top"
+                         Background="{ThemeResource Brush-Main}"
+                         BorderBrush="{ThemeResource Brush-Alt}"
+                         BorderThickness="1"
+                         Minimum="0"
+                         Visibility="Collapsed" />
 
-            <TextBlock x:Name="WarningText" Text="Please attach eye tracking device" Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="6" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30" Foreground="Firebrick" Visibility="Collapsed" />
-            <TextBlock x:Name="ClickCount" Text="" Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="6" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30" Foreground="Firebrick" />
+            <TextBlock x:Name="WarningText"
+                       Grid.Row="3"
+                       Grid.Column="1"
+                       Grid.ColumnSpan="6"
+                       HorizontalAlignment="Center"
+                       VerticalAlignment="Center"
+                       FontSize="30"
+                       Foreground="Firebrick"
+                       Text="Please attach eye tracking device"
+                       Visibility="Collapsed" />
+            <TextBlock x:Name="ClickCount"
+                       Grid.Row="3"
+                       Grid.Column="1"
+                       Grid.ColumnSpan="6"
+                       HorizontalAlignment="Center"
+                       VerticalAlignment="Center"
+                       FontSize="30"
+                       Foreground="Firebrick"
+                       Text="" />
         </Grid>
     </Grid>
 </Page>
diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/GazeInteraction/GazeInteractionPage.xaml.cs b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/GazeInteraction/GazeInteractionPage.xaml.cs
index 4f4cc0d6f40..cdb97f17f15 100644
--- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/GazeInteraction/GazeInteractionPage.xaml.cs
+++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/GazeInteraction/GazeInteractionPage.xaml.cs
@@ -3,11 +3,15 @@
 // See the LICENSE file in the project root for more information.
 
 using System;
+using System.Collections;
+using System.Collections.Generic;
 using Microsoft.Toolkit.Uwp.Input.GazeInteraction;
 using Microsoft.Toolkit.Uwp.UI.Extensions;
+using Windows.UI;
 using Windows.UI.Core;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Media;
 using Windows.UI.Xaml.Shapes;
 
 namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages
@@ -55,10 +59,41 @@ public void OnXamlRendered(FrameworkElement control)
             }
 
             gazePointer = GazeInput.GetGazePointer(null);
-
+            ResetGazeCursor();
             CoreWindow.GetForCurrentThread().KeyDown += (CoreWindow sender, KeyEventArgs args) => gazePointer.Click();
         }
 
+        private void ResetGazeCursor()
+        {
+            var size = GazeInput.GetCursorRadius(gazePointer.CursorElement);
+            gazePointer.CursorElement = new Ellipse
+            {
+                Fill = new SolidColorBrush(SelectedColor),
+                HorizontalAlignment = HorizontalAlignment.Left,
+                VerticalAlignment = VerticalAlignment.Top,
+                Width = 2 * size,
+                Height = 2 * size,
+                Margin = new Thickness(-size, -size, 0, 0),
+                IsHitTestVisible = false
+            };
+        }
+
+        private Color _selectedColor = Colors.MediumVioletRed;
+
+        public Color SelectedColor
+        {
+            get
+            {
+                return _selectedColor;
+            }
+
+            set
+            {
+                _selectedColor = value;
+                ResetGazeCursor();
+            }
+        }
+
         private void GazeInput_IsDeviceAvailableChanged(object sender, object e)
         {
             WarnUserToPlugInDevice();