如何在IsMouseOver触发器上更改UserControl的子元素的属性？

Question

I have a custom usercontrol which has an outline border which i want to highlight somehow while the mouse is over the control. I tried to add a style with mouse over trigger to the usercontrol but there didn't find out how to target the child border (style targetname seems not to find "OuterBorder").

Adding the trigger to the border itself seems to not work at all.

<UserControl x:Class="CCC.Controls.Test"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:CCC.Controls"
             mc:Ignorable="d" 
             d:DesignHeight="240" d:DesignWidth="182" Height="240" Width="182" Margin="2" >
    <!-- tried to add trigger here too as UserControl.Style -->
    <Grid>
        ... <!-- other controls inside here -->
        <Border x:Name="OuterBorder" Width="182" CornerRadius="3"  BorderThickness="3" BorderBrush="#acacac" Margin="0,00,0,0" Height="240" VerticalAlignment="Top">
            <!-- doesnt work -->
            <Border.Style>
                <Style>
                    <Style.Triggers>
                        <Trigger Property="Border.IsMouseOver" Value="True">
                            <Setter Property="Border.BorderBrush" Value="Red"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
        </Border>
    </Grid>
</UserControl>

Thanks for any ideas!

Answer 1

You have set a Local Value of BorderBrush property to acacac . This local value will take precedence. See Property Value Precedence .

1. Set Background=Transparent for the Border .

2. Remove BorderBrush from Border tag and make following changes :

    <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="BorderBrush" Value="Red"/> </Trigger> <Trigger Property="IsMouseOver" Value="False"> <Setter Property="BorderBrush" Value="#acacac"/> </Trigger> </Style.Triggers>