How to make Border element hover event to trigger when the mouse enters its area?

I want to make a hover effect when the mouse enters the border area. I have the following XAML codes:

<Border CornerRadius="5"
        Width="190"
        Height="40"
        Margin="0,5,0,0">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="35" />
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Column="0"
                   Text="تجهیزات"
                   FlowDirection="RightToLeft"
                   VerticalAlignment="Center"
                   Margin="0,0,10,0">
            <TextBlock.Style>
                <Style>
                    <Setter Property="TextBlock.FontFamily" Value="{StaticResource Vazir}"/>
                    <Setter Property="TextBlock.FontSize" Value="14"/>
                    <Setter Property="TextBlock.Foreground" Value="White"/>
                </Style>
            </TextBlock.Style>
        </TextBlock>
        <Viewbox Grid.Column="1" Width="25" Height="25" Stretch="Uniform" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
            <Canvas Height="512" Width="512">
                <Path Fill="White" Data="M135.2 117.4L109.1 192l293.8 0-26.1-74.6C372.3 104.6 360.2 96 346.6 96L165.4 96c-13.6 0-25.7 8.6-30.2 21.4zM39.6 196.8L74.8 96.3C88.3 57.8 124.6 32 165.4 32l181.2 0c40.8 0 77.1 25.8 90.6 64.3l35.2 100.5c23.2 9.6 39.6 32.5 39.6 59.2l0 144 0 48c0 17.7-14.3 32-32 32l-32 0c-17.7 0-32-14.3-32-32l0-48L96 400l0 48c0 17.7-14.3 32-32 32l-32 0c-17.7 0-32-14.3-32-32l0-48L0 256c0-26.7 16.4-49.6 39.6-59.2zM128 288a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm288 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" />
            </Canvas>
        </Viewbox>
    </Grid>
    <Border.Style>
        <Style TargetType="{x:Type Border}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True" >
                    <Setter Property="Background" Value="White"  />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Border.Style>
</Border>

The problem is that the hover effect triggers when the mouse enters the text and image area, not the full Border element area. How can I fix this?

Solution

UIElements only receive mouse events in areas where they are actually drawn, e.g. where they have a non-null Background, Foreground, Fill or Stroke Brush.

So add a default Background, e.g. Transparent:

<Border.Style>
    <Style TargetType="Border">
        <Setter Property="Background" Value="Transparent" />
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True" >
                <Setter Property="Background" Value="White" />
            </Trigger>
        </Style.Triggers>
    </Style>
</Border.Style>

Be aware that you can not directly set Background="Transparent" on the Border element, since such an assignment would have higher precedence than those in a Style Setter, and would hence make the Trigger ineffective.