How to change button style on mouseover and use multibinding?

Question

I use MultiBinding in a Button.Style to set the Style value based upon a boolean value (IsScenSelBtnEnabled).

<Button.Style>
  <MultiBinding Converter="{StaticResource StyleConverter}">
    <Binding Path="IsScenSelBtnEnabled" />
    <Binding Source="{StaticResource BlueButton2}" />
    <Binding Source="{StaticResource DisabledButton2}" />
  </MultiBinding>
</Button.Style>

I also need the Style value to change to a style called BlueButton3 when a mouseover event occurs on the button. I've spent the past couple of hours googling this and trying to figure it out on my own, but I'm not having any luck. I see that one can use Style.Triggers in order to set a Style property when a trigger occurs (such as IsMouseOver), but I can't get this to work with my current MultiBinding.

<Style.Triggers>
  <Trigger Property="IsMouseOver" Value="True">
    <Setter Property="Background" Value="LightGreen"/>
  </Trigger>
</Style.Triggers>

Any help would be appreciated. Thanks!

Do you use the StyleConverter to select the style based on IsScenSelBtnEnabled? — Yusuf Tarık Günaydın

Rowbear Rowbear · Accepted Answer · 2015-11-05T20:51:52

I think it's best to answer this question in reverse. You have the right idea in your style trigger for IsMouseOver. However, it doesn't work because of WPF's evaluation order for DependencyProperty's:

https://msdn.microsoft.com/en-us/library/vstudio/ms743230(v=vs.100).aspx#listing

As you can see, the style triggers get evaluated first, but then the template triggers get evaluated next. Thus your style triggers won't ever visually surface because the default template for a button has a trigger for IsMouseOver already.

In order to get the button background to turn green, you need to override the ControlTemplate:

    <Button.Template>
                    <ControlTemplate TargetType="{x:Type ButtonBase}">
                        <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                            <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="Button.IsDefaulted" Value="True">
                                <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" TargetName="border" Value="LightGreen"/>
                                <Setter Property="BorderBrush" TargetName="border" Value="LightGreen"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Background" TargetName="border" Value="#FFC4E5F6"/>
                                <Setter Property="BorderBrush" TargetName="border" Value="#FF2C628B"/>
                            </Trigger>
                            <Trigger Property="ToggleButton.IsChecked" Value="True">
                                <Setter Property="Background" TargetName="border" Value="#FFBCDDEE"/>
                                <Setter Property="BorderBrush" TargetName="border" Value="#FF245A83"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Background" TargetName="border" Value="#FFF4F4F4"/>
                                <Setter Property="BorderBrush" TargetName="border" Value="#FFADB2B5"/>
                                <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="#FF838383"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
    </Button.Template>

Note the "IsMouseOver" Trigger sets the background to lightgreen.

Regarding the first part of your question... Personally I think there's an easier way to solve your problem without using the convert and multibinding. Since you have to override the controltemplate for the button already, you might as well just set the default properties for the button to whatever you want, then add to the new control template's "IsEnabled" trigger section to set properties that you want when the button is disabled. Your final xaml will look something like this:

 <Button Background="Blue" IsEnabled="{Binding IsScenSelBtnEnabled}">A Button!
            <Button.Template>
                <ControlTemplate TargetType="{x:Type ButtonBase}">
                    <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                        <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="Button.IsDefaulted" Value="True">
                            <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" TargetName="border" Value="LightGreen"/>
                            <Setter Property="BorderBrush" TargetName="border" Value="LightGreen"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Background" TargetName="border" Value="#FFC4E5F6"/>
                            <Setter Property="BorderBrush" TargetName="border" Value="#FF2C628B"/>
                        </Trigger>
                        <Trigger Property="ToggleButton.IsChecked" Value="True">
                            <Setter Property="Background" TargetName="border" Value="#FFBCDDEE"/>
                            <Setter Property="BorderBrush" TargetName="border" Value="#FF245A83"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Background" TargetName="border" Value="#FFF4F4F4"/>
                            <Setter Property="BorderBrush" TargetName="border" Value="#FFADB2B5"/>
                            <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="#FF838383"/>
                            <!--Insert any other setters for your disabled style here!-->
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Button.Template>
        </Button>

How to change button style on mouseover and use multibinding?

1 Answers