如何创建点击区域小于可视区域的按钮？

Question

我正在尝试创建点击区域较小的按钮，以防止在工业触摸屏 PC 程序中出现误操作。这里是a sample，并且只有 the white area should response to touch and mouse operations.

我试过使用 ControlTemplate

<ControlTemplate x:Key="ButtonToTouch" TargetType="{x:Type Button}">
    <Grid>
        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>
        <Button Background="{x:Null}" BorderBrush="{x:Null}" FontSize="{TemplateBinding FontSize}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
            <Button.Content>
                <Grid Margin="8" >
                    <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                    <Rectangle Fill="Transparent" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
                </Grid>
            </Button.Content>
        </Button>
    </Grid>
</ControlTemplate>

现在鼠标进入事件是这样工作的，但似乎按钮模板中的每个可见像素都可以触发点击事件，所以我必须将边框的背景设置为空，并将背景设置在模板。

有什么建议吗？感谢您的帮助。

Answer 1

在边框上设置 IsHitTestVisible="False"。网格上有 8 个边距，8px 宽的区域将不会注册输入。

<ControlTemplate x:Key="ButtonToTouch" TargetType="{x:Type Button}">
    <Grid>
        <Border BorderBrush="{TemplateBinding BorderBrush}" 
                IsHitTestVisible="False"
                BorderThickness="{TemplateBinding BorderThickness}" 
                Background="{TemplateBinding Background}"/>

        <Grid Margin="8">
            <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
            <Rectangle Fill="Transparent" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
        </Grid>
    </Grid>
</ControlTemplate>

如何创建点击区域小于可视区域的按钮？

How to create a button with a smaller hit area than its visual area?

wpf

wpf-controls