Detect mouse directly over border in WPF

I have a simple UserControl whose direct Child element is a border:-

 <Border x:Name="LayoutRoot" BorderThickness="5" BorderBrush="Transparent">
    <Grid>...Content here...</Grid>
 </Border>

How can I detect that the mous开发者_JS百科e is over the border area, that is the 5 pixel border itself? While the mouse is there I want to flip the border brush to another color. When the mouse moves into the main Grid content I want to border brush to flip back.

You can do this by placing a style on the Border and using a Trigger.

Note that you need to set the normal color in the Style, since setting it directly on the Border would set a local value that overrides the trigger.

<Border x:Name="LayoutRoot" BorderThickness="5">
    <Border.Style>
        <Style TargetType="Border">
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="BorderBrush" Value="Green"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Border.Style>
    <Grid>...Content here...</Grid>
</Border>

You could also put the Style in a resource dictionary so that you can share it among multiple Border elements:

<UserControl.Resources>
    <Style TargetType="Border" x:Key="borderGreenOnHover">
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="BorderBrush" Value="Green"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</UserControl.Resources>
<Border x:Name="LayoutRoot" BorderThickness="5"
        Style="{StaticResource borderGreenOnHover}">
    <Grid>...Content here...</Grid>
</Border>

If the mouse is inside the border, the trigger will not fire. This is because the default Background for a Border is null, not Transparent, so the background area will not respond to hit testing. If you set the Border.Background property to Transparent or to another Brush, then the trigger would fire if the mouse is anywhere over the Border.

If you want a non-null Background for the Border but you only want the trigger to fire when the mouse is over the border area, you can use IsMouseDirectlyOver instead of IsMouseOver, which will be false if the mouse is over a child element. You could then set the Background on the Grid to Transparent so that the mouse is always over the grid. (Really, if you wanted the contents to have a background color then it would be easier to just set it on the Grid.)

This can be checked with the MouseEnter & MouseLeave events from the border.

Xaml:

<Border x:Name="LayoutRoot" BorderThickness="5" BorderBrush="Transparent" MouseEnter="border_MouseEnter" MouseLeave="border_MouseLeave">
    <Grid>...Content here...</Grid>
</Border>

Code-Behind:

private void border_MouseEnter(object sender, MouseEventArgs e)
{
    Border hoveredBorder= (Border)sender;
    hoveredBorder.BorderBrush= Brushes.Yellow;
}

private void border_MouseLeave(object sender, MouseEventArgs e)
{
    Border hoveredBorder= (Border)sender;
    hoveredBorder.BorderBrush= Brushes.Black;
}

Edit: I used Border hoveredBorder= (Border)sender; so you can use these events for more than just one border. If you don't want this you can just remove that line & get the desired border straight in.

Edit2: Example Application