Change color of Button when Mouse is over

Question

I want to change the background color of a button when IsMouseOver    True       lt Button Command   Binding ClickRectangleColorCommand   Background   Binding Color  Converter  StaticResource RGBCtoBrushColorsConverter  Mode TwoWay   Width  auto  Height  40  gt           lt TextBlock Foreground  Black  Text   Binding Color  Converter  StaticResource RGBCColorToTextConveter  Mode TwoWay    gt             lt Button Style gt                lt Style TargetType  Button  BasedOn   StaticResource  x Type Button    gt                  lt Style Triggers gt                     lt Trigger Property  IsMouseOver  Value  True  gt                       lt Setter Property  Background  Value  DarkGoldenrod   gt                     lt  Trigger gt                  lt  Style Triggers gt                lt  Style gt            lt  Button Style gt       lt  Button gt    I can t seem to understand why this trigger isn t working

User · Answer

lt Button Background   FF4148  BorderThickness  0  BorderBrush  Transparent  gt        lt Border HorizontalAlignment  Right  BorderBrush   FF6A6A  BorderThickness  0 gt        lt Border Style gt            lt Style TargetType  Border  gt                lt Style Triggers gt                    lt Trigger Property  IsMouseOver  Value  True  gt                        lt Setter Property  Background  Value   FF6A6A    gt                    lt  Trigger gt                lt  Style Triggers gt            lt  Style gt         lt  Border Style gt         lt StackPanel Orientation  Horizontal  gt              lt Image  RenderOptions BitmapScalingMode  HighQuality    Source    ImageName png      gt         lt  StackPanel gt         lt  Border gt     lt  Button gt

User · Answer

lt Button Content  Click  Width  200  Height  50  gt   lt Button Style gt       lt Style TargetType   x Type Button   gt           lt Setter Property  Background  Value  LightBlue    gt           lt Setter Property  Template  gt               lt Setter Value gt                   lt ControlTemplate TargetType   x Type Button   gt                       lt Border x Name  Border  Background   TemplateBinding Background   gt                           lt ContentPresenter HorizontalAlignment  Center  VerticalAlignment  Center    gt                       lt  Border gt                       lt ControlTemplate Triggers gt                           lt Trigger Property  IsMouseOver  Value  True  gt                               lt Setter Property  Background  Value  LightGreen  TargetName  Border    gt                           lt  Trigger gt                       lt  ControlTemplate Triggers gt                   lt  ControlTemplate gt               lt  Setter Value gt           lt  Setter gt       lt  Style gt   lt  Button Style gt

User · Answer

As others already said  there seems to be no good solution to do that easily  But to keep your code clean I suggest creating a seperate class that hides the ugly XAML   How to use after we created the ButtonEx-class    lt Window x Class  MyApp MainWindow          xmlns  http   schemas microsoft com winfx 2006 xaml presentation          xmlns x  http   schemas microsoft com winfx 2006 xaml          xmlns d  http   schemas microsoft com expression blend 2008          xmlns mc  http   schemas openxmlformats org markup-compatibility 2006          xmlns wpfEx  clr-namespace WpfExtensions          mc Ignorable  d          Title  MainWindow  Height  450  Width  800  gt       lt Grid gt           lt wpfEx ButtonEx HoverBackground  Red  gt  lt  wpfEx ButtonEx gt       lt  Grid gt   lt  Window gt    ButtonEx xaml cs  using System Windows  using System Windows Controls  using System Windows Media   namespace WpfExtensions            lt summary gt          Standard button with extensions          lt  summary gt      public partial class ButtonEx   Button               readonly static Brush DefaultHoverBackgroundValue   new BrushConverter   ConvertFromString   FFBEE6FD   as Brush           public ButtonEx                         InitializeComponent                       public Brush HoverBackground                       get   return  Brush GetValue HoverBackgroundProperty                 set   SetValue HoverBackgroundProperty  value                       public static readonly DependencyProperty HoverBackgroundProperty   DependencyProperty Register             HoverBackground   typeof Brush   typeof ButtonEx   new PropertyMetadata DefaultHoverBackgroundValue              ButtonEx xaml Note  This contains all the original XAML from System Windows Controls Button   lt Button x Class  WpfExtensions ButtonEx               xmlns  http   schemas microsoft com winfx 2006 xaml presentation               xmlns x  http   schemas microsoft com winfx 2006 xaml               xmlns mc  http   schemas openxmlformats org markup-compatibility 2006                xmlns d  http   schemas microsoft com expression blend 2008                mc Ignorable  d                d DesignHeight  450  d DesignWidth  800              x Name  buttonExtension  gt       lt Button Resources gt           lt Style x Key  FocusVisual  gt               lt Setter Property  Control Template  gt                   lt Setter Value gt                       lt ControlTemplate gt                           lt Rectangle Margin  2  SnapsToDevicePixels  true  Stroke   DynamicResource  x Static SystemColors ControlTextBrushKey    StrokeThickness  10  StrokeDashArray  1 2   gt                       lt  ControlTemplate gt                   lt  Setter Value gt               lt  Setter gt           lt  Style gt           lt SolidColorBrush x Key  Button Static Background  Color   FFDDDDDD   gt           lt SolidColorBrush x Key  Button Static Border  Color   FF707070   gt           lt SolidColorBrush x Key  Button MouseOver Background  Color   FFBEE6FD   gt           lt SolidColorBrush x Key  Button MouseOver Border  Color   FF3C7FB1   gt           lt SolidColorBrush x Key  Button Pressed Background  Color   FFC4E5F6   gt           lt SolidColorBrush x Key  Button Pressed Border  Color   FF2C628B   gt           lt SolidColorBrush x Key  Button Disabled Background  Color   FFF4F4F4   gt           lt SolidColorBrush x Key  Button Disabled Border  Color   FFADB2B5   gt           lt SolidColorBrush x Key  Button Disabled Foreground  Color   FF838383   gt       lt  Button Resources gt       lt Button Style gt           lt Style TargetType   x Type Button   gt               lt Setter Property  FocusVisualStyle  Value   StaticResource FocusVisual    gt               lt Setter Property  Background  Value   StaticResource Button Static Background    gt               lt Setter Property  BorderBrush  Value   StaticResource Button Static Border    gt               lt Setter Property  Foreground  Value   DynamicResource  x Static SystemColors ControlTextBrushKey     gt               lt Setter Property  BorderThickness  Value  1   gt               lt Setter Property  HorizontalContentAlignment  Value  Center   gt               lt Setter Property  VerticalContentAlignment  Value  Center   gt               lt Setter Property  Padding  Value  1   gt               lt Setter Property  Template  gt                   lt Setter Value gt                       lt ControlTemplate TargetType   x Type Button   gt                           lt Border x Name  border  BorderBrush   TemplateBinding BorderBrush   BorderThickness   TemplateBinding BorderThickness   Background   TemplateBinding Background   SnapsToDevicePixels  true  gt                               lt ContentPresenter x Name  contentPresenter  Focusable  False  HorizontalAlignment   TemplateBinding HorizontalContentAlignment   Margin   TemplateBinding Padding   RecognizesAccessKey  True  SnapsToDevicePixels   TemplateBinding SnapsToDevicePixels   VerticalAlignment   TemplateBinding VerticalContentAlignment    gt                           lt  Border gt                           lt ControlTemplate Triggers gt                               lt Trigger Property  IsDefaulted  Value  true  gt                                   lt Setter Property  BorderBrush  TargetName  border  Value   DynamicResource  x Static SystemColors HighlightBrushKey     gt                               lt  Trigger gt                               lt Trigger Property  IsMouseOver  Value  true  gt                                   lt Setter Property  Background  TargetName  border  Value   Binding Path HoverBackground  ElementName buttonExtension    gt                                   lt Setter Property  BorderBrush  TargetName  border  Value   StaticResource Button MouseOver Border    gt                               lt  Trigger gt                               lt Trigger Property  IsPressed  Value  true  gt                                   lt Setter Property  Background  TargetName  border  Value   StaticResource Button Pressed Background    gt                                   lt Setter Property  BorderBrush  TargetName  border  Value   StaticResource Button Pressed Border    gt                               lt  Trigger gt                               lt Trigger Property  IsEnabled  Value  false  gt                                   lt Setter Property  Background  TargetName  border  Value   StaticResource Button Disabled Background    gt                                   lt Setter Property  BorderBrush  TargetName  border  Value   StaticResource Button Disabled Border    gt                                   lt Setter Property  TextElement Foreground  TargetName  contentPresenter  Value   StaticResource Button Disabled Foreground    gt                               lt  Trigger gt                           lt  ControlTemplate Triggers gt                       lt  ControlTemplate gt                   lt  Setter Value gt               lt  Setter gt           lt  Style gt       lt  Button Style gt   lt  Button gt    Tip  You can add an UserControl with name  ButtonEx  to your project in VS Studio and then copy paste the stuff above in

User · Answer

Try this- In this example Original color is green and mouseover color will be DarkGoldenrod   lt Button Content  Button  HorizontalAlignment  Left  VerticalAlignment  Bottom  Width  50  Height  50  HorizontalContentAlignment  Left  BorderBrush   x Null   Foreground   x Null   Margin  50 0 0 0  gt       lt Button Style gt           lt Style TargetType   x Type Button   gt               lt Setter Property  Background  Value  Green   gt               lt Setter Property  Template  gt                   lt Setter Value gt                       lt ControlTemplate TargetType   x Type Button   gt                           lt Border Background   TemplateBinding Background   gt                               lt ContentPresenter HorizontalAlignment  Center  VerticalAlignment  Center   gt                           lt  Border gt                       lt  ControlTemplate gt                   lt  Setter Value gt               lt  Setter gt               lt Style Triggers gt                   lt Trigger Property  IsMouseOver  Value  True  gt                       lt Setter Property  Background  Value  DarkGoldenrod   gt                   lt  Trigger gt               lt  Style Triggers gt           lt  Style gt       lt  Button Style gt   lt  Button gt

[wpf] Change color of Button when Mouse is over

Examples related to wpf

Examples related to xaml

Examples related to user-interface

Examples related to button

Examples related to mouseover