2

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:

  1. Normal:

Button in normal mode

  1. Hovered (orange background):

Button in hovered mode - orange background

  1. Pressed (orange background, small font size):

Button in pressed mode - 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.

3
  • Hovered state is useless for touch. So you can try to stop entering Hovered state when touch. Or you can capture TouchLeave event and cancel Hovered state. Commented Oct 17, 2024 at 21:40
  • @emoacht Thank you, the IsMouseOver trigger isn’t necessary. I attempted to remove both the IsMouseOver and IsPressed triggers from the styles, but unfortunately, the button still doesn’t respond on the first touch. Commented Oct 22, 2024 at 9:32
  • I cannot reproduce your issue on command. Commented Oct 22, 2024 at 16:19

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.