Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

WPF set border background in trigger

I need to create a trigger, that will change Border background property, when MouseEnter occurred. I did the follow:

<Border Width="20" Height="30" Focusable="True">
        <Border.Background>
            <LinearGradientBrush>
                <LinearGradientBrush.GradientStops>
                    <GradientStop Color="Aquamarine" Offset="0"/>
                </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
        </Border.Background>
        <Border.Style>
            <Style TargetType="{x:Type Border}">
                <Style.Triggers>

                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background">
                            <Setter.Value>
                                <LinearGradientBrush>
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStop Color="Aquamarine" Offset="0"/>
                                        <GradientStop Color="Beige" Offset="0.2"/>
                                        <GradientStop Color="Firebrick" Offset="0.5"/>
                                        <GradientStop Color="DarkMagenta" Offset="0.9"/>
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Border.Style>
    </Border>

but it doesn't work. Thanks.

like image 572
Artem Makarov Avatar asked Oct 19 '10 04:10

Artem Makarov


1 Answers

Common mistake. You have set the Border.Background property directly which will always override the value set by your trigger. (Locally set values have a very high precedence, style has a pretty low precedence.)

Instead, you should move your "normal" background into the Style like so:

<Border>
    <Border.Style>
        <Style TargetType="Border">
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush>
                        <LinearGradientBrush.GradientStops>
                            <GradientStop Color="Aquamarine" Offset="0"/>
                        </LinearGradientBrush.GradientStops>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <!-- the trigger you showed -->
            </Style.Triggers>
        </Style>
    </Border.Style>
</Border>
like image 83
Josh Avatar answered Oct 28 '22 07:10

Josh