Change style of surrounding border on mouse over

Question

I have a Grid with a Border around it. Upon mouse over on the Grid, I want to change the style on the Border. How would I go about doing this? This is what I've tried, without any success so far:

<Border Name="Border" BorderBrush="Transparent" BorderThickness="1" CornerRadius="2">
    <Grid>
        <Grid.Style>
            <Style TargetType="{x:Type Grid}">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="Border" Property="BorderBrush" Value="#FFB9D7FC" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Grid.Style>

        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        ...
    </Grid>
</Border>

Upon attempting to build this XAML, I get the error

TargetName property cannot be set on a Style Setter.

but I can't think of any other way to do this. Help would be much appreciated. Using any code-behind is out of the question.

Answer 1

You need do the following:

1. Remove the BorderBrush from the Border definition. Triggers can overwrite properties set by setters in styles, but not properties set directly within the tag.

2. Put the Trigger into the Border rather than into the Grid (see the examples that the others provided).

3. Regarding the hit test on the Grid: Put a transparent box behind the grid so that MouseOver is always captured:

Code example for point 3:

<Grid>
    <Rectangle Fill="Transparent" /><!-- make sure that the mouse is always over "something" --> 
    <Grid Name="myGrid">       
        <Grid.ColumnDefinitions> 
            <ColumnDefinition /> 
            <ColumnDefinition /> 
        </Grid.ColumnDefinitions> 
        <TextBlock Name="myText">sadasdsa</TextBlock> 
    </Grid> 
</Grid>