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>

现在鼠标输入事件以这种方式工作，但似乎按钮模板中的每个可见像素都可以触发click事件，所以我必须将边框的背景设置为null，并将背景设置在模板外的某处

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

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>

如何创建比其可视区域更小的命中区域的按钮？

1 个答案: