在 WPF 触摸应用程序模态窗口中触摸时按钮卡在悬停状态

Question

我正在开发一个专为触摸屏设计的WPF应用程序。有一个模式窗口，上面有“新建”按钮。该按钮有 3 种状态：

1. 正常：

2. 悬停（橙色背景）：

3. 按下（橙色背景，小字体）：

当我不时点击按钮时，它会变为悬停状态（橙色背景）并且不执行命令。要将其恢复到正常状态，我必须多次点击它，然后它才能成功执行命令。

虽然当我使用鼠标时这永远不会发生。

使用鼠标时不会出现此问题，这让我最初怀疑可能是触摸屏延迟。不过，我在不同的设备上重现了该问题。

按钮xaml代码：

<controls:IconButton
    Text="{loc:Localization NEW}"
    HorizontalAlignment="Left"
    Style="{StaticResource SecondaryButton}"
    Command="{Binding SelectAndCloseDialogCommand}"/>

IconButton

类继承自

Button

并添加了一些样式中使用的依赖属性，但不包含任何额外的逻辑。

按钮样式：

<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>

有人在 WPF 触摸应用程序中遇到过类似的按钮问题吗？可能是什么导致了这个问题，我该如何解决它？

我还认为按钮不知何故卡在悬停状态，所以我尝试将

ClickMode

值更改为

Press

，但这不起作用。

Answer 1

您有多种选择。我认为最简单的是捕获最后一个设备并使用该信息进行 MultiTrigger 来更改背景。

public class IconButton : Button
{
    public bool IsLastDeviceTouch
    {
        get { return (bool)GetValue(IsLastDeviceTouchProperty); }
        set { SetValue(IsLastDeviceTouchProperty, value); }
    }
    public static readonly DependencyProperty IsLastDeviceTouchProperty =
        DependencyProperty.Register("IsLastDeviceTouch", typeof(bool), typeof(IconButton), new PropertyMetadata(false));

    public IconButton() : base()
    {
        this.MouseEnter += (_, _) => IsLastDeviceTouch = false;
        this.StylusEnter += (_, _) => IsLastDeviceTouch = false;
        this.TouchEnter += (_, _) => IsLastDeviceTouch = true;
        this.TouchLeave += (_, _) => IsLastDeviceTouch = true;
    }
}

<Style TargetType="{x:Type controls:IconButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type controls:IconButton}">
               ...
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsMouseOver" Value="True" />
                <Condition Property="IsLastDeviceTouch" Value="False" />
            </MultiTrigger.Conditions>
            <Setter Property="Background" Value="Orange"/>
        </MultiTrigger>
       ...
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="Background" Value="DarkOrange"/>
            <Setter Property="FontSize" Value="16" />
        </Trigger>
    </Style.Triggers>
</Style>

我还没有发现任何与调用命令相关的问题。