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

Question

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

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

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

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

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

<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

Я нашел решение в этой теме: эффект наведения мыши на кнопку полного растяжения

Что мне нужно было сделать, это просто добавить прозрачный фон границы.

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

Так просто!