在 wpf 中设置子元素的边距时，IsMouseOver 属性不起作用

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 round section and not outside of it. This is because the color outside of the border is "null". By actively 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>