Wie erstellt man eine Schaltfläche mit einer kleineren Trefferfläche als in ihrem visuellen Bereich?

Question

Ich versuche, Schaltflächen mit kleinerer Trefferfläche zu erstellen, um Fehlbedienungen in einem industriellen Touchscreen-PC-Programm zu verhindern. Hier ist a sample, und nur the white area should response to touch and mouse operations.

Ich habe versucht zu verwenden Control

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

Jetzt Maus eingeben Ereignis auf diese Weise funktioniert, aber es scheint, dass jedes sichtbare Pixel in der Schaltfläche Vorlage das Click-Ereignis auslösen können , also muss ich den Hintergrund des Rahmens auf null setzen und den Hintergrund irgendwo außerhalb der Vorlage festlegen.

Irgendwelche Vorschläge? Danke für jede Hilfe.

Answer 1

Set IsHitTestVisible="False" auf Border. Mit 8 Rand auf Raster, 8px breiter Bereich wird keine Eingabe registrieren.

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