CODEWITHSUNDEEP
c#wpf
SMahdiS
SMahdiS

Reputation: 940

Setting background disables MouseOver effect

This is my style:

   <UserControl.Resources>
    <Style TargetType="Button" x:Key="Style2" BasedOn="{StaticResource MetroCircleButtonStyle}">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Foreground" Value="#000000"/>
                <Setter Property="Background" Value="#ededed"/>
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
                <Setter Property="Foreground" Value="#ffffff"/>
                <Setter Property="Background" Value="#009688"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="false">
                <Setter Property="Foreground" Value="#FF808080"/>
            </Trigger>

        </Style.Triggers>
    </Style>
</UserControl.Resources>

And I used it like this:

<Button x:Name="button" Content="abcdefg" Style="{DynamicResource Style2}" Width="45" Height="45" VerticalAlignment="Top" BorderThickness="0"  FontSize="18"  FontFamily="/WpfApplication2;component/Resources/#Vazir"/>

This works perfectly OK. The problem is when I try to change the background of the button either by changing the XAML or dynamically changing the background. When I do so, the mouse over effect doesn't work anymore.

<Button x:Name="button" Content="abcdefg" Background="White" Style="{DynamicResource Style2}" Width="45" Height="45" VerticalAlignment="Top" BorderThickness="0"  FontSize="18"  FontFamily="/WpfApplication2;component/Resources/#Vazir"/>

Or

button.Background = Brushes.Transparent;

The MouseOver effect doesn't work when I set the background, but I need to set the background. What is wrong?

Upvotes: 1

Views: 99

Answers (3)

Clemens
Clemens

Reputation: 128147

A dependency property value that is set directly (a "local value") has higher precedence than a value set by a Style Setter. See Dependency Property Value Precedence for details.

So, setting

<Button Background="White" ... />

effectively disables your Triggers.

You should instead set the Background property by another Style Setter, e.g.

<Button ...>
    <Button.Style>
        <Style TargetType="Button" BasedOn="{StaticResource Style2}">
            <Setter Property="Background" Value="White"/>
        </Style>
    </Button.Style>
</Button

Upvotes: 2

Shorstok
Shorstok

Reputation: 531

Actually you can do it with animations which have higher precedence than 'local value', here's how:

define your style like this:

    <Style TargetType="Button" x:Key="ButtonStyle">
        <Style.Triggers>
            <EventTrigger RoutedEvent="Button.MouseEnter">
                <BeginStoryboard>
                    <Storyboard TargetProperty="(Foreground).(SolidColorBrush.Color)">
                        <ColorAnimation To="Red" Duration="0:0:0"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>
    </Style>

then you can use your button like

        <Button Content="Button Title 1" Foreground="Green" Style="{StaticResource ButtonStyle}"/>
        <Button Content="Button Title 2" Foreground="Blue" Style="{StaticResource ButtonStyle}"/>

This 'trick' is used in standard WPF Control Styles and Templates.

Upvotes: 1

mm8
mm8

Reputation: 169410

If you want to be able to set the Background property to a local value and still change it when the mouse moves over the Button you could define the triggers in the ControlTemplate of the Button. This effectively means that you have to either copy the MetroCircleButtonStyle base style or add the data triggers directly to the base style.

Alternatively you could set the Foreground property in a Style as suggested by Clemens. You could create the Style programmatically like this:

Style style = new Style { TargetType = typeof(Button) };
style.Setters.Add(new Setter(Control.ForegroundProperty, Brushes.Green));
style.BasedOn = FindResource("MetroCircleButtonStyle") as Style;
button1.Style = style;

Upvotes: 1

Related Questions