I'm developing a WPF application designed for touch screens. There is a modal window with button "New" on it. The button has 3 states:
- Normal:

- Hovered (orange background):

- Pressed (orange background, small font size):

When I tap the button time to time, it changes to the Hovered state (orange background) and doesn't execute the command. To return it to the Normal state, I have to tap it multiple times, and only then it successfully executes the command.
Although when I use mouse this never happens.
This issue does not occur when using a mouse, leading me to initially suspect it might be a touch screen lag. However, I've reproduced the issue on different devices.
Button xaml code:
<controls:IconButton
Text="{loc:Localization NEW}"
HorizontalAlignment="Left"
Style="{StaticResource SecondaryButton}"
Command="{Binding SelectAndCloseDialogCommand}"/>
The IconButton class inherits from Button and adds a few Dependency Properties that are used in the styles but does not contain any additional logic.
Button Styles:
<Style x:Key="SecondaryButton"
TargetType="{x:Type controls:IconButton}">
<Setter Property="Foreground" Value="{DynamicResource MainFontColor_AppColorBrush}" />
<Setter Property="Background" Value="{DynamicResource SecondaryAppColorBrush}" />
<Setter Property="BorderBrush" Value="DarkGray" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="Height" Value="60" />
<Setter Property="MinWidth" Value="150" />
<Setter Property="FontSize" Value="24" />
<Setter Property="Orientation" Value="Horizontal"/>
<Setter Property="Margin" Value="2 0 2 2" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect Color="Black" Direction="320" ShadowDepth="3" BlurRadius="5" Opacity="0.5" />
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:IconButton}">
<Border BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}">
<Grid>
<Viewbox Stretch="Uniform" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
<Grid Height="{TemplateBinding Height}"
HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Viewbox Stretch="Uniform"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Visibility="{TemplateBinding IconVisibility}"
Margin="2 10">
<Path Stretch="Uniform"
HorizontalAlignment="Left"
Fill="{TemplateBinding Foreground}"
Data="{TemplateBinding PathData}"
Margin="{TemplateBinding MarginIcon}"/>
</Viewbox>
<ContentControl Content="{TemplateBinding Text}"
Visibility="{TemplateBinding TextVisibility}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="10 2"
Grid.Column="1"/>
</Grid>
</Viewbox>
<Polygon Fill="{DynamicResource MainFontColor_AppColorBrush}"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Opacity=".4" Margin="4"
Points="15,15 0,15 15,0"
Visibility="{TemplateBinding BottomArrowVisibility}" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Orange"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="{StaticResource DisabledPrimaryButtonColor}" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="FontSize" Value="16" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Has anyone experienced a similar issue with buttons in WPF touch applications? What might be causing this problem, and how can I resolve it?
I also thought the button was somehow stuck in the Hovered state, so I tried changing the ClickMode value to Press, but that didn't work.
UPD: My main goal is to ensure that the button responds and executes the command on the first touch.