Как заставить кнопку реагировать на всю область на зависании

Question

У меня есть шаблон пользовательской кнопки. Кнопка содержит элемент холста, холст содержит две строки (крест).

Чего я хочу добиться, это изменить цвет фона кнопки, когда мышь над кнопкой. Тем не менее, фон теперь меняется только тогда, когда мышь находится над элементом линии холста, который является небольшой частью всей области кнопки.

Не могли бы вы рассказать мне, что я могу сделать, чтобы изменить фон, когда мышь находится над любой областью кнопки?

В редакторе XAML я вижу, что элемент Canvas растянут на всей кнопке, но он все еще не работает, пока мышь не окажется над линейным элементом.

Это мой стиль кнопки:

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

Так просто!