ボタンをホバー上の全領域に反応させる方法

Question

私はカスタムボタンテンプレートを持っています。ボタンにはキャンバス要素が含まれ、キャンバスには2行（十字）が含まれます。

私が達成したいのは、マウスがボタンの上にあるときにボタンの背景色を変更することです。 ボタンの全領域の小さな部分であるキャンバスライン要素の上にマウスがある場合のみ、背景が変化しています。

マウスがボタンの任意の領域にあるときに背景を変更するためにできることを教えてください。

XAMLエディタでキャンバス要素がボタン全体に引き伸ばされているのを見ることができますが、マウスが線要素を超えない限り、まだ動作しません。

これは私のボタンのスタイルです：

<Style x:Key="TitleButton" TargetType="{x:Type Button}"> 
    <Setter Property="Padding"   Value="3"/> 
    <Setter Property="BorderThickness" Value="0"/> 
    <Setter Property="BorderBrush"  Value="Gray" /> 
    <Setter Property="Width"   Value="{StaticResource TitleButtonWidth}" /> 
    <Setter Property="Background"  Value="Transparent"/> 
    <Setter Property="HorizontalAlignment" Value="Stretch"/> 
    <Setter Property="VerticalAlignment" Value="Stretch"/> 
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
    <Setter Property="VerticalContentAlignment" Value="Stretch"/> 
    <Setter Property="Template"> 
    <Setter.Value> 
     <ControlTemplate TargetType="Button"> 
      <Border Name="border"> 
       <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> 
        <ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /> 
       </Grid> 
      </Border> 
      <ControlTemplate.Triggers> 
       <Trigger Property="IsMouseOver" Value="True"> 
        <Setter TargetName="border" Property="Background" Value="LightSlateGray"/> 
       </Trigger> 
      </ControlTemplate.Triggers> 
     </ControlTemplate> 
    </Setter.Value> 
</Setter> 

そして、私のボタン：

<Button x:Name="CloseButton" DockPanel.Dock="Right" Style="{StaticResource TitleButton}" Click="CloseButton_Click" > 
    <Canvas HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> 
     <Line X1="15" X2="25" Y1="20" Y2="10" StrokeThickness="1" Stroke="Black"></Line> 
     <Line X1="15" X2="25" Y1="10" Y2="20" StrokeThickness="1" Stroke="Black"></Line> 
    </Canvas> 
</Button> 

Answer 1

私はこのスレッドでの解決策が見つかりました：私がしなければならなかった何Mouseover effect on full stretch button

を透明なボーダーの背景を追加するだけです。

<Border Name="border" Background="Transparent"> 
    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> 
     <ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /> 
    </Grid> 
</Border> 

シンプル！