Changing Button Background Color

[Anonymous]

Hey Guys, i have the following Question.

I want to change the Background Color when the user is looking at the Button, but i also want to change the background color again for a quick second, when the button has been triggered after a delay time (for better user feedback).

I defined some Window.Resources

 <Window.Resources>
        <Style x:Key="EyeXGazeAwareElement" TargetType="FrameworkElement">
            <Setter Property="tobii:Behaviors.IsGazeAware" Value="True" />
            <Setter Property="tobii:Behaviors.GazeAwareMode" Value="Delayed" />
            <Setter Property="tobii:Behaviors.GazeAwareDelayTime" Value="900"/>
            <EventSetter Event="tobii:Behaviors.HasGazeChanged" Handler="Instruction_OnHasGazeChanged" />
        </Style>

        <Style x:Key="EyeXGazeAwareButton" BasedOn="{StaticResource EyeXGazeAwareElement}" TargetType="Button">
            <Setter Property="Background" Value="{StaticResource DynamicButtonPressColor}" />
            <Style.Triggers>
                <Trigger Property="tobii:Behaviors.HasGaze" Value="True">
                    <Setter Property="Background" Value="{StaticResource DynamicButtonPressColor}" />
                </Trigger>
            </Style.Triggers>
        </Style>      
        
    </Window.Resources>

#

The first one defines that the Button is GazeAware, GazeAwareMode for Delayed and the DelayTime for 900ms.

The second style defines the initial background color of the button and the background color when the user looks at the button.

The Problem is, that the background color doesnt change when on Gaze or even when i just set the property ( <Setter Property=”Background” Value=”{StaticResource DynamicButtonPressColor}” />)

The only thing that works is the HandlerMethod which is called when on gaze.

What am i missing to get everything to work?

[Grant [Tobii]]

Hi @dabinder, you will be pleased to know that we have already developed a free WPF sample application that shows you exactly what you need to do to implement succesfully color change of a WPF object when receiving gaze data.

If you download “GazeAwareElements” example from our site @ https://github.com/Tobii/interaction-samples/tree/master/WpfSamples/GazeAwareElements

This should hopefully answer your query, please let us know if we can be of any further assistance.

[Anonymous]

I am sorry for bothering again, but i don’t understand it.
I am not familiar with the different XAML Triggers (DataTrigger, EventSetter, Trigger, …).

In your example, only the Button Color gets changed when the button hasGaze.
In my example, i want to call a function, when onHasGazeChanged. However i don’t know which Trigger to call in the Button Tag.

I tried to add “<EventSetter Event="tobii:Behaviors.HasGazeChanged" Handler="DigitButton_Click" /> to the Style, and tried to read the hasGaze value in my callback function “DigitButton_Click”, but the hasGaze value was always false.

         private void DigitButton_Click(object sender, RoutedEventArgs e)
        {
            var button = e.Source as Button;
            var hasGaze = button.GetHasGaze();
            Console.WriteLine(hasGaze);
            if (hasGaze)
            {
                ...
            }            
        }

What am i doing Wrong ?

<Window.Resources>
        <Style x:Key="EyeXGazeAwareElement" TargetType="FrameworkElement">
            <Setter Property="tobii:Behaviors.IsGazeAware" Value="True" />
            <Setter Property="tobii:Behaviors.GazeAwareMode" Value="Delayed" />
            <Setter Property="tobii:Behaviors.GazeAwareDelayTime" Value="900"/>
        </Style>

        <Style x:Key="EyeXGazeAwareButton" BasedOn="{StaticResource EyeXGazeAwareElement}" TargetType="Button">
            <EventSetter Event="tobii:Behaviors.HasGazeChanged" Handler="DigitButton_Click" />
            <Setter Property="Background" Value="{StaticResource DynamicButtonPressColor}" />
            <Style.Triggers>
                
                <!-- Trigger my Method somewhere here i guess ? -->
                
                <Trigger Property="tobii:Behaviors.HasGaze" Value="True">
                    <Setter Property="Background" Value="DeepSkyBlue" />                    
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>

[Author]

Posts