如何創建一個比其視覺區域更小的按鈕區域的按鈕？

我正在嘗試使用較小的命中區域來創建按鈕，以防止在工業觸摸屏PC程序中出現誤操作。這裏是a sample，只有the white area should response to touch and mouse operations.如何創建一個比其視覺區域更小的按鈕區域的按鈕？

我試着使用控件模板

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

現在鼠標輸入事件這樣工作，但似乎在按鈕模板每一個可見的像素可以觸發點擊事件，所以我必須將邊框的背景設置爲null，並將模板中的背景設置在某處。

有什麼建議嗎？謝謝你的幫助。

來源

2017-03-16 foxsheep

設置IsHitTestVisible="False"在邊界上。在Grid上有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>

來源

2017-03-16 11:44:54 ASh

我在代碼中添加了'IsHitTestVisible =「False」'在邊框上，它運行良好。然後，我嘗試了你的，它的工作原理，但MouseOver上的所有動畫和點擊失敗。也許我真的需要另一個按鈕。謝謝你的幫助。 – foxsheep

@foxsheep，標準按鈕模板包含在IsMouseOver = true或IsPressed = true時更改背景的模板觸發器。 ButtonToTouch模板缺少這些觸發器（通常在自定義控制模板時必須從基本模板複製它們）。 – ASh

添加''後效果很好，這比添加另一個按鈕更加直接。再次感謝。 – foxsheep

如何創建一個比其視覺區域更小的按鈕區域的按鈕？

回答

相關問題