Alex Rivera | Logout

Change style of surrounding border on mouse over

Asked 2010-01-27T09:28:27.993
13

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.

.net wpf xaml styles mouseevent
Edit
Report

1 Answer

10

Set the triggers directly on the Border object. Also, don't set the BorderBrush on the Border object, but also set it with the trigger:

    <Border.Style>
        <Style TargetType="{x:Type Border}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Border.BorderBrush" Value="Yellow" />
                </Trigger>
                <Trigger Property="IsMouseOver" Value="False">
                    <Setter Property="Border.BorderBrush" Value="Black" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Border.Style>

Also, if you're having trouble seeing what the triggers are up to, check out how to debug triggers here. Can be pretty helpful.
Hope this helps.

answered 2010-01-27T10:10:17.777

Your Answer