Home Forums Software Development UWP Community Toolkit Gaze Animation

Tagged: , , ,

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #9020
    Miles Bardon

    I am trying to write a UWP app that takes Gaze data from my Tobii 4C and allows me to interact with a Windows 10 UWP app using the Microsoft.Toolkit.Uwp.Input.GazeInteraction library. According to their own docs, I can override the current dwell animation from a shrinking rectangle by overriding the DwellProgressFeedback event handler with e.Handled = true;.

    Has anyone had any experience changing this? If possible I’d like to have a circle fill up around the user’s gaze during a dwell, and change colour on a click.

    If you want to look more at my code, it is all freely accessible at https://github.com/Tohaker/UWP-EyeControl/tree/development 🙂


    Hi @milesb

    Great to hear you are using the toolkit to accelerate your UWP development.

    I would suggest to create a popup layer to render the circle in, and implement a handler for the dwell state provided by the Gaze Interaction Library.

    First create the popup layer with an ellipse in your XAML:

    <Popup x:Name="_gazeMarker" Grid.Column="0" Grid.Row="0" 
             HorizontalAlignment="Left" VerticalAlignment="Top" 
             IsOpen="True" IsHitTestVisible="False">
        <Ellipse x:Name="_dwell" Opacity="0.3">
                    <ScaleTransform x:Name="_dwellScale" />
                    <TranslateTransform x:Name="_dwellPosition" />

    ... tell the Gaze Interaction Library that you handle the dwell progress feedback (on a button for instance):

    <Button VerticalAlignment="Center" HorizontalAlignment="Center" 
        Content="Click me please">
            <gaze:GazeElement DwellProgressFeedback="GazeElement_DwellProgressFeedback"/>

    ... and then change the rendering of the circle in the dwell progress handler in your codebehind:

    private void GazeElement_DwellProgressFeedback(object sender, DwellProgressEventArgs e)
        var target = sender as FrameworkElement;
        if (target == null) return;
        // Find out where to render the dwell indicator
        var targetPosition = target.TransformToVisual(_gazeMarker).TransformPoint(new Point(0, 0));
        var targetWidth = target.ActualWidth;
        var targetHeight = target.ActualHeight;
        // Set the size 
        var maxRadius = Math.Min(targetWidth, targetHeight);
        var radius = Math.Min(maxRadius / 1.61803398875, 100);
        _dwell.Width = radius;
        _dwell.Height = radius;
        _dwellPosition.X = targetPosition.X + (targetWidth - _dwell.Width) / 2;
        _dwellPosition.Y = targetPosition.Y + (targetHeight - _dwell.Height) / 2;
        _dwellScale.CenterX = _dwell.Width / 2;
        _dwellScale.CenterY = _dwell.Height / 2;
        _dwellScale.ScaleX = 1.0f - e.Progress;
        _dwellScale.ScaleY = 1.0f - e.Progress;
        // Set the color and visibility of the indicator
        switch (e.State)
            case DwellProgressState.Fixating:
                _dwell.Visibility = Visibility.Visible;
                _dwell.Fill = GazeInput.DwellFeedbackEnterBrush;
            case DwellProgressState.Progressing:
                _dwell.Visibility = Visibility.Visible;
                _dwell.Fill = GazeInput.DwellFeedbackProgressBrush;
            case DwellProgressState.Complete:
                _dwell.Visibility = Visibility.Visible;
                _dwell.Fill = GazeInput.DwellFeedbackCompleteBrush;
            case DwellProgressState.Idle:
                _dwell.Visibility = Visibility.Collapsed;
        // And tell the interaction library that you handled the event
        e.Handled = true;

    Let us know if you have and further questions/feedback on eye tracking in UWP or the gaze interaction library.

    Miles Bardon

    Hi Denny,

    Thanks for getting back to me, this is a brilliant solution! Now I can get back to actually implementing the core functionality 😉

    Many thanks,


Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.