IsMouseOver property is not working when margin of child element is set in wpf

Question

Recently, I am making a wpf application for chatting. I want to change border brush color when mouseover on border. But, My code is not working because of margin or padding set.

sample code follow as:

MainWindow.xaml

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <TextBlock Text="Test" Name="testBlock"/>

        <Border Name="test" BorderThickness="1" Width="300" Height="200">

            <TextBlock Text="Test1" Margin="30"/>


            <Border.Style>
                <Style TargetType="Border">
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="BorderBrush" Value="Red"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="False">
                            <Setter Property="BorderBrush" Value="Yellow"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
        </Border>
    </Grid>
</Window>

MainWindow.xaml.cs

namespace WpfApp1
{
    public partial class MainWindow : Window
    {


        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

I want to change border brush when mouseover on border. How to make working well?

Answer 1

A mouse over event works by detecting if the mouse is over a rendered pixel of a control. This has the advantage, that if you make a round button with a border for example you will only be able to click it in the inside section and not outside of it. In this example you can click the blue, but not the red part.

This is the case because the color outside of the border is "null" and will not be rendered. By setting it to transparent it will be rendered and thus be able to trigger the mouse over event.

This will work:

        <Border Name="test" BorderThickness="1" Width="300" Height="200" Background="Transparent">
            <TextBlock Text="Test1" Margin="30"/>
            <Border.Style>
                <Style TargetType="Border">
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="BorderBrush" Value="Red"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="False">
                            <Setter Property="BorderBrush" Value="Yellow"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
        </Border>