Change color of Button when Mouse is over

问题

I want to change the background color of a button when IsMouseOver == True

    <Button Command=\"{Binding ClickRectangleColorCommand}\" Background=\"{Binding Color, Converter={StaticResource RGBCtoBrushColorsConverter},Mode=TwoWay}\" Width=\"auto\" Height=\"40\">
        <TextBlock Foreground=\"Black\" Text=\"{Binding Color, Converter={StaticResource RGBCColorToTextConveter},Mode=TwoWay}\"/>
          <Button.Style>
             <Style TargetType=\"Button\" BasedOn=\"{StaticResource {x:Type Button}}\">
               <Style.Triggers>
                  <Trigger Property=\"IsMouseOver\" Value=\"True\">
                    <Setter Property=\"Background\" Value=\"DarkGoldenrod\"/>
                  </Trigger>
               </Style.Triggers>
             </Style>
         </Button.Style>
    </Button>

I can\'t seem to understand why this trigger isn\'t working.

回答1:

Try this- In this example Original color is green and mouseover color will be DarkGoldenrod

<Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="50" Height="50" HorizontalContentAlignment="Left" BorderBrush="{x:Null}" Foreground="{x:Null}" Margin="50,0,0,0">
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Background" Value="Green"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="DarkGoldenrod"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

回答2:

<Button Content="Click" Width="200" Height="50">
<Button.Style>
    <Style TargetType="{x:Type Button}">
        <Setter Property="Background" Value="LightBlue" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border x:Name="Border" Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="LightGreen" TargetName="Border" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Button.Style>

回答3:

<Button Background="#FF4148" BorderThickness="0" BorderBrush="Transparent">
     <Border HorizontalAlignment="Right" BorderBrush="#FF6A6A" BorderThickness="0>
     <Border.Style>
         <Style TargetType="Border">
             <Style.Triggers>
                 <Trigger Property="IsMouseOver" Value="True">
                     <Setter Property="Background" Value="#FF6A6A" />
                 </Trigger>
             </Style.Triggers>
         </Style>
      </Border.Style>
      <StackPanel Orientation="Horizontal">
           <Image  RenderOptions.BitmapScalingMode="HighQuality"   Source="//ImageName.png"   />
      </StackPanel>
      </Border>
  </Button>

来源：https://stackoverflow.com/questions/20073294/change-color-of-button-when-mouse-is-over

标签

wpf

xaml

user-interface

button

mouseover