Search code examples
c#.netxamlmaterial-design-in-xamlwfp

How to replace button hover color in XAML and Material Design Xaml Toolkit?


I want to replace the Material Design Xaml button hover color. But i just dont know how to do it please help. Below is my button code...

<Button Width="45" Margin="0" Height="40" Background="Transparent" BorderThickness="0" Click="MinimizeButton_Click">
     <Button.Style>
       <Style TargetType="Button" BasedOn="{StaticResource MaterialDesignFlatButton}">
          <Style.Triggers>
              <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="DarkRed"/>
              </Trigger>
          </Style.Triggers>
       </Style>
     </Button.Style>
     <Image Source="Images/minimize.png" Height="15" Width="15" />
</Button>

So how to replace the hover color even if I add a color it didnt work..


Solution

  • Unfortunately there is already a trigger on IsMouseOver in the control template of the MaterialDesignFlatButton which set the Background to a color based on the Foreground

    It is done like this in their style

    <Trigger Property="UIElement.IsMouseOver" Value="true">
    <Setter TargetName="border" Value="{Binding Foreground , RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource BrushOpacityConverter}, ConverterParameter=0.16}" Property="Background" />
    </Trigger>
    

    What you can do is to add also a Foreground change in your trigger if you can live with the fact that the text will also be of this color like below.

    enter image description here

    Otherwise you have to override the control template completely to remove this trigger.